功能组件与React.useCallback和React.memo()正在重新呈现

Question

我正在理解React的概念。我想尝试一些东西。

当父组件状态改变时，是否每个功能子组件都会重新渲染，即使它没有任何props。

似乎是，这是我的父代码:

function App() {

const [count, setCount] = React.useState(0);
return (
<div className="App">
<AnimalX />
<h1
onClick={() => {
setCount(count + 1);
}}
>
InCrease Count {count}
</h1>
</div>
);
}
export default App;

我的AnimalX组件:

export const AnimalX = React.memo(() => {
return <div>{console.log("in render")}jhgh</div>;
});

当我点击H1标签时，我的子组件正在呈现。为了解决这个问题，我使用了React.memo()来阻止重新渲染。

现在，我开始研究useCallback。我读到它缓存了不同渲染的函数。所以我改变了我的父组件并传递了一个像这样的prop:

function App() {
const [count, setCount] = React.useState(0);
const testFunction = React.useCallback(() => {
console.log("testFunction");
});
return (
<div className="App">
<AnimalX show={testFunction} />
<h1
onClick={() => {
setCount(count + 1);
}}
>
InCrease Count {count}
</h1>
</div>
);

现在，我的假设是我的AnimalX组件将只渲染一次，因为我使用了React。在它里面，我正在传递函数的缓存版本。但事实并非如此。

我的子组件每次点击都会重新渲染。这让我很震惊。我也想不出原因。

如果有人能给我指出正确的方向，我将不胜感激。

Answer 1

你错过了API，你也应该得到一个eslint警告，缺少一个依赖数组作为第二个参数:

//                                                    v Deps array
const testFunction = React.useCallback(() => { ... }, []);

参考useCallbackAPI在React文档。