美文网首页
componentWillReceiveProps代替方案

componentWillReceiveProps代替方案

作者: 易剑圣 | 来源:发表于2019-07-10 15:51 被阅读0次

    componentWillReceiveProps 这个周期函数在最新的react 不建议用了,那么由没有替代方案呢。答案是肯定的。

    componentWillReceiveProps 是为了解决props是异步获取的时候使自组件正确获得最新props的方法,一般我们只需要用第一个参数,nextProps(即是最新props)就可以满足需求。

    在业务中,由两种场景: 

    1,props是通过父组件的ajax异步获取,这个时候只需要在componentWillReceiveProps里面拿到最新的props,不过这个时候需要一些判断条件来避免一些不必要的渲染。

    2,props是通过父组件的ajax异步获取,这个时候只需要在componentWillReceiveProps里面拿到最新的props,并且根据这个最新的props 来发送ajax 获取数据,来渲染视图。

    官方代替方案是用 getDerivedStateFromProps 来代替 componentWillReceiveProps,第一种情况代替如下:

    看出区别了吗?代替方案是: 是一个静态方法, 需要把props 用 state 存起来,然后 用 preState来获取上一个props,第二,componentWillReceiveProps 直接 setState而 getDerivedStateFromProps 则是return 一个对象就好,它相当于setState,还有一个细节,后面的 return  null;不能少,为什么,自己查api。

    第二种场景怎么办呢,getDerivedStateFromProps 不能直接this.xxx。无解了吗?,当然是由解决办法的,下图:

    componentWillReceiveProps里面直接 this.test(); 而 getDerivedStateFromProps是一个静态方法,调用是先实例化,在调用里面的方法

    new TeamScope(nextProps).test();

    test 方法里就是平时的写法,ajax ,this.setState, this.props.disptch等等

    好了,从此和 componentWillReceiveProps 说拜拜。

    相关文章

      网友评论

          本文标题:componentWillReceiveProps代替方案

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