React 16.3+中props变化时触发Redux action的最优方案

嘿，我懂你遇到的这个痛点！React 16.3之后废弃了componentWillReceiveProps，而getDerivedStateFromProps又是静态方法，根本没法直接调用dispatch对吧？其实不用纠结这个静态方法，咱们换个正确的路子就行——副作用操作（比如触发Redux action）本来就不该放在getDerivedStateFromProps里，它的职责只是同步组件内部state而已。

下面给你几个靠谱的方案：

1. 使用componentDidUpdate生命周期（类组件首选） #

componentDidUpdate是实例方法，能访问组件上下文，还能拿到上一轮的prevProps，完美适合处理props变化后的副作用。

示例代码：

class MyComponent extends React.Component {
  componentDidUpdate(prevProps) {
    // 只在目标props确实变化时触发action
    if (prevProps.name !== this.props.name) {
      // 触发Redux action缓存状态
      this.props.dispatch({
        type: 'CACHE_NAME',
        payload: this.props.name
      });
    }
  }

  // 其他组件逻辑（比如render）
  render() {
    return <div>{this.props.name}</div>;
  }
}

关键注意点：一定要加props变化的判断条件！如果不加，每次组件更新都会触发action，很可能导致无限渲染循环（比如action更新的Redux状态又会传递回组件props）。

2. 把逻辑移到父组件（更符合单向数据流） #

如果你的组件props是由父组件传递过来的，那可以直接在父组件里监听props/state变化，触发Redux action。这样子组件不用关心缓存逻辑，更符合React的单向数据流设计。

比如父组件：

class ParentComponent extends React.Component {
  componentDidUpdate(prevProps) {
    if (prevProps.userName !== this.props.userName) {
      this.props.dispatch({
        type: 'CACHE_NAME',
        payload: this.props.userName
      });
    }
  }

  render() {
    return <MyComponent name={this.props.userName} />;
  }
}

3. 函数组件用useEffect钩子 #

如果是函数组件的话，用useEffect监听目标props的变化，然后触发action就行，代码更简洁：

import { useEffect } from 'react';
import { useDispatch } from 'react-redux';

const MyComponent = ({ name }) => {
  const dispatch = useDispatch();

  useEffect(() => {
    // 当name变化时触发action
    dispatch({
      type: 'CACHE_NAME',
      payload: name
    });
  }, [name, dispatch]); // 依赖数组里加上name，确保只有name变化时才执行

  return <div>{name}</div>;
};

为什么getDerivedStateFromProps不行？ #

再啰嗦两句：getDerivedStateFromProps是静态方法，没有组件实例的上下文（拿不到this），所以没法调用this.props.dispatch。而且它的设计初衷是根据props同步更新组件内部的state，属于纯逻辑，不能包含副作用操作（比如发请求、触发Redux action这类）。

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