reactjs - 在 React 中处理 useEffect 依赖数组对象的最佳实践

官方测试文档说他们建议我们在 useEffect 外解析对象，以避免不必要的重新渲染。然而，如果对象中有大量属性，解析属性是不现实的。

在 React 中处理具有许多属性的对象 props 的最佳方法是什么，以避免不必要的重新渲染？

例如，

interface Props {
  obj: {
    property1: number;
    property2:{ val1: number };
    ...
    property100: number;
  };
}

// const { ... } = obj; // <- its not realistic to parse here cuz there are many properties 

const Component = ({ obj }: Props) {
  useEffect(() => {
    someFunc(obj) // someFunc takes obj as an argument
  }, [obj]) // <-  this causes unnecessary re-rendering
}

答案＃1

根据官方测试文档，他们说只读取对象中必要的信息。

所以，如果重新渲染只依赖于少数几个属性，你可以解构对象并获取你想要的属性。

或者，如果你知道想要用来重新渲染组件的属性，你可以使用循环构建一个它们的数组，并将该数组用作依赖数组。

const Component = ({ obj }: Props) {
  let deps = ['property1', 'property2', 'property52', 'property100'];
  deps = deps.map((key) => obj[key]);

  useEffect(() => {
    someFunc(obj)
  }, deps)
}