代码之家  ›  专栏  ›  技术社区  ›  UtkarshPramodGupta

使用useCallback钩子的正确方法是什么?

  •  0
  • UtkarshPramodGupta  · 技术社区  · 5 年前

    我有一个自定义输入组件,如下所示:

    import React, { useState, useCallback } from 'react'
    
    function MyCustomInput ({value: initialValue = '0'}) {
      const [value, setValue] = useState(initialValue)
    
      const handleChange = useCallback(
        value => {
         setValue(value)
        },
        [setValue]
      )
    
      return (
        <SomeInputComponent onChange={handleChange}/>
      )
    }
    

    React中useCallback的实现 doc 说:

    const memoizedCallback = useCallback(
      () => {
        doSomething(a, b);
      },
      [a, b]
    )
    

    现在根据doc的实施,正确的方法应该是:

    const handleChange = useCallback(
       value => {
         setValue(value)
       },
       [value] // And not, [setValue]
     )
    

    但这会利用 useCallback 一文不值 handleChange value 状态更新会导致不必要的重新提交我的 <SomeInputComponent> 组件。我的实现不正确吗?

    1 回复  |  直到 5 年前
        1
  •  1
  •   Ori Drori    5 年前

    value 在调用函数时作为常规参数传递。

    在这种情况下,构建函数所需的唯一依赖项是 setValue :

    const handleChange = useCallback(
      value => {
        setValue(value)
      }, [setValue]
    )
    

    setState , dispatch useReducer ),和 useRef 如果已知它们是静态的,则可以从依赖项列表中忽略它们。这个 exhaustive-deps rule 有一个功能 isDefinitelyStaticDependency(reference) 查找并“批准”此函数作为静态函数。所以你的代码应该是:

    const handleChange = useCallback(
      value => {
        setValue(value)
      }, []
    )