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

【问题标题】：Is it possible to use hooks on a single property of a context?是否可以在上下文的单个属性上使用钩子？
【发布时间】：2020-01-14 17:42:20
【问题描述】：

我正在尝试侦听上下文值的单个属性的更改。如果我正在使用一个 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了。

【问题讨论】：

无论如何，您的组件都会重新渲染，但您可以通过记忆化来减少影响，以便重复使用生成组件的工作。
@SILENT，我添加了一个更新来回答你。
也许你应该看看 react-redux useSelector 的实现
也许从父组件传递道具并记忆MyComponent？只有当记忆值发生变化时，所有计算等才会运行。

标签： javascript reactjs react-hooks

【解决方案1】：

您可以使用 React.memo 来包装您的组件，并在第二个参数中传递一个比较 prev props 和 next props 的函数。

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，他们的钩子已经为此进行了优化。

【讨论】：

【解决方案2】：

使用 useCallback 钩子来获得一个记忆回调。 https://reactjs.org/docs/hooks-reference.html#usecallback

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

【讨论】：