跳到主要内容

React

react 技术栈，主要由 react + （react-router、react-redux、react-saga）+ ant-design 组成。
以 hooks 方式为主。

相关技术文档：

真香定律(国内技术发展潜规则)：国外流行 -> 国内大厂尝试 -> 大厂觉得很香 -> 其它公司觉得也很香。

推荐文档：

技术栈组成简析​

创建 React 项目​

  • 优先使用 Vite 创建 React 客户端应用。
  • 优先使用 Next.js 创建 React 服务端渲染应用。
  • 可选的学习经验：从 0 自己搭建一个 React 应用。

状态管理​

  • 用 useState/useReducer 处理共享状态。
  • 选择性使用 useContext 管理某些全局状态。
  • 用 Redux管理全局状态，react-saga/redux-thunk。
  • 如果你想拥有和 Vue.js 一样的开发体验，建议看看 Mobx。

远程数据请求​

路由​

react-router

组件库​

类型检查​

代码风格​

  • ESLint
  • Prettier

富文本编辑​

时间处理​

Dayjs

PC 客户端​

移动端​

react-native

原型设计​

16 之后版本更新记录变化​

react16​

  1. React 16 采用了称为“Fiber”的全新的内部架构。官方对 Fiber 的一句话解释是“React Fiber 是对核心算法的一次重新实现
  2. render 方法能够返回数组了 //但是要使用 key
  3. ReactDOM.createPortal //新增了一个顶级 API
  4. setState 传入 null 时不会再触发更新
  5. componentDidCatch(error, info) 的生命周期函数，你可以定义组件的错误处理函数，这样组件在遇到运行时错误时会像增加了 try...catch 一样，不会将错误直接抛出了，错误被局部组件 catch 住，保证了整个应用的可用性。
  6. react 是 5.3kb（gzip：2.2kb），之前是 20.7kb（gzip：6.9kb）
  7. react-dom 是 103.7kb（gzip：32.6kb），之前是 141kb（gzip：42.9kb）
  8. react + react-dom 是 109kb（gzip：34.8kb），之前是 161.7kb（gzip：49.8kb）

react 16.3​

  1. React.createContext()，这样就创建了两个组件：
  2. 标记为不安全 componentWillMount、componentWillReceiveProps、componentWillUpdate
  3. 要被废弃的方法：
  4. componentWillMount--使用 componentDidMount 代替
  5. componentWillUpdate--使用 componentDidUpdate 代替
  6. componentWillReceiveProps--使用一个新的方法：static getDerivedStateFromProps 来代替。
  7. 全新的 Context API。（Provider Consumer）
  8. 使用了 React.createRef 取得 Ref 对象 this.myRef = React.createRef()
  9. React.Fragment 和 DocumentFragment 类似

react 16.4​

  1. Pointer Events
  2. react 异步渲染
  3. React DOM：修复在某些情况下阻止上下文传播的错误；
  4. React DOM：改进 forwardRef() 和 context consumers 在组件堆栈中的显示方式；
  5. React DOM：当 forwardRef() 渲染函数具有 propTypes 或 defaultProps 时发出警告；
  6. React Test Renderer：修复 getDerivedStateFromProps() 支持以匹配新的 React DOM 行为
  7. 使用 createPortal 将组件渲染到当前组件树之外

生命周期调整：https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

React 16.6​

  1. lazy 最让人期待的功能肯定就是 lazy 功能了，配合发布了一个 Suspense 组件，也就是最开始命名为 Placeholder 的组件，用来配合 render 方法内部的异步操作的，让我们先来看一下 lazy 的用法
  2. React.memo 方法，来实现类似 PureComponent 的功能，即浅比较 props 是否有变化，如果没有变化，就不重新渲染当前组件
  3. static getDerivedStateFromError()
  4. StrictMode 是用来提醒开发者用了即将被废弃的 API 的，像 componentWillMount 这些声明周期都会提醒，这次新加了两个 API 的提醒，ReactDOM.findDOMNode()，和老的 context api
  5. static contextType 通过声明 static contextType = context，让 ClassComponent 可以订阅最近的一个 context provider，注意这里 contextType 是固定声明，换成别的名字都不行。如果 ConsumerComp 不在 Provider 的子树中，那么会使用 defaultValue

React v16.7​

  1. React 提供了一些内置 Hook

React v16.8​

  1. hooks 可以让你在不编写类的情况下使用 state 和 React 的其他功能。你还可以构建自己的 hooks，在组件之间共享可重用的有状态逻辑。
  2. useState 函数式更新。会保存其当时状态，usememo 记录优化 类似 pureComponent。
  3. useCallback 本质上是添加了一层依赖检查。它以另一种方式解决了问题 - 我们使函数本身只在需要的时候才改变，而不是去掉对函数的依赖。
  4. useReducer
  5. useContext 接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值
  6. useLayoutEffect：useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect

React v17.0​

  1. React 17 的版本是非比寻常的，因为它没有添加任何面向开发人员的新功能。而主要侧重于升级简化 React 本身
  2. 更改事件委托

1130-Odwp2m

React 官方版本历史记录​

后续版本请移步官方版本历史记录。

最后于 更新