我的 useMemo useCallback 不会减少渲染次数。

Question

function CountBtn1({ onClick, count }) {  console.log('CountBtn1 render')  return <button onClick={onClick}>{count}</button>}function CountBtn2({ onClick, count }) {  console.log('CountBtn2 render')  return <button onClick={onClick}>{count}</button>}function Counter() {  const [count1, setCount1] = React.useState(0)  // const increment1 = () => setCount1(c => c + 1)  const increment1 = React.useCallback(() => setCount1(c => c + 1), [])  const [count2, setCount2] = React.useState(0)  // const increment2 = () => setCount2(c => c + 1)  const increment2 = React.useCallback(() => setCount2(c => c + 1), [])  return (    <>      <CountBtn1 count={count1} onClick={increment1} />      <CountBtn2 count={count2} onClick={increment2} />    </>  )}当我单击 Button1` 时也会渲染日志是CountBtn1 渲染CountBtn2 渲染我的 useMemo useCallback 不会减少渲染次数。使用 useMemo 和 useCallback 的正确方法是什么？

Answer 1

用备忘录包装你的组件：

const CountBtn1 = React.memo(function CountBtn1({ onClick, count }) {

  console.log('CountBtn1 render')

  return <button onClick={onClick}>{count}</button>

})

const CountBtn2 = React.memo(function CountBtn2({ onClick, count }) {

  console.log('CountBtn2 render')

  return <button onClick={onClick}>{count}</button>

})