史上最贴心React渲染器原理辅导

史上最贴心React渲染器原理辅导

技术杂谈小彩虹2021-07-18 4:31:4350A+A-

rxLirp

这个故事要从几年前,Reactreact-dom 离婚说起,先插一嘴,第三者不是张三(纯博人眼球)。

React 刚流行起来时,并没有 react-dom ,突然有一天,React 发达了,想学时间管理,然后阅人无数,就这样 React 成了王,而 react-dom 与之分开沦为了妾,React 可谓妻妾成群,我们随便举几个例子: React-NativeRemax 等。为啥 React 如此无情?我摊牌了,编不下去了,就说好好写文章他不香吗?

正儿八经的,我们开始!

相信大家对于跨端这个概念不陌生,什么是跨端?就是让你感觉写一套代码可以做几个人的事,比如,我用 React 可以写Web 、可以写小程序 、可以写原生应用,这样能极大降低成本,但其实,你的工作交给 React 去做了,我们可以对应一下:

  • web:react-dom
  • 小程序:remax
  • ios、android:react-native

这样一捋是不是清晰了?我们再看一张图

image-20200509180159813

到这里,你是否明白了当初 Reactreact-dom 分包的用意了?React 这个包本身代码量很少,他只做了规范和api定义,平台相关内容放在了与宿主相关的包,不同环境有对应的包面对,最终展现给用户的是单单用 React 就把很多事儿做了。

那按这样说,我们是不是也可以定义自己的React渲染器?当然可以,不然跟着这篇文章走,学完就会,会了还想学。

创建React项目

首先使用React脚手架创建一个demo项目

安装脚手架

npm i -g create-react-app

创建项目

create-react-app react-custom-renderer

运行项目

yarn start

现在我们可以在vs code中进行编码了

修改 App.js 文件源码

import React from "react";
import "./App.css";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  handleClick = () => {
    this.setState(({ count }) => ({ count: count + 1 }));
  };

  render() {
    const { handleClick } = this;
    const { count } = this.state;
    return (
      <div className="App"> <header className="App-header" onClick={handleClick}> <span>{count}</span> </header> </div>
    );
  }
}

export default App;

打开浏览器,可以看到页面,我们点击页面试试,数字会逐渐增加。

image-20200509181231669

到这里,简单的React项目创建成功,接下来我们准备自定义渲染器。

初识渲染器

打开src/index.js,不出意外,一应该看到了这行代码:

import ReactDOM from 'react-dom';

还有这行

ReactDOM.render(
  <App />, document.getElementById('root') ); 

现在我们要使用自己的代码替换掉 react-dom,创建 MyRenderer.js,然后修改 index.js中的内容

import MyRenderer from './MyRenderer'

MyRenderer.render(
  <App />, document.getElementById('root') ) 

然后打开浏览器,会看到报错信息,我们按照报错信息提示,完善 MyRenderer.js 的内容。首先文件中最基本的结构如下

import ReactReconciler from "react-reconciler";

const rootHostContext = {};
const childHostContext = {};

const hostConfig = {
  getRootHostContext: () => {
    return rootHostContext;
  },
  getChildHostContext: () => {
    return childHostContext;
  },
};

const ReactReconcilerInst = ReactReconciler(hostConfig);
export default {
  render: (reactElement, domElement, callback) => {
    if (!domElement._rootContainer) {
      domElement._rootContainer = ReactReconcilerInst.createContainer(
        domElement,
        false
      );
    }
    return ReactReconcilerInst.updateContainer(
      reactElement,
      domElement._rootContainer,
      null,
      callback
    );
  },
};

react-reconciler 源码我们曾讲解过,我们可以把它当做一个调度器,负责创建与更新,而后在 scheduler中进行调度,我们导出一个对象,其中有一个方法 render ,参数与 react-dom的render方法一致,这里需要判断一下,如果传入的dom元素是根容器,则为创建操作,否则是更新的操作,创建操作调用 react-reconciler 实例的 createContainer 方法,更新操作调用 react-reconciler实例的 updateContainer 方法。我们再来看到更为重要的概念——hostConfig

