Button组件每次渲染两次

Question

我尝试在每次点击按钮时增加计数。当点击按钮时，它会被渲染两次。但是应该只渲染一次。

这是我的代码https://codesandbox.io/s/async-pine-3z2ty3?file=/src/App.js

import { useCallback, useMemo, useState } from "react";
import Button from "./Button";
export default function App() {
const [count, setCount] = useState(0);
const [count1, setCount1] = useState(0);
const handleClick = useCallback(() => {
setCount(count + 1);
}, [count]);
const MyButton1 = useMemo(
() => <Button handleClick={handleClick} title="Increment Count" />,
[handleClick]
);
const MyButton2 = useMemo(
() => (
<Button handleClick={() => setCount1(count1 + 1)} title="Click here" />
),
[count1]
);
return (
<div className="App">
<div>count : {count}</div>
{MyButton1}
<div>count1 : {count1}</div>
{MyButton2}
</div>
);
}

import React from "react";
const Button = React.memo(({ handleClick, title }) => {
console.log(title);
return <button onClick={handleClick}>{title}</button>;
});
export default Button;

Answer 1

问题

1. 您的handleClick函数改变了count
2. 如果count变化，则创建新的handleClick
3. 如果handleClick更改，则创建新的<Button>

解决方案

1. 删除多余的useMemos
2. 传递一个函数给setCount
3. 删除useCallback的依赖项

export default function App() {
const [count, setCount] = useState(0);
const [count1, setCount1] = useState(0);
const handleClick = useCallback(() => {
setCount((count) => count + 1);
}, []);
return (
<div className="App">
<div>count : {count}</div>
<Button handleClick={handleClick} title="Increment Count" />
</div>
);
}

现在你的组件将开始渲染一次，再也不渲染了

如果你想有两个按钮，你必须有两个回调

export default function App() {
const [count, setCount] = useState(0);
const [count1, setCount1] = useState(0);
const handleClick = useCallback(() => {
setCount((count) => count + 1);
}, []);
const handleClick1 = useCallback(() => {
setCount1((count) => count + 1);
}, []);
return (
<div className="App">
<div>count : {count}</div>
<Button handleClick={handleClick} title="Increment Count" />
<div>count : {count}</div>
<Button handleClick={handleClick1} title="Click here" />
</div>
);
}

沙箱

Answer 2

从index.js文件中删除<StrictMode></StrictMode>