Skip to main content

React

生命周期

16 以后

16 之前

React Hook

为什么不能在 for 循环中使用

useState

setState

同步还是异步

事件合并

子树渲染、父树渲染

函数式组件和、类组件不同

HOC（高阶组件）

props render

性能优化

React.memo、useCallback、useMemo

shouldComponent、pureComponent

受控组件和非受控组件

fibber 机制

redux

redux 和 vuex 机制

SSR

React.lazy

思考​

React 在我们的观点里，是用来构建大型快速的 web 应用最好的方式。它很好的适应了 Facebook 和 Instagram 的业务。

React 带来的好处，有一点是，它让你思考你所创建的应用。这个文档中，我们会带着你一起用 React 来创建一个带搜索功能的数据图表。

组件库​

插件​

  • The simplest way to add authentication to your React app. Handles everything for you. Users, login forms, redirects, sharing state between components. Everything

第三方​

layout​

项目​

  • CRA：适合 SPA
  • Next.js 、Gatsby：适合静态站点
  • umiijs 阿里推的，只有国人用，生态会比前两者少
    • umi 太重, 同是阿里的 ice 明显轻很多, 该有的都有

状态管理​

  • Redux：redux.js.org/
  • Mobx：github.com/mobxjs/mobx
  • Zusand：
  • Jotai：https://jotai.org/
    • jotai 很好，但有个问题（也可能不是），就是你用一个 atom ，比如 [a, setA] = useAtom(aAtom)，你写 100 个组件里面的 a 名字就都不一样，但是用的 aAtom 是一个，这样在重构的时候很容易发生疏漏。当然回到我之前说也可能不是问题的问题那句话，可能这就是分布式应有的风格，所以我也无法过多评论。
  • XState：
  • Recoil：https://recoiljs.org/
  • reselect
  • redux-saga
  • valtio
  • reactivue
  • easy-peasy
  • https://github.com/dai-shi/use-context-selector
  • resso
  • redux-alita
  • convex

状态管理库的变化，大致可分为 3 个阶段

  1. 一开始由 Flux 架构的开源实现流行起来的 Redux ，令人烦躁的点在于模板代码太多，后续的 RTK （ Redux Tool Kit ）只能说是提供了一些类似语法糖 API 糖一样的做法来尽量减少模板代码，治标不治本。

  2. 为了改进或者替代 Redux 的产品 mobx valtio(proxy state) zustand 等等，排名不分先后

  3. Recoil/Jotai(Atom state) 主张状态从底往上组合，区别于 Redux 等工具的中心化然后再通过 reducer 自顶往下的做法； react-query 提出不应该是 global state ，应该是 server state + client state ，它负责解决 server state ，剩下的 client state 已经少得可怜，可自行选用工具解决（recoil 推荐）

数据请求​

React Query 最初是为使用 REST API 而设计的，但是现在它也支持了 GraphQL。然而如果你正在为你的 React 项目寻找专门的 GraphQL 库，我还是推荐你去看看 Apollo Client（当前最流行的）、urql（轻量级）或 Relay（Facebook 维护）。

如果你已经在使用 Redux，并且想要在 Redux 中添加集成状态管理的数据请求功能，建议你看看 RTK Query，它将数据请求的功能更巧妙的集成到 Redux 中。

建议：

  • React Query（REST API、GraphQL API 都有）
  • Apollo Client（只有 GraphQL API）
  • 可选的学习经验：了解 React Query 的工作原理

链接：

阅读：

  • 《React Query 的工作原理》
  • 《本地和远程数据的 React 状态的一切》

可视化图表​

表单​

React 现在最受欢迎的表单库是 React Hook Form 。它提供了从验证（一般会集成 yup 和 zod）到提交到表单状态管理所需的一切。之前流行的另一种方式是 Formik。两者都是不错的解决方案。这个领域的另一个选择是 React Final Form 。毕竟，如果你已经在使用 React UI 组件库了，你还可以查看他们的内置表单解决方案。

建议：

  • React Hook Form
    • 集成 yup 或 zod 进行表单验证
    • 如果已经在使用组件库了，看看内置的表单能不能满足需求

链接：

阅读：

《React 开源表单组件最佳实践，原理解析，设计分析》

表格​

类型检查​

  • PropTypes
  • typescript

身份认证​

在 React 应用程序中，你可能希望引入带有注册、登录和退出等功能的身份验证。通常还需要一些其他功能，例如密码重置和密码更改功能。这些能力远远超出了 React 的范畴，我们通常会把它们交给服务端去管理。

最好的学习经验是自己实现一个带有身份验证的服务端应用(例如 GraphQL 后端)。然而，由于身份验证有很多安全风险，而且并不是所有人都了解其中的细节，我建议使用现有的众多身份验证解决方案中的一种：

阅读：

《使用 React Router 进行身份验证》

富文本​

时间处理​

  • date-fns：github.com/date-fns/da…
  • Day.js：github.com/iamkun/dayj…
  • Luxon：github.com/moment/luxo…

客户端​

  • Electron 是现在跨平台桌面应用程序的首选框架。但是，也存在一些替代方案：
  • Tauri： (当前最新的) github.com/tauri-apps/…
  • NW.js：nwjs.io/
  • Neutralino.js：github.com/neutralinoj…

AR/VR​

  • react-three-fiber： (最流行的 3D 库，其中也有 VR 实现)github.com/pmndrs/reac…
  • `react-360：facebook.github.io/react-360/
  • aframe-react：github.com/supermedium…

动画​

参考​