如何记住自定义 React 钩子

Question

const useSomeHook = ({number}) => {
  const [newNumber, setNewNumber] = useState(0)

  useEffect(() => {
    setNewNumber(number + 1)
  }, [number])
}

const SomeComponent = ({number, value, ...restProps}) => {

  useSomeHook({number})


  return <div>{number}</div>
}

让我们想象一下我有这个案例。每次SomeComponent进来一些新道具时，它都会调用我的useSomeHook钩子，但我想阻止它。我只想在number更改（memoize它）时调用它。在其他情况下，请勿触摸它。但我还没有找到任何解决此案的办法。你能帮我解决这个问题吗？

Answer 1

你无法阻止调用钩子，这会导致不变量违反错误。组件中的每个钩子都应该在每次渲染时执行。useEffect仅当值更改时，您才应该依赖依赖项参数来运行条件代码。