React组件生命周期及组件之间的通信

[TOC]

名词解释

state：它是组件的属性，主要用来存储组件自身需要的数据。

虚拟DOM：它是ReactJS中提出的一个概念，是将真实的DOM结构映射成一个JSON数据结构。

1.组件生命周期

1.创建阶段

getDefaultProps()

：该方法会返回一个对象，并缓存下来。然后与父组件指定的props对象合并，最后赋值给this.props作为该组件的默认属性。

2.实例化阶段

getInitialState()

：初始化组件state的值，其返回值会赋值给组件的this.state属性。

componentWillMount()

：业务逻辑的处理都应该放在这里，如对state的操作等。

render()

：渲染并返回一个虚拟DOM。当返回null或false时，表明不需要渲染任何东西。

componentDidMount()

：在该方法中，ReactJS会使用render方法返回的虚拟DOM对象来创建真是的DOM结构。在这里可以对根据虚拟DOM结构而生成的真实DOM进行相应的处理 。

3.更新阶段

主要发生在用户操作之后或父组件有更新的时候。

componentWillReceiveProps(object nextProps)

：在该函数中，通常可以调用this.setState方法来完成对state的修改。

shouldComponentUpdate(nextProps, nextState)

：该方法用来拦截新的props或state，然后根据实现设定好的判断逻辑，作出最后要不要更新组件的决定。return一个boolean值。

componentWillUpdate(object nextProps, object nextState)

：当

shouldComponentUpdate()

返回true时，可以在该方法中做一些更新之前的操作。

render

：根据一系列的diff算法，生成需要更新的虚拟DOM数据。实践表明，在

render

中，最后只做数据和模板的组合，不应进行state等逻辑的修改，这样组件结构更清晰。

componentDidUpdate

：该方法在组件的更新已经同步到DOM中后出发，我们常在该方法中做一些DOM操作。

4.销毁阶段

componentWillUnmount

：当组件需要从DOM中移除时，我们通常会做一些取消事件绑定、移除虚拟DOM中对应的组件数据结构、销毁一些无效的定时器等工作。

2.组件之间的通信

子组件调用父组件的方法：

只需父组件把要被调用的方法以属性的方式放在子组件上，子组件内部便可以通过“this.props.被调用的方法”这样的方式来获得父组件传过来的方法。

父组件调用子组件的方法：

子组件被设置为ref之后，父组件就可以通过this.ref.xxx来获取到子组件了。其中xxx为子组件ref的值。

3.其它tips

合理使用key属性：

合理使用key属性有时能减少需要页面渲染时更新的DOM节点。

如在没有key属性的First和Second组件之间插入一个Third组件，React JS的Diff算法的结果是，First组件不变，先将Second组件进行删除，然后在创建并插入Third组件，最后再创建并插入Second组件。

如果给上述三个组件都添加上key属性，则算法结果会有所改变：First组件不变，Second组件不变，只是在Second组件之前创建并插入来Third组件。

最近在学习React Native，重温了一下React组件的生命周期及组件之间的通信。

以上内容来自《React Native入门与实践》一书的部分读书笔记，BTW，这是一本不错的入门书，讲得很详细。