Reactjs React.memo根本不运行

我无法让

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)

从'react'导入{memo}
函数BadComponent（{a}）{
返回{a}
}
函数相等（上一个，下一个）{
console.log（'这永远不会运行'）
返回上一个a==下一个a
}
导出默认备忘（BadComponent、areEqual）

然后，在父级中，我按如下方式运行它：

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

功能页（）{
常数a=1
返回`
}

---

那就好了。如果使用devtools将prop

a

从1更改为5，则不会运行

areEqual

功能。这里的示例-

在第一次装载时

areEqual

不会运行（在这里进行比较没有多大意义）。它将在由您的家长触发的后续重新渲染器上执行

如果您将

应用程序更改为类似以下内容（添加一个状态，该状态将在单击按钮时触发重新渲染），您将看到控制台日志触发：

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>
  );
}

导出默认函数App（）{
常数[a，setA]=useState（1）
返回(
setA（a=>a+1）}>改变a
);
}