Host宿主相关配置

Host——东家、宿主,见名知意,HostConfig是对于宿主相关的配置,这里所说的宿主就是运行环境,是web、小程序、还是原生APP。有了这个配置,react-reconciler在进行调度后,便能根据宿主环境,促成UI界面更新。

我们继续来到浏览器,跟随报错信息,完善我们hostConfig的内容,我将其中核心的方法列举如下,供大家参考学习。

  • getRootHostContext
  • getChildHostContext
  • shouldSetTextContent
  • prepareForCommit
  • resetAfterCommit
  • createTextInstance
  • createInstance
  • appendInitialChild
  • appendChild
  • finalizeInitialChildren
  • appendChildToContainer
  • prepareUpdate
  • commitUpdate
  • commitTextUpdate
  • removeChild

看到这些方法不禁联想到DOM相关操作方法,都是语义化命名,这里不赘述各个方法的实际含义,一下我们修改相关方法,重新让项目跑起来,以助于大家理解渲染器的工作原理。

定义hostConfig

以上方法中,我们重点理解一下 createInstancecommitUpdate, 其他方法我在最后通过代码片段展示出来,供大家参考。(注:相关实现可能与实际使用有较大的差别,仅供借鉴学习)

createInstance

方法参数

  • type
  • newProps
  • rootContainerInstance
  • _currentHostContext
  • workInProgress

返回值

根据传入type,创建dom元素,并处理props等,最终返回这个dom元素。本例我们只考虑一下几个props

  • children
  • onClick
  • className
  • style
  • 其他

代码实现

const hostConfig = {
  createInstance: (
    type,
    newProps,
    rootContainerInstance,
    _currentHostContext,
    workInProgress
  ) => {
    const domElement = document.createElement(type);
    Object.keys(newProps).forEach((propName) => {
      const propValue = newProps[propName];
      if (propName === "children") {
        if (typeof propValue === "string" || typeof propValue === "number") {
          domElement.textContent = propValue;
        }
      } else if (propName === "onClick") {
        domElement.addEventListener("click", propValue);
      } else if (propName === "className") {
        domElement.setAttribute("class", propValue);
      } else if (propName === "style") {
        const propValue = newProps[propName];
        const propValueKeys = Object.keys(propValue)
        const propValueStr = propValueKeys.map(k => `${k}: ${propValue[k]}`).join(';')
        domElement.setAttribute(propName, propValueStr);
      } else {
        const propValue = newProps[propName];
        domElement.setAttribute(propName, propValue);
      }
    });
    return domElement;
  },
}

是不是很眼熟?谁说原生JavaScript不重要,我们可以看到在框架的内部,还是需要使用原生JavaScript去操作DOM,相关操作我们就不深入了。

commitUpdate

更新来自于哪里?很容易想到 setState ,当然还有 forceUpdate ,比如老生常谈的问题:兄嘚,setState 是同步还是异步啊?啥时候同步啊?这就涉及到 fiber的内容了,其实调度是通过计算的 expirationTime来确定的,将一定间隔内收到的更新请求入队并贴上相同时间,想想,如果其他条件都一样的情况下,那这几次更新都会等到同一个时间被执行,看似异步,实则将优先权让给了更需要的任务。

小小拓展了一下,我们回来,更新来自于 setStateforceUpdate,更新在经过系列调度之后,最终会提交更新,这个操作就是在 commitUpdate方法完成。

方法参数

  • domElement
  • updatePayload
  • type
  • oldProps
  • newProps

这里的操作其实与上面介绍的createInstance有类似之处,不同点在于,上面的方法需要创建实例,而此处更新操作是将已经创建好的实例进行更新,比如内容的更新,属性的更新等。

代码实现

