• componentWillReceiveProps代替方案


    componentWillReceiveProps代替方案

    易剑圣
    0.6692019.07.10 15:51:02字数 448阅读 14,152

    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 说拜拜。

  • 相关阅读:
    安装VS 2015完成后,VS2012 打开报错
    ASP.NET MVC 项目中 一般处理程序ashx 获取Session
    windows平台 查看 dll 程序集 PublicKeyToken
    MySQL 表与字段编码格式报错
    Linux系统下安装MongoDB 指南
    ASP.NET 访问路径 错误提示 HTTP 错误 404.8 原来路径中包含bin目录被拒绝
    ASP.NET 大文件上传
    将类型(int,string,…)转换为 T 类型
    直接插入排序
    MySQL 优化之索引合并(index_merge)
  • 原文地址:https://www.cnblogs.com/sexintercourse/p/16578983.html
Copyright © 2020-2023  润新知