前言
近几年前端可以说是飞速发展，从虚拟dom到flux单项数据流，这些对于前端可以说是跨时代到发展，对于前端开发者来说不仅仅是挑战也是大到机遇，如果你想成为一名顶尖到前端开发工程师，那我认为掌握这些概念和由此孕育而出到框架是必不可少的。anglurjs ，vuejs ，reactjs作为当前前端三大主流框架，也许我们工作中只会用到一种，但掌握他们，并能运用他们应该我们必备但技能。 注：本文只是自己重看reactjs文档的一些总结，主要参考的是reactjs的官方文档。
reactjs基本技能思维导图
reactjs基本语法
reactjs使用jsx语法有如下特点
- 标记与逻辑共同存放
- 通过大括号嵌入表达式
- jxs可以看作一个表达式
- 有效防止注入攻击
详细请点击查看
reactjs元素渲染
- reactjs只能通过ReactDOM.render()将react元素渲染到dom元素中
- 条件渲染：通过if 或者条件运算符去创建元素来表现当前的状态例：
function HelloWorld(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return <p>hello world</p>; } return <p>not login</p>; }
- 列表渲染与key:使用map()函数来渲染数组例：
const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((number) => <li>{number}</li> );
组件间的状态
- 状态：react的整个组件可以看成一个状态机，通过与用户的交互来改变状态，实现ui的更新，及React 里，只需更新组件的 state，然后根据新的 state重新渲染用户 界面 （不要操作 DOM），这也是flux单向数据流思想的一种体现。看个例子
import React from 'react' class Clock extends React.Component { constructor(props) { super(props); this.state = {date: new Date()}; } tick() { //通过setstate来改变状态 this.setState({ date: new Date() }); } render() { //将状态渲染到ui页面 return ( <div> <h1>Hello, world!</h1> <h2>现在是 {this.state.date.toLocaleTimeString()}.</h2> <button onClick={this.tick.bind(this)}>更新时间</button> </div> ); } }
注：reactjs中的状态可以称为自顶向下或单向数据流。任何状态始终由某些特定组件所有，并且从该状态导出的任何数据或 UI 只能影响树中下方的组件。
- 状态传递： reactjs组件的状态传递主要通过props，props与state的最大不同是props是不可以改变的。另外也可以理解为是自组件用来接受父组件中传递的属性。
class WebSite extends React.Component { constructor() { super(); this.state = { name: "菜鸟教程", site: "https://www.runoob.com" } } render() { return ( <div> <Name name={this.state.name} /> <Link site={this.state.site} /> </div> ); } } class Name extends React.Component { render() { console.log(this.props) return ( <h1>{this.props.name}</h1> ); } } class Link extends React.Component { render() { return ( <a href={this.props.site}> {this.props.site} </a> ); } }
reactjs生命周期简介
reactjs生命周期可以分为 mount update destroy每一个生命周期对应的api如下所示：
mount：
- constructor()
- static getDerivedStateFromProps()
- render()
- componentDidMount()
update：
- 1.static getDerivedStateFromProps()
- 2.shouldComponentUpdate()
- 3.render()
- 4.getSnapshotBeforeUpdate()
- 5.componentDidUpdate()
destroy：
- 1.componentWillUnmount()
事件与表单
React 元素的事件处理和 DOM 元素类似。但是有以下两点注意:
- React 事件绑定属性的命名采用驼峰式写法，而不是小写。
- 如果采用 JSX 的语法你需要传入一个函数作为事件处理函数，而不是一个字符串(DOM 元素的写法)
HTML 表单元素与 React 中的其他 DOM元素有所不同,表单中可变的状态保存在state中 并且只能通过setstate来更新
class HelloMessage extends React.Component { constructor(props) { super(props); this.state = {value: 'Hello Runoob!'}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } render() { var value = this.state.value; return <div> <input type="text" value={value} onChange={this.handleChange} /> <h4>{value}</h4> </div>; } }
reactjs生态相关
- create-react-app：reactjs脚手架用来构建项目的基本架构
- mobx/redux：状态管理工具
- react-router：完整的react路由解决方案
- ant-design：阿里开源的reactjs ui库
- axios: 基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
小结
本章主要介绍了reactjs的基本内容，主要参考了reactjs的官方文档。建议初学者完整的把reactjs的官方文档看几遍，注意不是看一遍。如果你能坚持多看几遍，并且在看的过程中写几个demo那你上手项目将非常快。
