react 父子组件执行顺序

发布网友发布时间：2022-12-16 22:39

共1个回答

热心网友时间：2023-09-11 13:59

一、组件执行的生命周期：参考 https://www.cnblogs.com/soyxiaobi/p/9559117.html 或 https://www.cnblogs.com/kdcg/p/9182393.html （含生命周期函数传进来的参数）

1、初始没有改变state、props 的生命周期：

constructor、componentWillMount、render 、【子组件对应这4个周期函数】、componentDidMount 依次执行

2、改变 state 后的生命周期：

a、父组件的 state 改变：

shouldComponentUpdate、componentWillUpdate、render、【子组件的 componentWillReceiveProps、子组件对应父组件这4个周期函数】、componentDidUpdate

父组件的的state改变，会引起子组件 state 相关的生命周期函数运行。

b、子组件的 state 改变：

shouldComponentUpdate、componentWillUpdate、render、componentDidUpdate

子组件的state改变，不会引起父组件的变化。

3、改变 props 后的生命周期：【props改变，不会引起父子组件的任何变化，state变化才引起子组件的变化】

父组件传递给子组件的props改变，不会引起任何变化。只有父组件state改变，父组件render函数运行，所有子组件递归更新。

所以父组件传递给子组件的props值，一般使用state的值，不然给子组件的props值改变了，但是没有办法传递到子组件中，得等触发了父组件的render函数，才能把数据传递给子组件。

父组件的 state 设置，都会触发子组件的 componentWillReceiveProps 生命周期函数，且把函数参数是props值。