跳到主要内容

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：github.com/pmndrs/zust…
  • Jotai：https://jotai.org/
    • jotai 很好，但有个问题（也可能不是），就是你用一个 atom ，比如 [a, setA] = useAtom(aAtom)，你写 100 个组件里面的 a 名字就都不一样，但是用的 aAtom 是一个，这样在重构的时候很容易发生疏漏。当然回到我之前说也可能不是问题的问题那句话，可能这就是分布式应有的风格，所以我也无法过多评论。
  • XState：github.com/statelyai/x…
  • Recoil：github.com/facebookexp…
  • 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…

动画​

参考​