react 子组件获取父组件传来的 props 问题

Posted 2023-05-04

参考技术A 平时我获取父组件 的props， 都是在子组件函数里  this.props.xxxx

父组件这样写

子组件这样写

这种情况，子组件在 componentDidMount 里面可以拿到 props，因为 父组件的值不是异步的。

然而，当父组的的值是异步，不如AJAX请求数据，子组件的componentDidMount 就获取不到 父组件的 props

父组件

子组件componentDidMount 里是拿不到 props

怎么解决这个问题呢， 这时候，componentWillReceiveProps 就显神威了，

看了生命周期，上面问题，用componentWillReceiveProps 

完美解决问题

下面介绍一个生命周期的定义：

1）componentWillMount()

在客户端和服务器上，在初始渲染发生之前立即调用一次 如果在这个方法中调用setState，

render（）将看到更新的状态，并且只会执行一次，尽管状态改变。

2)componentDidMount()

 调用一次，只在客户端（不在服务器上），在初始渲染发生后立即 子组件的componentDidMount（）方法在父组件的componentDidMount（）方法之前被调用 setTimeout  setInterval  AJAX 在此之行，强烈建议

3)componentWillReceiveProps(nextProps)

 在组件接收新props时调用。初始渲染不调用此方法。老的props可以用this.props  新值就用nextProps查看 在此函数中调用this.setState（）不会触发附加的渲染。

4)shouldComponentUpdate(nextProps, nextState)

 当正在接收新的道具或状态时，在渲染之前调用。 此方法必须返回falseortrue否则报错true则渲染，false则不渲染！在此声明周期中可以考虑是否需要进行渲染！避免不必要的性能浪费// 如果shouldComponentUpdate返回false，那么render（）将被完全跳过，直到下一个状态改变。此外，不会调用componentWillUpdate和componentDidUpdate。 默认返回true// 如果性能是一个瓶颈，特别是有几十个或几百个组件，请使用shouldComponentUpdate来加快您的应用程序。returntrueorfalse

5) componentWillUpdate(nextProps, nextState)

当正在接收新的props或state时立即调用。初始渲染不调用此方法// 您不能在此方法中使用this.setState（）。如果您需要更新state以响应prop更改，请改用componentWillReceiveProps。

6)componentDidUpdate(nextProps, nextState)

在组件的更新刷新到DOM后立即调用。初始渲染不调用此方法。当组件已更新时，使用此操作作为DOM操作的机会

7)componentWillUnmount()

 在组件从DOM卸载之前立即调用。在此方法中执行任何必要的清理，例如使计时器无效或清除在componentDidMount中创建的任何DOM元素。clearInterval or destroy

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

参考技术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