cytle/blog

blog

cytle.github.io

blog's Issues

React打基础

React生命周期

1. constructor
2. componentWillMount 如果在这个函数里面调用setState，本次的render函数可以看到更新后的state，并且只渲染一次
3. componentDidMount
4. componentWillReceiveProps(nextProps) 父组件发生render的时候子组件就会调用componentWillReceiveProps（不管props有没有更新，也不管父子组件之间有没有数据交换）
5. shouldComponentUpdate(object nextProps, object nextState) 每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件
6. componentWillUpdate
7. componentDidUpdate
8. render 不要在render里面修改state
9. componentWillUnmount 一般在componentDidMount里面注册的事件需要在这里删除

如何触发render

假设shouldComponentUpdate返回true

1. 第一次render

• constructor
• componentWillMount
• render
• componentDidMount

2. 父组件render（无论props是否发生改变）

• componentWillReceiveProps
• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

3. setState(并非每次都触发render，多次会合并操作，TODO 怎么合并操作)

• shouldComponentUpdate
• componentWillUpdate
• render
• componentDidUpdate

4. forceUpdate^[1]

• componentWillUpdate
• render
• componentDidUpdate

/**
 * ------------------ The Life-Cycle of a Composite Component ------------------
 *
 * - constructor: Initialization of state. The instance is now retained.
 *   - componentWillMount
 *   - render
 *   - [children's constructors]
 *     - [children's componentWillMount and render]
 *     - [children's componentDidMount]
 *     - componentDidMount
 *
 *       Update Phases:
 *       - componentWillReceiveProps (only called if parent updated)
 *       - shouldComponentUpdate
 *         - componentWillUpdate
 *           - render
 *           - [children's constructors or receive props phases]
 *         - componentDidUpdate
 *
 *     - componentWillUnmount
 *     - [children's componentWillUnmount]
 *   - [children destroyed]
 * - (destroyed): The instance is now blank, released by React and ready for GC.
 *
 * -----------------------------------------------------------------------------
 */

react 组件api

setState(object nextState[, function callback])

replaceState(object nextState[, function callback])

forceUpdate([function callback])

DOMElement getDOMNode()

bool isMounted()

setProps(object nextProps[, function callback])

replaceProps(object nextProps[, function callback])