React中memo阻止组件重渲染失效问题咨询

1. Player组件在Parent内部定义了 #

如果你的Player组件是写在Parent组件的函数体里面的，那每次Parent重渲染的时候，都会生成一个全新的Player组件类型。React判断组件要不要更新的前提是组件类型得一致，类型变了的话，React会直接把旧的Player卸载，再重新挂载新的——这时候memo的比较逻辑根本没用，因为这已经不是同一个组件了，自然会触发控制台里的“重渲染”（其实是卸载重建）。

举个典型的错误写法：

function Parent() {
  const [count, setCount] = useState(0);
  // 故意触发无限重渲染
  useEffect(() => setCount(prev => prev + 1));

  // 每次Parent重渲染，这里都会重新定义Player
  const Player = React.memo(() => {
    console.log('Player重渲染');
    return <div>我是Player组件</div>;
  }, () => true);

  return <Player />;
}

2. 自定义比较函数的使用出了问题 #

虽然你说比较函数始终返回true，但得确认两个点：

• 你是不是把比较函数正确传给了React.memo的第二个参数？比如得写成React.memo(PlayerComponent, () => true)，不能传错位置。
• 别搞反返回值的逻辑：React.memo的比较函数返回true，代表props没变化，组件不用重渲染；返回false才会触发重渲染。要是你不小心把逻辑写反了，返回的是false，那Parent重渲染时Player肯定跟着更。

其他少见情况 #

• 如果传给Player的key属性每次Parent重渲染都变，React会卸载旧组件再挂新的，也会导致控制台显示重渲染。
• 要是Player自身内部的状态变了触发重渲染，不过你说的是跟着Parent走，这种情况概率很低。

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