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

目录

• 1.组件生命周期
  • 1.建立阶段
  • 2.实例化阶段
  • 3.更新阶段
  • 4.销毁阶段
• 2.组件之间的通讯
• 3.其它tips

名词解释

• 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，这是一本不错的入门书，讲得很详细。