Reactjs 如何记忆自定义反应挂钩 const useSomeHook=（{number}）=>{ const[newNumber，setNewNumber]=useState（0） useffect（（）=>{ setNewNumber（数字+1） }，[编号]） } 常量SomeComponent=（{number，value，…restProps}）=>{ useSomeHook（{number}） 返回{number} }

假设我有这个案子。每次在

SomeComponent

中出现新道具时，它都会调用我的

useSomeHook

hook，但我想阻止它。我只想在

号码

更改时调用它（

记忆

它）。在其他情况下，不要触摸它。但我还没有找到解决这个案子的办法。你能帮我解决这个问题吗？

你不能阻止调用hook，这将导致不变冲突错误。每个组件中的每个钩子都应该在每个渲染上执行。只有当值发生变化时，您才应该依赖于

useffect

dependencies参数来运行条件代码。

我想您正在寻找：

函数SomeComponent（{number}）{
const expensiveValue=使用备忘录（（）=>{
返回DoSomeExpensiveCalCollationWith（编号）
}，[编号]）
返回{expensiveValue}
}

---

在这种情况下，

expensiveValue

将仅在数字更改时重新计算，否则，它的值将在多个渲染中保持不变。

只有当依赖项

编号

发生变化时，才会调用

useSomeHook

中的

useffect

钩子。因此，我不知道在这种情况下，记忆会给你带来什么。在这种情况下，它是可以的，但请想象我在这个钩子中有一些硬逻辑，每次我用redux form输入一些东西时，它都会被调用，效果非常糟糕，

useffect

的第二个参数中传递的内容将触发后续调用作为第一个参数传入的回调。为了满足你的要求，你可以做两件事：1。添加深入的相等性检查作为第二个参数（这需要一些工作），和/或2。在回调中添加一个条件；例如：

if（obj.a！==obj.b）callback（）

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

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

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

  useSomeHook({number})


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

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