React-从源码分析React Fiber工作原理

最新推荐文章于 2024-09-23 22:02:50 发布

柒青衿

最新推荐文章于 2024-09-23 22:02:50 发布

阅读量1.2w

点赞数 11

分类专栏： React 源码

本文链接：https://blog.csdn.net/qiqingjin/article/details/80118669

版权

本文探讨了React 16引入的Fiber技术，解释了为何需要从同步渲染转向异步渲染，详细介绍了Fiber的工作原理，包括任务分片、优先级管理和生命周期变化。并提供了一个用于实践Fiber异步渲染的demo仓库。

摘要由CSDN通过智能技术生成

本文的demo仓库在https://github.com/qiqingjin/blog/tree/master/React_Redux，喜欢请star哟~

为什么要重写React

React16 以前

React16 以前，对virtural dom的更新和渲染是同步的。就是当一次更新或者一次加载开始以后，diff virtual dom并且渲染的过程是一口气完成的。如果组件层级比较深，相应的堆栈也会很深，长时间占用浏览器主线程，一些类似用户输入、鼠标滚动等操作得不到响应。借Lin的两张图，视频 A Cartoon Intro to Fiber - React Conf 2017。

这里写图片描述

React16 Fiber Reconciler

React16 用了分片的方式解决上面的问题。
就是把一个任务分成很多小片，当分配给这个小片的时间用尽的时候，就检查任务列表中有没有新的、优先级更高的任务，有就做这个新任务，没有就继续做原来的任务。这种方式被叫做异步渲染(Async Rendering)。

这里写图片描述

Fiber 对开发者有什么影响

目前看有以下：

componentWillMount componentWillReceiveProps componentWillUpdate 几个生命周期方法不再安全，由于任务执行过程可以被打断，这几个生命周期可能会执行多次，如果它们包含副作用（比如AJax），会有意想不到的bug。React团队提供了替换的生命周期方法。建议如果使用以上方法，尽量用纯函数，避免以后采坑。
需要关注下react为任务片设置的优先级，特别是页面用动画的情况

如何试用Fiber异步渲染

默认情况下，异步渲染没有打开，如果你想试用，可以：

import React from 'react';
import ReactDOM from 'react-dom';
import App from 'components/App';

const AsyncMode = React.unstable_AsyncMode;
const createApp = (store) => (
      <AsyncMode>
        <App store={store} />
      </AsyncMode>
);

export default createApp;