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

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

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

---

更新：

我当前的解决方案是组件中的

usemo

，以避免重新渲染复杂布局：

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

  // ... other possibly complex calculations

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

函数MyComponent（）{
const{prop1}=useContext（MyContext）；
//…其他可能复杂的计算
返回useMemo（（）=>{prop1}[prop1]）；//假设布局复杂
}

---

但这对我处理组件的其他部分没有帮助，这些部分可能会有复杂的计算、装配数据等。细节并不重要，但是如果有一个钩子可以监听一个值，这样我就不必到处写

useMemo

。

您可以使用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);

见这里的文档

---

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

您可以使用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);

见这里的文档

---

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

使用useCallback钩子获得一个记忆化的回调。

---

使用useCallback钩子获取一个已记忆的回调。

---

不管怎样，您的组件都将重新渲染，但您可以通过记忆减少影响，以便重新使用生成组件的工作。@无提示，我添加了一个更新来回答您的问题。也许您应该查看react-redux UseSelector的实现，或者从父组件传递道具并记忆MyComponent？只有当记忆值更改时，才会运行所有计算等。组件将重新渲染，但您可以通过记忆减少影响，以便重新使用生成组件的工作。@SILENT，我添加了一个更新来回答您的问题。也许您应该看看react redux UseSelector的实现，或者从父组件传递道具并记忆MyComponent？仅当记忆值发生变化时，才会运行所有计算和etc。

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