Question

在这里是React的新手。在这种情况下，我在回调中引用了2个值。我只希望在第一个值更改时执行回调。因为我引用了第二个值，所以它仍然需要在dep数组中；但是，我不希望每次第二个值更改时都执行回调，因为这在我的代码中将毫无意义。

useEffect(()=> {
  // Do something with val1 and val2
}, [val1, val2]);

处理这种情况的最佳方法是什么？

我知道useReducer存在，但是我还没有学到它，所以不确定是否可以解决我的问题。

更新

我还知道，只要我的val1保持不变，我就可以在回调函数中添加一些逻辑以尽早返回，但是我只是想知道什么是最好的方法。

Answer 1

由于您提到val1和val2是状态变量，因此我建议使用useReducer。根据经验，如果您需要在原子操作中操纵多个状态变量，则可以通过useState来达到这一目的。从React documentation on useReducer

当您具有涉及多个子值的复杂状态逻辑时，
useReducer通常比useState更可取

您可以使用useReducer这样管理您的组件

  const [state, dispatch] = useReducer((state, action) => {
    if (action.type === 'changeVal1') {
      return { ...state, val1: action.val1 }
    }
    return state
  }, { val1: 'something', val2: 'anotherthing' })

  useEffect(()=> {
    const { val1, val2 } = state
    // do something with val1 and val2
  }, [state.val1]);

  // somewhere else in the component...
  dispatch({ type: 'changeVal1', val1 })

Answer 2

将数组作为useEffect传递到useEffect(callback, array)并不意味着您使数组的元素在回调的作用域中可用。这些变量已可用于useEffect中声明的回调。 array的元素仅用于控制callback是否会在重新渲染时触发。在这方面，您将实现所需的行为

useEffect(()=> {
  // val 1 and val 2 are already in scope
  // Do something with val1 and val2
}, [val1]);

以上效果仅在val1更改时执行回调

仅使用React useEffect挂钩对某些依赖项运行效果？

更新

2 个答案: