关于react子组建state初始化值为父组建传来的props问题

Posted 2023-03-16

参考技术A 问：React中通过props给子组件传state值时，为什么当父组件setState后props不能同步更新？而当父组件再次setState时props值却是这次修改前的state。

答：父组件传递给子组件的props发生改变，引发子组件的render，并没有执行子组件的constructor函数，子组件没有被卸载自然不会重新加载，只会重新render，而如果父组件的props传递给子组件的state，那么子组件的state只会在第一次加载的时候被赋值，后续的父组件props变化并不会被赋值到子组件的state上，还是要理解组件的声明周期函数，以及各个函数在什么时候会被调用。

子组件显示父组件穿过来的props有两种方式：

这种方式，父组件改变props后，子组件重新渲染，由于直接使用的props，所以我们不需要做什么就可以正常显示最新的props

这种方式，由于我们使用的是state，所以每当父组件每次重新传递props时，我们需要重新处理下，将props转换成自己的state，这里就用到了 componentWillReceiveProps。

关于你提到的不会二次渲染是这样的：每次子组件接收到新的props，都会重新渲染一次，除非你做了处理来阻止（比如使用：shouldComponentUpdate），但是你可以在这次渲染前，根据新的props更新state，更新state也会触发一次重新渲染，但react不会这么傻，所以只会渲染一次，这对应用的性能是有利的。

https://segmentfault.com/q/1010000008387645
https://segmentfault.com/q/1010000006019858