React组件props变更未触发重渲染及状态更新问题咨询

兄弟，先给你纠正个关键误区哈：constructor和componentWillMount都是组件第一次初始化挂载的时候才会执行的！后续props变更触发的重渲染，这俩钩子根本不会触发，这就是你为啥看不到它们执行的原因～

接下来给你说几种正确的处理方式，分类组件和函数组件两种情况：

类组件方案 #

1. 推荐：使用getDerivedStateFromProps（React 16.3+） #

这是React官方推荐的处理props变更派生状态的方法，它是纯函数，不会有副作用，每次渲染前都会触发（包括第一次挂载）。你需要在state里存一份当前的question用来对比，当props的question变化时更新分数：

class YourComponent extends React.Component {
  state = {
    score: 0,
    currentQuestion: this.props.question
  };

  static getDerivedStateFromProps(nextProps, prevState) {
    // 对比新props和之前存的question
    if (nextProps.question !== prevState.currentQuestion) {
      // 这里根据新question计算新分数
      const newScore = prevState.score + calculatePoints(nextProps.question);
      return {
        score: newScore,
        currentQuestion: nextProps.question // 更新存的当前question
      };
    }
    return null; // 不需要更新状态就返回null
  }

  // ...其他代码
}

2. 旧版方案：componentWillReceiveProps（不推荐但仍可用） #

这个钩子在React 16.3+被标记为"不安全"，因为可能会导致一些意外的bug，但如果是旧项目还在用的话可以这么写：

componentWillReceiveProps(nextProps) {
  // 对比新旧props的question
  if (nextProps.question !== this.props.question) {
    const newScore = this.state.score + calculatePoints(nextProps.question);
    this.setState({ score: newScore });
  }
}

函数组件方案（现在更推荐函数组件+Hook） #

用useEffect钩子监听props.question的变化，变化时更新分数状态：

import { useState, useEffect } from 'react';

function YourComponent(props) {
  const [score, setScore] = useState(0);

  useEffect(() => {
    // 当props.question变化时执行这里的逻辑
    const newScore = score + calculatePoints(props.question);
    setScore(newScore);
  }, [props.question, score]); // 依赖项：只要question或score变化就触发

  // ...其他代码
}

如果计算分数的逻辑比较复杂，建议把它封装成一个纯函数，避免在useEffect里写太多逻辑。

⚠️ 重要提醒：绝对不要在render函数里更新状态！这会导致组件无限重渲染，直接触发React的报错，这是React的核心禁忌之一～

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