如何编写性能更优的函数式 React 组件

你在说什么？

你说什么？

证明给我看

你在说什么？

在使用 React Hooks 编写代码时，我发现很多函数式组件的属性都没有被缓存。在我看来，这几乎总是不可取的。

由于 React 的工作方式，这通常不是一个好的做法。任何未被缓存的内容都会在每次重新渲染时被重新定义。因此，我的原则是将函数式组件中定义的所有内容都缓存起来，并将其他所有内容移出组件，放到全局作用域中。

这不仅能提升你所定义对象的性能，而且如果不这样做，还会产生叠加效应。如果你忘记缓存的对象被另一个属性所依赖（即在 useMemo 或 useCallback 的依赖数组中），那么每次渲染时，该属性也会被重新定义。

全局定义的变量在重新渲染时不会被重新定义，因此可以使用它们而不用担心导致重新定义。

你说什么？

以下是我个人项目中一个很好的示例（请忽略已定义/未定义的导入项）：

const { Title } = Typography;

const UserScreen = () => {
  const db = firebaseApp.firestore();
  const { user, logout } = useContext(AuthContext);

  const onSubmit =
    async (newUserProperties) => {
      return await db
        .collection(DB.COLLECTIONS.USERS)
        .doc(user.uid)
        .update(newUserProperties);
    }

  return (...);
};

在这种情况下，每次firebaseApp.firestore()渲染都会调用该操作。这可不好玩。即使我们把这个函数放在 useCallback 中，并在依赖数组中指定数据库，每次渲染时数据库也会被重新定义。所以，就算你几乎做对了，也得不到任何奖励！onSubmit

证明给我看

这里有一个 CodeSandbox 示例来说明我的观点：https://codesandbox.io/s/relaxed-pasteur-7spqq?file =/src/App.js

照片由Max Frajer拍摄，来自Unsplash