javascript - 我可以在 useMemo 中安全导航吗

Question

我可以在 useMemo 的第二个参数中使用 && 风格的安全导航或 lodash get 吗:

useMemo(() => {
  return {
    ...
  }
}, [state && state.data])  // or with lodash: get(state, 'data')

Answer 1

是的，但并非没有警告。

React Hook useMemo has a complex expression in the dependency array. Extract it to a separate variable so it can be statically checked. (react-hooks/exhaustive-deps)eslint

export default function App() {
  const [state, setState] = useState({ data: 'foobar' });

  const memoizedState = useMemo(() => {
    return state.data + state.data;
  }, [state && state.data]);

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>{memoizedState}</h2>
    </div>
  );
}

更好的解决方案是将其分解为建议的单个变量，或者使用整个状态值并在内部处理它。请记住，引用突变的表面积越小，您内存的值就越稳定。

如果您确定这样的状态值将始终具有该形状，那么我认为您可以安全地使用state.data作为依赖项。

我通常更喜欢不在react useState钩子(Hook)中使用复杂的对象(你当然可以)，并将对象属性分解为它们自己的状态钩子(Hook)。这允许您更新状态的“部分”，而无需改变对其余部分的引用。这在像您这样的情况下尤其有利，您可能不确定 state.a.b.c.data 是完整且有效的已定义对象引用。或者其他一些钩子(Hook)仅依赖于组件状态的一部分。