组件内部React.memo()与支柱函数的使用

Question

import React, { useState } from 'react'

const App = () => {
  const [count, setCount] = useState<number>(0);
  const [otherCount, setOtherCount] = useState<number>(0);

  const increment = () => {
    setCount((pre) => {
      return pre + 1
    })
  }

  const decrease = () => {
    setOtherCount((pre) => {
      return pre - 1
    })
  }
  return (
    <>
      <DecrementComponent decrease={decrease} />
      <br />
      <br />
      <IncrementComponent increment={increment} />
    </>
  )
}

const DecrementComponent = React.memo(({ decrease }: { decrease: () => void; }) => {
  console.log("DecrementComponent");
  return (
    <div>
      <button onClick={decrease}>Decrement</button>
    </div>
  )
})

const IncrementComponent = React.memo(({ increment }: { increment: () => void; }) => {
  console.log("IncrementComponent");
  return (
    <div>
      <button onClick={increment}>Increment</button>
    </div>
  )
})

export default App

**React.memo()虽然使用了React.memo()，但当我单击增量或递减函数时，呈现了两个组件。但我认为在这个场景中应该呈现出一个成分。为什么呈现两个组件？**

Answer 1

只有当道具不改变时，React.memo才能提供帮助。但是increment和decrement函数在每次渲染时都会发生变化，所以道具总是在变化。你将需要回忆录这些功能，这样它们就不会改变。

const increment = useCallback(() => {
  setCount((pre) => {
    return pre + 1
  });
}, []);

const decrement = useCallback(() => {
  setCount((pre) => {
    return pre - 1
  });
}, []);