ReactJS读书笔记二：组件生命周期
发布时间：2020-12-15 07:20:24 所属栏目：百科 来源：网络整理
导读：React 组件就是一个状态机，它接受两个输入参数： this.props 和 this.state，返回一个虚拟DOM。 React组件的生命周期分几个阶段，每个阶段会有若干个回调函数可以响应不同的时刻。 组件生命周期 一 创建类 React组件是有类 和 实例的区别的，通过 React.cre
|
React 组件就是一个状态机，它接受两个输入参数： this.props 和 this.state，返回一个虚拟DOM。
React组件的生命周期分几个阶段，每个阶段会有若干个回调函数可以响应不同的时刻。
组件生命周期一 创建类
React组件是有类 和 实例的区别的，通过 React.createClass 创建的是类，比如：
这里的List是一个类，在创建类的时候，只有一个回调 getDefaultProps 会被调用。这个函数返回一个对象，这个对象会以引用方式被所有的实例共享，注意，是引用，不是clone。
组件不允许修改自己的props，只能通过父组件来修改。这是为了保持props的一致性。如果有需要自行修改的值，应该存在 this.state 中。
二实例化
类创建完成之后，就可以进行实例化。
实例化一个类，由如下过程组成：
其中有几个点需要注意：
1，this.state 只存储原始数据，不要存储计算后的数据
比如this.state.time =1433245642536，那么就不要再存一个 this.state.timeString = ‘2015-06-02 19:47:22’ 因为这个是由time 计算出来的，其实他不是一种state，他只是 this.state.time 的一种展示方式而已。
这个应该放在render中计算出来：
<span>time: {this.formatTime(this.state.time)}</span>
2，componentWillMount 用来处理render之前的逻辑，不要在render中处理业务逻辑。
render就是一个模板的作用，他只处理和展示相关的逻辑，比如格式化时间这样的，如果有业务逻辑，那么要放在 componentWillMount 中执行。
所以render中一定不会出现改变 state 之类的操作。
3，render返回的是虚拟DOM
所谓虚拟DOM，其实就是 React.DOM.div 之类的实例，他就是一个JS对象。render方法完成之后，真实的DOM并不存在。
4，componentDidMount 中处理和真实DOM相关的逻辑
这时候真实的DOM已经渲染出来，可以通过this.getDOMNode() 方法来使用了。典型的场景就是可以在这里调用jquery插件。
三 更新
当组件实例化完成，就进入了存在期，这时候一般会响应用户操作和父组件的更新来更新视图。
四 销毁
componentWillUnmount
举例说明组件的生命周期
下面用一个例子来掩饰组件的生命周期
copy
执行这一段代码，实际上做了三件事：
那么在创建类的时候，输出：
getDefaultProps
在创建list1和 list2的时候都会输出：
geyInitialState
componentWillMount
render
componentDidMount
于是执行这段代码，最终输出的就是：
getDefaultProps
geyInitialState
componentWillMount
render
componentDidMount
geyInitialState
componentWillMount
render
componentDidMount
此时已经存在一个类NodesList 和 两个对象 list1& list2
然后我们执行 list1.setProps({name: "ccc”})。那么输出如下：
componentWillUpdate
render
componentDidUpdate
可以发现页面上的hello aaa 已经变成了 helloccc
（编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |