react 子组件获取父组件传来的 props 问题
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了react 子组件获取父组件传来的 props 问题相关的知识,希望对你有一定的参考价值。
参考技术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
以上是关于react 子组件获取父组件传来的 props 问题的主要内容,如果未能解决你的问题,请参考以下文章