如何在React的getDerivedStateFromProps中判断是否为首次渲染？

嘿，我完全懂你在React v16.3里用getDerivedStateFromProps时的困惑——这个静态方法没法直接访问组件实例，常规的this相关判断方式根本用不了对吧？别慌，咱们用一个简单的state标记就能搞定这个问题。

核心思路很简单：在组件的state里加个布尔值标记（比如isFirstRender），初始化时设为true。然后在getDerivedStateFromProps里通过prevState拿到这个标记，以此判断是否是首次渲染：

• 如果是首次渲染，就执行你需要的特定state修改逻辑，同时把isFirstRender设为false，确保后续props更新不会再触发这段逻辑；
• 如果不是首次渲染，直接返回null（或者根据需求返回其他state更新）。

给你贴个具体的代码示例：

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // 初始化首次渲染标记
      isFirstRender: true,
      // 你的其他业务state
      displayText: ''
    };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    // 检查是否为首次渲染
    if (prevState.isFirstRender) {
      // 这里写你首次渲染时要执行的state修改逻辑
      return {
        displayText: nextProps.initialText,
        isFirstRender: false // 切换标记，后续不再触发首次逻辑
      };
    }

    // 非首次渲染时，无需更新state就返回null
    return null;
  }

  render() {
    return <div>{this.state.displayText}</div>;
  }
}

还有几个需要注意的点：

• 这个标记存在state里，所以组件卸载后重新挂载时，isFirstRender会被重新设为true，这完全符合预期——重新挂载本来就是一次新的首次渲染；
• 一定要记得在首次处理后把标记设为false，不然每次props变化都会触发你的首次渲染逻辑，这肯定不是你想要的；
• 如果后续还有根据props更新state的需求，可以在else分支里添加对应逻辑，或者在判断后补充其他条件判断。

这样就能精准控制只在首次渲染时执行特定的state修改啦！

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