React 16.3组件更新后如何追踪并保存需提交服务器的值？

嘿，针对你React 16.3+遇到的这个问题，我给你几个实用的解决方案，都是符合新版React生命周期规范的：

React 16.3+里componentDidUpdate依然是安全可用的生命周期，它会在props更新、组件重新渲染完成后触发，刚好适合你在props变更后更新this.value的需求，而且不会影响渲染流程，也不会在渲染前触发Redux操作。

代码示例：

class Foo extends Component {
  constructor(props) {
    super(props);
    this.value = {};
  }

  componentDidUpdate(prevProps) {
    // 一定要对比前后props，避免无意义的更新和无限循环
    if (prevProps.targetProp !== this.props.targetProp) {
      // 根据新props更新你的value
      this.value = { ...this.value, keyFromProps: this.props.targetProp };
      
      // 这里可以标记值已更新，等后续合适时机（比如用户点击提交）再提交到服务器/Redux
    }
  }

  render() {
    return (
      // 你的其他组件
      <Bar onChange={(newValue) => {
        // 处理Bar组件的输入变更，更新this.value
        this.value = { ...this.value, ...newValue };
      }} />
    );
  }

  // 示例：提交到服务器/Redux的方法
  handleSubmit = () => {
    // 把this.value提交到服务器
    // api.post('/submit', this.value);
    // 或者dispatch到Redux
    // this.props.dispatch(submitDataAction(this.value));
  }
}

如果你需要this.value完全跟随props变化而更新，也可以用getDerivedStateFromProps，但要注意它是静态方法，不能直接访问this，所以需要把this.value改成组件的state。不过React官方不推荐过度使用这个生命周期，因为容易导致代码逻辑复杂，难以维护。

代码示例：

class Foo extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: {}
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    // 对比props和当前state，决定是否更新
    if (nextProps.targetProp !== prevState.value.keyFromProps) {
      return {
        value: { ...prevState.value, keyFromProps: nextProps.targetProp }
      };
    }
    // 返回null表示不更新state
    return null;
  }

  render() {
    return (
      <Bar onChange={(newValue) => {
        this.setState(prevState => ({
          value: { ...prevState.value, ...newValue }
        }));
      }} />
    );
  }

  handleSubmit = () => {
    // 提交state里的value到服务器/Redux
    // api.post('/submit', this.state.value);
  }
}

如果可以重构组件为函数式写法，useEffect是处理这类props变化后逻辑的最佳选择，代码更简洁，也更符合React当前的设计趋势。

代码示例：

import { useState, useEffect } from 'react';

const Foo = (props) => {
  const [value, setValue] = useState({});

  // 当props.targetProp变化时，更新value
  useEffect(() => {
    setValue(prev => ({ ...prev, keyFromProps: props.targetProp }));
  }, [props.targetProp]); // 依赖数组，只有当指定props变化时才执行

  const handleBarChange = (newValue) => {
    setValue(prev => ({ ...prev, ...newValue }));
  };

  const handleSubmit = () => {
    // 提交value到服务器/Redux
    // api.post('/submit', value);
  };

  return (
    // 你的组件内容
    <Bar onChange={handleBarChange} />
  );
};

• 如果你继续使用类组件，优先选componentDidUpdate，逻辑更直观，也不容易出问题；
• 尽量避免过度依赖getDerivedStateFromProps，除非你的值完全由props决定；
• 推荐尝试函数组件+useEffect的写法，这是React现在主推的模式，代码更清爽；
• 不管哪种方案，都不要在渲染流程中直接存入Redux，而是在用户触发的动作（比如提交按钮点击）或者合适的时机再执行Redux的dispatch，避免不必要的重渲染。

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