const hostConfig = {
  commitUpdate(domElement, updatePayload, type, oldProps, newProps) {
    Object.keys(newProps).forEach((propName) => {
      const propValue = newProps[propName];
      if (propName === "children") {
        if (typeof propValue === "string" || typeof propValue === "number") {
          domElement.textContent = propValue;
        }
        // TODO 还要考虑数组的情况
      } else if (propName === "style") {
        const propValue = newProps[propName];
        const propValueKeys = Object.keys(propValue)
        const propValueStr = propValueKeys.map(k => `${k}: ${propValue[k]}`).join(';')
        domElement.setAttribute(propName, propValueStr);
      } else {
        const propValue = newProps[propName];
        domElement.setAttribute(propName, propValue);
      }
    });
  },
}

两个主要的方法介绍完了,你现在隐隐约约感受到了 react 跨平台的魅力了吗?我们可以想象一下,假设 MyRenderer.render 方法传入的第二个参数不是DOM对象,而是其他平台的 GUI 对象,那是不是在 createInstancecommitUpdate 方法中使用对应的GUI创建与更新api就可以了呢?没错!

完整配置

const hostConfig = {
  getRootHostContext: () => {
    return rootHostContext;
  },
  getChildHostContext: () => {
    return childHostContext;
  },
  shouldSetTextContent: (type, props) => {
    return (
      typeof props.children === "string" || typeof props.children === "number"
    );
  },
  prepareForCommit: () => {},
  resetAfterCommit: () => {},
  createTextInstance: (text) => {
    return document.createTextNode(text);
  },
  createInstance: (
    type,
    newProps,
    rootContainerInstance,
    _currentHostContext,
    workInProgress
  ) => {
    const domElement = document.createElement(type);
    Object.keys(newProps).forEach((propName) => {
      const propValue = newProps[propName];
      if (propName === "children") {
        if (typeof propValue === "string" || typeof propValue === "number") {
          domElement.textContent = propValue;
        }
      } else if (propName === "onClick") {
        domElement.addEventListener("click", propValue);
      } else if (propName === "className") {
        domElement.setAttribute("class", propValue);
      } else if (propName === "style") {
        const propValue = newProps[propName];
        const propValueKeys = Object.keys(propValue)
        const propValueStr = propValueKeys.map(k => `${k}: ${propValue[k]}`).join(';')
        domElement.setAttribute(propName, propValueStr);
      } else {
        const propValue = newProps[propName];
        domElement.setAttribute(propName, propValue);
      }
    });
    return domElement;
  },
  appendInitialChild: (parent, child) => {
    parent.appendChild(child);
  },
  appendChild(parent, child) {
    parent.appendChild(child);
  },
  finalizeInitialChildren: (domElement, type, props) => {},
  supportsMutation: true,
  appendChildToContainer: (parent, child) => {
    parent.appendChild(child);
  },
  prepareUpdate(domElement, oldProps, newProps) {
    return true;
  },
  commitUpdate(domElement, updatePayload, type, oldProps, newProps) {
    Object.keys(newProps).forEach((propName) => {
      const propValue = newProps[propName];
      if (propName === "children") {
        if (typeof propValue === "string" || typeof propValue === "number") {
          domElement.textContent = propValue;
        }
        // TODO 还要考虑数组的情况
      } else if (propName === "style") {
        const propValue = newProps[propName];
        const propValueKeys = Object.keys(propValue)
        const propValueStr = propValueKeys.map(k => `${k}: ${propValue[k]}`).join(';')
        domElement.setAttribute(propName, propValueStr);
      } else {
        const propValue = newProps[propName];
        domElement.setAttribute(propName, propValue);
      }
    });
  },
  commitTextUpdate(textInstance, oldText, newText) {
    textInstance.text = newText;
  },
  removeChild(parentInstance, child) {
    parentInstance.removeChild(child);
  },
};

来到浏览器,正常工作了,点击页面,计数增加。

以上就是本节的所有内容了,看罢你都明白了吗?如果想看其他框架原理,欢迎留言评论

  • 微信公众号 《JavaScript全栈
  • 掘金 《合一大师
  • Bilibili 《合一大师
  • 微信:zxhy-heart

我是合一,英雄再会。

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们