渐进式源码解析React更新流程驱动

React更新流程驱动 React 驱动更新 2023-05-16 11:05:39 264人浏览安东尼

摘要

目录正文一、React.createElement和ReactElement元素二、双缓存技术三、React初始化的执行函数正文前面两篇文章介绍了fiber架构和workLoop

正文

前面两篇文章介绍了fiber架构和workLoop如何调度。但是缺了一块非常重要的地方，那就是开发者写的代码是如何对接到上面流程的？

在日常开发中，我们只关心了如何写组件，但是写完的组件是如何被渲染到页面当中？又是如何驱动更新流程？如果不知道这块内容，其实大家还是云里雾里的停留在概念层面。

所以这篇文章主要是从开发者角度阐述开发代码->编译->触发更新流程的介绍。

这里的更新流程指schedule（调度）->reconciler（协调）->commit (渲染)

老规矩还是先制定5个小目标：

react组件编译成什么了？
reactElement元素是什么？
什么是双缓存技术？
react.createRoot().render()做了什么事情？
还有哪些更新方式对接到目前的更新流程当中？

ok,我们一一解答：

一、react.createElement和ReactElement元素

首先我们书写的函数式组件、类组件、jsx等代码全部会被babel-react编译成react.createElement()的调用或者jsx()调用（取决于react版本）。

举个栗子：

<div>
    <ul>
    <li key='1'>1</li>
    <li key='2'>2</li>
    <li key='3'>3</li>
    </ul>
</div>

转换成

React.createElement(
	'div',
	null,
	React.createElement(
		'ul',
		null,
		React.createElement(
                'li',
                {
                  key: '1'
                },
                '1'
		),
		React.createElement(
                'li',
                {
                 key: '2'
                },
                '2'
		),
		React.createElement(
                'li',
                {
                        key: '3'
                },
                '3'
		)
	)
);

接下来我们需要知道React.createElement内部到底做了什么？源码位置

内部的实现其实很简单，就是处理传入的type/config/children等参数,再返回一个新的对象。

从config中分离出特殊属性 key 和 ref
将普通属性以及children添加到props中
最后返回一个对象，这个对象我们称之为ReactElement元素

ReactElement数据结构如下：

  const element = {
    $$typeof: REACT_ELEMENT_TYPE,
    type,
    key,
    ref,
    props,
  };

'$$typeof':ReactElement的标识
'type':可能是'div' 'span'这样的字符串标签，也可以是个函数(函数式组件)、类(类组件)
'key/ref/props': ReactElement的属性

所以上述栗子的调用结果是下面的树形结构：

{
    type: 'div',
    key: null,
    ref: null,
    props: {
        children: {
                    type: 'ul',
                    key: null,
                    ref: null,
                    props: {
                        children: [
                                    {
                                        type: 'li',
                                        key: null,
                                        ref: null,
                                        props: {
                                            children: '1'
                                        }
                                    },
                                    {
                                        type: 'li',
                                        key: null,
                                        ref: null,
                                        props: {
                                                children: '2'
                                        }
                                    },
                                    {
                                        type: 'li',
                                        key: null,
                                        ref: null,
                                        props: {
                                               children: '3'
                                        }
                                    }
                                ]
                    }
        }
    }
}

到这里就已经完成第一个和第二个小目标。

不过在这里要多提一下，上述的树形结构，在react15版本及以前就可以直接拿来diff以及生成页面，不过正如第一篇文章所说，这样会遇到很大的问题（任务过重js执行时间久，影响渲染）。

所以16之后做的事情，就是依据上述的树形结构进行重构，重构出来的fiber数据结构用于满足异步渲染之需。

二、双缓存技术

上篇文章中已经介绍了fiber节点的数据结构，这里我们再介绍下fiberRoot以及rootFiber。 fiberRoot源码位置

FiberRoot数据结构：

class FiberRootnode {
  current: FiberNode;
  container: any | null;
  finishedWork: FiberNode | null;
  pendingLanes: Lanes;
  finishedLane: Lane;
  pendingPassiveEffects: PendingPassiveEffects;
  constructor(container: any | null, hostRootFiber: FiberNode) {
    this.current = hostRootFiber;
    this.container = container;
    hostRootFiber.stateNode = this;
    this.finishedWork = null;
    this.pendingLanes = NoLanes;
    this.finishedLane = NoLane;
    this.pendingPassiveEffects = {
      unmount: [],
      update: []
    };
  }
}

其中很多属性我们暂时无视，后续涉及到的时候会详细讲解，这里重点关注节点的关系。 rootFiber的数据结构和普通的FiberNode节点区别不大，这里不再赘述~

整个React应用有且只有一个fiberRoot

整个应用中同时存在两棵rootFiber树

当前页面对应的称为currentFiber,另外一颗在内存中构建的称为workInProgressFiber，它们通过alternate属性连接。

fiberRoot中的current指针指向了currentFiber树。

当整个应用更新完成，fiberRoot会修改current指针指向内存中构建好的workInProgressFiber。

图形描述如下：

以上我们称之为双缓存技术，当然这个技术不光用在react中，其他很多地方都有涉及，大家感兴趣的话自行Google。

三、React初始化的执行函数

在mount阶段的时候，应用是需要一个执行函数的，而这个函数就是(源码位置)

    react.createRoot(root).render(<App/>)

root: 模版文件中的id为root的div
<App>: 整个应用的根组件

源码简化后的代码如下：

    const createRoot = (container: Container) => {
            const root = createContainer(container);
            return {
                render(element: ReactElementType) {
                        return updateContainer(element, root);
                }
            };
    };

createRoot会返回一个对象，其中包含了render函数，我们具体看看createContainer做了哪些事情。

const createContainer = (container: Container) => {
    // 创建rootFiber
    const hostRootFiber = new FiberNode(HostRoot, {}, null);
    // 创建fiberRoot
    const root = new FiberRootNode(container, hostRootFiber);
    hostRootFiber.updateQueue = createUpdateQueue();
    return root;
};

react.createRoot()在内部会去创建整个应用唯一的fiberRoot和rootFiber，并进行关联。(如上述图形结构)

render内部执行的是updateContainer(),我们查看下内部实现：

const updateContainer = (
	element: ReactElementType,
	root: FiberRootNode
) => {
	// mount时
	const hostRootFiber = root.current;
	// 添加update任务
	const lane = requestUpdateLane();
	const update = createUpdate<ReactElementType | null>(element, lane);
	enqueueUpdate(
		hostRootFiber?.updateQueue as UpdateQueue<ReactElementType | null>,
		update
	);
	scheduleUpdateOnFiber(hostRootFiber, lane);
	return element;
};

其中有很多地方我们此时无须关心，但是我们看到内部调用了scheduleUpdateOnFiber，而这个就是更新流程(schedule（调度）->reconciler（协调）->commit (渲染))的入口。

而这个入口不仅仅在初始化执行函数中render调用会唤起，还有其他的方式：