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

平时我获取父组件 的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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 作为一个合格的开发者,不要只满足于编写了可以运行的代码。而要了解代码背后的工作原理;不要只满足于自己的程序...
    六个周阅读 8,545评论 1 33
  • 说在前面 关于 react 的总结过去半年就一直碎碎念着要搞起来,各(wo)种(tai)原(lan)因(le)。心...
    陈嘻嘻啊阅读 6,941评论 7 41
  • 生命周期流程图简单如下: 组件让你把用户界面分成独立的,可重复使用的部分,并且将每个部分分开考虑。React.Co...
    Simple_Learn阅读 1,100评论 0 0
  • 1、什么是react React.js 是一个帮助你构建页面 UI 的库。React.js 将帮助我们将界面分成了...
    谷子多阅读 2,579评论 1 13
  • 3. JSX JSX是对JavaScript语言的一个扩展语法, 用于生产React“元素”,建议在描述UI的时候...
    pixels阅读 2,919评论 0 24