有关 React 生命周期:
1, 组件生命周期的执行次数是什么样子的???
只执行一次: constructor,componentWillMount,componentDidMount
执行多次: render , 子组件的 componentWillReceiveProps,componentWillUpdate,componentDidUpdate
有条件的执行: componentWillUnmount(页面离开, 组件销毁时)
不执行的: 根组件 (ReactDOM.render 在 DOM 上的组件) 的 componentWillReceiveProps(因为压根没有父组件给传递 props)
2, 组件的生命周期执行顺序是什么样子的???
假设组件嵌套关系是 App 里有 parent 组件, parent 组件有 child 组件.
如果不涉及到 setState 更新, 第一次渲染的顺序如下:
- App: constructor --> componentWillMount --> render -->
- parent: constructor --> componentWillMount --> render -->
- child: constructor --> componentWillMount --> render -->
- componentDidMount (child) --> componentDidMount (parent) --> componentDidMount (App)
这时候触发 App 的 setState 事件
- App: componentWillUpdate --> render -->
- parent: componentWillReceiveProps --> componentWillUpdate --> render -->
- child: componentWillReceiveProps --> componentWillUpdate --> render -->
- componentDidUpdate (child) --> componentDidUpdate (parent) --> componentDidUpdate (App)
那如果是触发 parent 的 setState 呢?
- parent: componentWillUpdate --> render -->
- child: componentWillReceiveProps --> componentWillUpdate --> render -->
- componentDidUpdate (child) --> componentDidUpdate (parent)
那如果是只是触发了 child 组件自身的 setState 呢?
child: componentWillUpdate --> render --> componentDidUpdate (child)
结论:
1, 如图: 完成前的顺序是从根部到子部, 完成时时从子部到根部.(类似于事件机制)
2, 每个组件的红线 (包括初次和更新) 生命周期时一股脑执行完毕以后再执行低一级别的红线生命周期.
3, 第一级别的组件 setState 是不能触发其父组件的生命周期更新函数, 只能触发更低一级别的生命周期更新函数.
总结起来就如下图:
提问: 那么这里提一个问题, 如果 App 里面有多个 parent1 parent2 ...,parent 里由多个 child, 那么生命周期执行顺序应该时什么样的????
结论: 一套组件 (父包括子, 子包括孙) 执行的时候一个整体, 执行完毕在执行下一套, 用到这里就是 App 里先执行 parent1 和 parent1 的子, 子的子..., 然后完毕再执行 parent2 这一套.
3, 什么时候该用 componentWillReceiveProps?
是否每个子组件都需要 componentWillReceiveProps 生命周期函数来更新数据吗? 你的原则是??
A, 开始前首先需要知道 componentWillReceiveProps 函数有一个参数 nextProps, 它是一个 { 对象 } , 从单词就可以看出它是 update 时候 (也就是下一次) 父组件传递过来的 props.
B, 还要知道 "第一条中" 所讲解的有些生命周期函数只执行一次, 而有的执行多次, 其中 componentWillReceiveProps 执行多次, 而 constructor 等执行一次.
C, 还需知道在子组件中每次传递过来的 this.props 对象其实和 componentWillReceiveProps 的 nextProps 是一样的, 都是最新的.
D, 由 "第一条" 得知: componentWillReceiveProps 生命周期是在更新子组件最先执行的, 优先于 compoentWillUpdate, 更优先于 render.
E,render 函数里不能使用 setState(), 否则会造成死循环.
那么知道了以上呢?
由 C 得知, this.props 和 componentWillReceiveProps 的 nextProps 都是一样的, 通过 this.props 就可以取到最新的值, 那么 componentWillReceiveProps 还有必要吗?
所以: 大部分情况下 componentWillReceiveProps 生命周期函数是没用的, 即可以略去不写, 因为它确实没什么用.
但是情况 1:
由 D 得知, componentWillReceiveProps 是最先执行的, 所以在其内可以 setState({}), 在接下来的 render 中能拿到最新的 state 后值, 再加上 B 得知,
如果是下面这种情况: 在 constructor 函数中初始化了某个 state, 必须用 componentWillReceiveProps 来更新 state, 以便 render 中为新的 state 值.
情况 2:
如果父组件有一些请求, 每次参数更新的时候才发请求, 同时和子组件的关系比较密切,
可以将数据请求放在 componentWillReceiveProps 进行执行, 需要传的参数则从 (nextProps) 中获取.
而不必将所有的请求都放在父组件中, 于是该请求只会在该组件渲染时才会发出, 从而减轻请求负担.
情况 3: 后续添加;
结论: 大部分情况下 componentWillReceiveProps 生命周期函数是没用的, 即可以略去不写,
但是在 constructor 函数中初始化了某个 state, 必须用 componentWillReceiveProps 来更新 state, 不可省去, 否则 render 中的 state 将得不到更新.
注意: 使用 componentWillReceiveProps 的时候, 不要去向上分发, 调用父组件的相关 setState 方法, 否则会成为死循环.
来源: https://www.cnblogs.com/faith3/p/9216165.html