美文网首页
react 父子组件执行顺序

react 父子组件执行顺序

作者: 年轻人多学点 | 来源:发表于2022-01-18 12:09 被阅读0次

一、组件执行的生命周期: 参考 https://www.cnblogs.com/soyxiaobi/p/9559117.htmlhttps://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值。

相关文章

网友评论

      本文标题:react 父子组件执行顺序

      本文链接:https://www.haomeiwen.com/subject/gomebktx.html