typescript 在React中处理useEffect deps数组对象的最佳实践

5lhxktic  于 2023-02-05  发布在  TypeScript
关注(0)|答案(1)|浏览(159)

官方beta文档建议我们在useEffect之外解析对象,以避免不必要的重新渲染,但是,如果一个对象中有大量属性,解析属性是不现实的。
在React中处理具有许多属性的对象的 prop 以避免不必要的重新渲染的最佳方法是什么?
例如,

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
}
ojsjcaue

ojsjcaue1#

根据官方beta文档,他们说只从对象中读取必要的信息。
因此,如果重新呈现仅依赖于少数属性,则可以析构对象并获得所需的属性。
另外,如果您知道要用于重新呈现组件的属性,则可以使用循环构造一个属性数组,并将该数组用作依赖项数组。

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

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

相关问题