React中父组件Props变更为何未触发子组件更新？

听起来你遇到的问题很典型——明明按照文档说props变更会触发子组件更新，但实际没生效。我帮你梳理几个最可能的原因，以及对应的解决办法：

1. 父组件未正确更新State（最常见） #

React只有在组件通过setState（类组件）或useState的更新函数（函数组件）修改状态时，才会触发组件重新渲染，进而传递更新后的props给子组件。如果你的父组件是直接修改state变量而不是用官方的更新方法，那组件根本不会重新渲染，子组件自然拿不到新的props。

错误示例（类组件）： #

class Y extends React.Component {
  constructor(props) {
    super(props);
    this.state = { currentTime: new Date().toLocaleTimeString() };
  }

  componentDidMount() {
    setTimeout(() => {
      // 直接修改state，不会触发渲染
      this.state.currentTime = new Date().toLocaleTimeString();
    }, 3000);
  }

  render() {
    return <X currentTime={this.state.currentTime} />;
  }
}

错误示例（函数组件）： #

function Y() {
  let currentTime = new Date().toLocaleTimeString();

  useEffect(() => {
    setTimeout(() => {
      // 直接修改变量，不会触发渲染
      currentTime = new Date().toLocaleTimeString();
    }, 3000);
  }, []);

  return <X currentTime={currentTime} />;
}

正确写法： #

类组件用this.setState，函数组件用useState的更新函数：

// 类组件正确写法
class Y extends React.Component {
  constructor(props) {
    super(props);
    this.state = { currentTime: new Date().toLocaleTimeString() };
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({ currentTime: new Date().toLocaleTimeString() });
    }, 3000);
  }

  render() {
    return <X currentTime={this.state.currentTime} />;
  }
}

// 函数组件正确写法
function Y() {
  const [currentTime, setCurrentTime] = useState(new Date().toLocaleTimeString());

  useEffect(() => {
    setTimeout(() => {
      setCurrentTime(new Date().toLocaleTimeString());
    }, 3000);
  }, []);

  return <X currentTime={currentTime} />;
}

2. 子组件错误地将Props存为本地State且未同步更新 #

如果你的子组件X一开始把父组件传的currentTime存在自己的state里，但没有监听props的变化来更新本地state，那即使父组件props变了，子组件的state也不会跟着变，h2里显示的还是旧值。

错误示例（类组件）： #

class X extends React.Component {
  constructor(props) {
    super(props);
    // 只在初始化时赋值，之后props变化不会更新
    this.state = { displayTime: props.currentTime };
  }

  render() {
    return <h2>{this.state.displayTime}</h2>;
  }
}

错误示例（函数组件）： #

function X(props) {
  const [displayTime, setDisplayTime] = useState(props.currentTime);
  // 没有监听props变化更新state
  return <h2>{displayTime}</h2>;
}

解决办法： #

要么直接使用props，不要存为本地state：

function X(props) {
  // 直接用props，不用本地state
  return <h2>{props.currentTime}</h2>;
}

如果确实需要本地state，要监听props变化同步更新：

// 类组件用componentDidUpdate
class X extends React.Component {
  constructor(props) {
    super(props);
    this.state = { displayTime: props.currentTime };
  }

  componentDidUpdate(prevProps) {
    if (prevProps.currentTime !== this.props.currentTime) {
      this.setState({ displayTime: this.props.currentTime });
    }
  }

  render() {
    return <h2>{this.state.displayTime}</h2>;
  }
}

// 函数组件用useEffect监听props
function X(props) {
  const [displayTime, setDisplayTime] = useState(props.currentTime);

  useEffect(() => {
    setDisplayTime(props.currentTime);
  }, [props.currentTime]); // 监听props变化

  return <h2>{displayTime}</h2>;
}

3. 子组件使用了阻止更新的优化手段 #

如果你的子组件用了React.memo（函数组件）、PureComponent或自定义了shouldComponentUpdate（类组件），可能因为浅比较没检测到props变化，或者自定义逻辑返回了false，导致组件不更新。

比如如果currentTime是引用类型（比如Date对象），React.memo的浅比较会认为每次都是新对象，应该会更新，但如果你自己写了shouldComponentUpdate返回false，那就会阻止更新：

错误示例： #

class X extends React.Component {
  shouldComponentUpdate() {
    // 错误地返回false，阻止所有更新
    return false;
  }

  render() {
    return <h2>{this.props.currentTime}</h2>;
  }
}

解决办法： #

检查shouldComponentUpdate的逻辑，确保当props变化时返回true；如果用React.memo，对于引用类型的props，可以传入自定义比较函数：

const X = React.memo((props) => {
  return <h2>{props.currentTime}</h2>;
}, (prevProps, nextProps) => {
  // 自定义比较逻辑，比如比较Date的时间戳
  return prevProps.currentTime.getTime() === nextProps.currentTime.getTime();
});

总结 #

回到你提到的React文档："An update can be caused by changes to props or state." 首先要确保父组件是通过正确的state更新方法触发了自身的重新渲染，这样新的props才会传递给子组件；其次要确保子组件没有通过本地state或优化手段阻止了props变化的响应。

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