componentWillReceiveProps与render执行顺序疑问及dispatch报错咨询

嘿，我来帮你把这两个问题理清楚～

1. componentWillReceiveProps 和 render 的执行顺序 #

先给你拍板：在React v16.3之前的类组件生命周期里（这个钩子现在已经被官方标记为不安全了，但咱们先聊你问的场景），componentWillReceiveProps 绝对是在 render 之前执行的，不可能出现顺序反过来的情况。

当组件收到新的props时，完整的执行流程是这样的：

• 第一步就触发 componentWillReceiveProps(nextProps)：你可以在这里对比新旧props，提前做些状态调整的准备
• 接着是 shouldComponentUpdate(nextProps, nextState)：只要它返回true（默认就是true），就继续往下走
• 然后是 componentWillUpdate(nextProps, nextState)：这是render前最后一个钩子
• 才轮到 render()：开始渲染组件
• 最后是 componentDidUpdate(prevProps, prevState)：组件更新完之后触发

所以你完全不用怀疑顺序问题，componentWillReceiveProps肯定比render先跑。

2. 为什么dispatch action后会出现变量未定义？ #

你遇到的问题，跟两个钩子的顺序没关系，大概率是action的异步性在搞鬼：

• 如果你的dispatch是同步action：Redux的dispatch本身是同步的，reducer会立刻更新state，这时候在componentWillReceiveProps里dispatch完，state已经更新了，后续render应该能拿到新数据。但要是你的组件用的是本地state，不是直接取Redux store的话，可能是你没把store的新数据同步到组件state里？得检查下这块逻辑。
• 如果你的dispatch是异步action（比如用了redux-thunk、redux-saga这些中间件处理API请求）：这时候dispatch只是启动了异步操作，reducer更新state要等异步请求完成之后才会发生。而componentWillReceiveProps执行完就立刻进入render流程了，这时候异步请求还没结束，store里的数据还是旧的，组件自然拿不到新数据，就会出现变量未定义的错误。

给你几个解决思路 #

• 同步action的情况：检查下是不是在componentWillReceiveProps里正确把store的新数据同步到了组件state，或者直接用connect把store数据映射成组件props，确保映射逻辑没毛病。
• 异步action的情况：
  • 可以在componentDidUpdate里监听数据变化，等数据加载完成再做后续处理
  • 或者在render里加个条件判断，先确认数据存在再渲染，避免直接访问未定义的变量，比如：

    render() {
      const { yourTargetData } = this.props;
      // 先判断数据是否存在，不存在就显示加载态
      if (!yourTargetData) {
        return <div>加载中...</div>;
      }
      // 数据存在再渲染内容
      return <div>{yourTargetData.requiredProperty}</div>;
    }
    

额外提一句：别再用componentWillReceiveProps啦 #

React官方早就把这个钩子标记为不安全了，容易在异步渲染场景下出现不可预测的bug。如果你的项目是较新的版本，建议换用：

• 类组件：static getDerivedStateFromProps(nextProps, prevState)，这是个静态方法，初始渲染和后续更新时都会在render之前调用
• 函数组件：用useEffect监听props变化，或者直接用Redux的useSelector来获取最新的store数据

内容的提问来源于stack exchange，提问作者rajatgalav