如何记忆自定义 React 钩子答案

【问题标题】：How to memoize custom React hook如何记忆自定义 React 钩子
【发布时间】：2020-08-09 19:20:45
【问题描述】：

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 它）。在其他情况下，请勿触摸它。但我还没有找到任何解决这个案例的方法。你能帮我解决这个问题吗？

【问题讨论】：

useSomeHook 中的 useEffect 钩子只有在依赖关系 number 发生变化时才会被调用。
所以在这种情况下，我看不到 memoization 能给你带来什么。
在这种情况下它会没问题，但想象一下我在这个钩子中有一些硬逻辑，并且每次都会调用它，例如我用 redux form 输入一些东西，它的工作原理很糟糕
您在useEffect 的第二个参数中传递的内容将触发您作为第一个参数传递的回调的后续调用。为了解决您的问题，您可以做两件事：1. 添加深入的相等检查作为第二个参数（这需要一些工作），和/或 2. 在回调中添加条件；例如：if (obj.a !== obj.b) callback()

标签： reactjs react-hooks memoization

【解决方案1】：

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

【讨论】：

【解决方案2】：

我想你在找useMemo:

function SomeComponent({number}) {
    const expensiveValue = useMemo(() => {
         return doSomeExpensiveCalcolationWith(number)
    }, [number])
    return <div>{expensiveValue}</div>
}

在这种情况下，expensiveValue 将仅在数字更改时重新计算，否则其值将在多次渲染中保持不变。

【讨论】：