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依赖项参数来运行条件代码。

Answer 2

我认为您正在寻找useMemo：

在这种情况下，function SomeComponent({number}) { const expensiveValue = useMemo(() => { return doSomeExpensiveCalcolationWith(number) }, [number]) return <div>{expensiveValue}</div> }仅在数字更改时才会重新计算，否则其值在多个渲染器中将保持不变。

Answer 3

在使用cutstomEffect时，无需return进行任何操作，每次调用时，它都会将自己的newNumber创建为0，并分配给number + 1，然后销毁它。

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

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

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

        let newNumber = useSomeHook(number)


        return <div>{newNumber}{value}</div>
      }

如果value要更改而不是number，则let newNumber = useSomeHook(number)将不再运行

工作示例-https://codesandbox.io/s/agitated-rhodes-3rqkl?file=/src/App.js

如何记住自定义React钩子

3 个答案: