React 16.x 系列
React 16.0
Fiber 架构:引入了全新的 Fiber 协调器,解决了旧版同步渲染长时间阻塞主线程的问题,实现了异步可中断渲染、优先级调度、时间分片等特性,大大提升了大型应用的性能和响应能力。
新的错误边界(Error Boundaries):引入错误边界组件,它是一种 React 组件,能够捕获并处理其子组件树中发生的 JavaScript 错误,记录错误日志,并展示一个备用 UI,而不是让整个应用崩溃。
新的生命周期方法:引入 getDerivedStateFromProps 和 getSnapshotBeforeUpdate 生命周期方法,以适应 Fiber 架构的异步渲染特性。
React 16.3
新的上下文 API(Context API):提供了更简洁、易用的上下文 API,用于在组件树中跨层级传递数据,避免了通过 props 层层传递的繁琐,如 React.createContext、Provider 和 Consumer。
新的生命周期方法:引入 getDerivedStateFromProps 和 getSnapshotBeforeUpdate 来替代 componentWillReceiveProps、componentWillMount 和 componentWillUpdate 等不安全的生命周期方法,这些新方法能更好地适应异步渲染。
React 16.8
Hooks:引入了 Hooks,这是 React 自发布以来最大的一次更新。Hooks 允许你在不编写 class 的情况下使用 state 以及其他的 React 特性,例如 useState 用于管理组件状态,useEffect 用于处理副作用(如数据获取、订阅等),还有 useContext、useReducer 等一系列内置 Hooks。
React 17.x 系列
React 17.0
事件委托机制改变:React 17 不再将事件委托到 document 上,而是委托到渲染 React 树的根 DOM 节点上,这使得在一个页面中同时使用多个 React 版本或者 React 与其他库混合使用时更加方便。
移除 unstable_ 前缀: 之前带有 unstable_ 前缀的 API 被移除或者转正,API 更加稳定。
无重大新特性:此版本主要是为后续的更新做铺垫,重点在于兼容性和稳定性的提升,使得 React 升级更加平滑。
React 18.x 系列
React 18.0
自动批处理(Automatic Batching):在 React 18 中,所有的更新都会自动进行批处理,包括 Promise、setTimeout、原生事件处理函数等场景下的更新,这意味着多个状态更新会合并为一次渲染,减少不必要的渲染,提升性能。
新的渲染 API:引入了 createRoot 替代 ReactDOM.render,使用 createRoot 来创建根节点,开启并发模式的渲染。
并发特性:并发模式是 React 18 的核心特性之一,它允许 React 同时准备多个版本的 UI,根据用户设备性能和网络状况,以更智能的方式渲染,实现渐进式渲染、时间切片等功能,提升用户体验。
新的 Hooks:如 useId 用于生成全局唯一的 ID,useSyncExternalStore 用于订阅外部数据源,useInsertionEffect 用于在 DOM 插入之前执行副作用。