React.memo根本不运行

Question

我无法让React.memo工作-下面是我想要做的一个简单的演示

import {memo} from 'react'

function BadComponent({a}) {
    return <div>{a}</div>
}

function areEqual(prev,next) {
    console.log('This is never run')
    return prev.a === next.a
}

export default memo(BadComponent, areEqual)

然后，在家长中，我这样运行：

function Page(){
   const a = 1
   return <BadComponent a={a} />`
}

这样就没问题了。如果我使用devtools将支柱a从1更改为5，它不会运行areEqual函数。这里的例子- https://codesandbox.io/s/zen-frog-f1h9e?file=/src/App.js

Answer 1

最初，挂载areEqual不会运行(在这里进行比较没有多大意义)。它将在由父级触发的后续重发程序上执行。

如果您将App更改为如下所示(添加将触发按钮单击重登的状态)，您将看到控制台日志触发：

export default function App() {
  const [a, setA] = useState(1)
  return (
    <div className="App">
      <BadComponent a={a}></BadComponent>
      <button onClick={() => setA(a => a + 1)}>change a</button>
    </div>
  );
}