关于react的一些须知

Posted 2020-10-12 瓶子2333

之前为了学习redux买了一本《深入浅出react和redux》，只看了redux部分。最近重新一遍，还是很有收获，这里结合阅读文档时的一些理解，记下一些初学者可能不太注意的东西。

原则：

1.react原本的目标是为设计视图组件，UI=render(data);一个react组件有两个数据源可以驱动渲染，一个是记录内部状态变化的state，一个是外部传入的props。由于props中的变量可能在外部的某个地方被引用，因而props中的数据是绝对不能修改的。

生命周期：

2.react组件的生命周期有三个过程：Mount、Update、Unmount，每个过程都会触发钩子函数：

Mount----

constructor：创建一个组件类的实例，一般用来设置state和绑定成员函数的this；无状态的组件不需要constructor

getInitialState：调用React.createClass时才调用，调用React.createClass已被官方弃用。

getDefaultProps：调用React.createClass时才调用，调用React.createClass已被官方弃用。

componentWillMount：渲染前触发（一般不需要）

render：渲染组件

componentDidMount：渲染完成后触发，比如在这里执行ajax；只能在浏览器中调用

Update----

componentWillReceiveProps:组件传入的props改变或父组件重新渲染时触发

shouldComponentUpdate(nextProps,nextState):返回布尔值决定该次更新是否继续

子该函数中，this.state是setState之前的值。通过this.state,next.state,this.props,next.props对比，决定是否渲染，可以提高组件性能

componentWillUpdate:

render:

componentDidUpdate:可在服务器端或客户端调用。

Unupdate-----

componentWillUnmount:唯一一个卸载过程触发的函数，作者提醒，在mount时通过非react方式创建的dom容易造成内存泄漏，需要在这里手动清除。

数据流：

react中的数据流是自上而下的，父组件可以将props、state、自定义的一些js对象、方法、字符串传给子组件，作为子组件的props，逐级下传。

当几个组件需要共享某个状态变量的时候，react文档提到一个概念“lifting state up”：意思是将这个共享的状态变量放到最近的一个共同父组件中，由这个父组件以props的方式传给子组件。

 

//待续