使用静态返回true或false的反应备忘录比较函数

Question

我是react新手，尤其是react钩子。我有一个封装在React.memo中的组件，命名为WithMemo。我将一个函数作为比较函数传递，而不考虑上一个或下一个props值，我返回true或false，但两个返回都有相同的结果：不重新渲染。有人能告诉我这是什么行为吗？

这是我的代码：

const WithMemo: FC<{ list: number[] }> = React.memo(({ list }) => {
console.log('Yes memo', list)
return <p>hello</p>
}, (prev, nxt) => false)
const MyList: FC<{ list: number[] }> = ({ list }) => {
console.log('No memo', list)
return <p>hello</p>
}

function App() {
const [c, setC] = useState('')
return (
<div className="App">
<MyList list={[1, 2, 3]} />
<WithMemo list={[1, 2, 3]} />
<input type="text" value={c} onChange={e => setC(e.currentTarget.value)} />
<p>{c}</p>
</div>
);
}
export default App;

Answer 1

第二个参数是一个函数，在给定道具的情况下，当组件应该相同时返回。也就是说，在你的演示中，你应该返回true，不重新渲染，如果你通过false，它将重新渲染

import React, { useState } from "react";
const WithMemo = React.memo(
({ list }) => {
console.log("Yes memo", list);
return <p>hello</p>;
},
(prev, nxt) => true
);
const MyList = ({ list }) => {
console.log("No memo", list);
return <p>hello</p>;
};
export default function App() {
const [c, setC] = useState("");
return (
<div className="App">
<MyList list={[1, 2, 3]} />
<WithMemo list={[1, 2, 3]} />
<input
type="text"
value={c}
onChange={(e) => setC(e.currentTarget.value)}
/>
<p>{c}</p>
</div>
);
}

在此处测试https://codesandbox.io/s/serene-chandrasekhar-m4mhe?file=/src/App.js