Question

我正在尝试侦听上下文值的单个属性上的更改。如果我使用的React上下文具有一个具有十几个属性的对象值：

{
  prop1: "value1",
  prop2: "value2",
  prop3: "value3",
  ...
  prop12: "value12"
}

每个具有useContext(MyContext)的组件都将重新呈现。

function MyComponent() {
   const c = useContext(MyContext); // The full object

   const {prop1} = c; // This component only cares about prop1

   return <div>{prop1}</div>;
}

由于该组件仅关心上下文中的一个属性，因此如果prop1保持不变，我不希望它重新呈现。我正在尝试创建一个钩子，该钩子将基于这样的选择器重新渲染：

useContextProp(MyContext, c => c.prop1); // only re-renders when prop1 changes

但是我找不到订阅更改的方法。有人知道把戏吗？

更新：

我当前的解决方案是在组件中使用useMemo，以避免重新呈现复杂的布局：

function MyComponent() {
  const {prop1} = useContext(MyContext);

  // ... other possibly complex calculations

  return useMemo(() => <div>{prop1}</div>, [prop1]); // Assume complex layout
}

但是，这对组件的其他部分（可能会进行复杂的计算，组装数据等）的工作无济于事。细节并不重要，但是如果有一个侦听一个值的钩子会很棒。这样我就不必到处写useMemo。

Answer 1

您可以使用React.memo包装组件，并将第二个参数与下一个参数进行比较的函数传递给第二个参数。

function MyComponent(props) {
  /* render using props */
}
function areEqual(prevProps, nextProps) {
  /*
  return true if passing nextProps to render would return
  the same result as passing prevProps to render,
  otherwise return false
  */
}
export default React.memo(MyComponent, areEqual);

请参见文档https://reactjs.org/docs/react-api.html#reactmemo

如果您使用React-Redux，它们的钩子已经为此进行了优化。

Answer 2

使用useCallback挂钩获取备注回调。 https://reactjs.org/docs/hooks-reference.html#usecallback

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

是否可以在上下文的单个属性上使用钩子？

2 个答案: