关于前端:源码向-14-用小白的视角构建react库

36次阅读

共计 4300 个字符，预计需要花费 11 分钟才能阅读完成。

写在前边

  • 创作本篇博客的初衷是，在浏览社区时发现了 https://pomb.us/build-your-own-react/ 这篇宝藏文章，该博主基于 react16 之后的 fiber 架构实现了一套 react 的繁难版本，十分有助于了解 react 工作原理。然而苦于只有英文版本，且偏差实践。
  • 本着晋升自我、奉献社区的理念。在此记录下学习历程，并尽本人微薄之力对重点局部（联合本人了解）进行翻译整顿。心愿对大家有所帮忙。
  • 内容比拟多，所以篇幅会较扩散，大家也能够次要看本人须要的局部。我会致力更新的！

零、筹备工作

  1. 创立我的项目（本人命名），下载文件包

    $ mkdir xxx
    $ cd xxx
    $ yarn init -y / npm init -y
    $ yarn add react react-dom

  2. 建设如下目录构造

    • src/

      • myReact/
      • index.js
      • index.html
      • main.jsx
  3. 初始化文件内容

    //index.html
    <!DOCTYPE html>
    <html lang=”en”>
    <head>
    <meta charset=”utf-8″ />
    <meta name=”viewport” content=”width=device-width, initial-scale=1″ />
    <title>React App</title>
    </head>
    <body>
    <div id=”root”></div>
    <script src=”main.jsx”></script>
    </body>
    </html>
    ​
    ​
    // main.jsx
    import React from “./React/index”;
    import React from “react”;
    import ReactDom from “react-dom”;
    const App = () => {
    return <div title=”oliver”>Hello</div>;
    };
    ReactDom.render(<App />, document.getElementById(“root”));
    ​
    // myReact/index.js
    export default {}

  4. 装置 parcel 用于打包和热更新

    $ yarn add parcel-bundler

一、createElement 的性能

功不可没的 babel

// main.jsx
const element = (
<div id=”foo”>
Hello
<span />
</div>
)

通过 babel 转译后的成果（应用 plugin-transform-react-jsx 插件，https://www.babeljs.cn/docs/babel-plugin-transform-react-jsx#both-runtimes）：

const element = React.createElement(
“div”, //type
{id: “foo”}, //config
React.createElement(“a”, null, “bar”), //…children
React.createElement(“span”)
)

  • babel 的 plugin-transform-react-jsx 做的事件很简略：应用 React.createElement 函数来从解决.jsx 文件中的 jsx 语法。
  • 这也就是为什么在.jsx 文件中必须 import React from "react" 的起因啦，否则插件会找不到 React 对象的！

配置 babel

tips：笔者原本也打算应用 plugin-transform-react-jsx 插件，然而在调试中遇到了问题。查找后才晓得最新版本的插件曾经不再是由 <h1>Hello World</h1> 到 React.createElement('h1', null, 'Hello world') 的简略转换了（具体见 https://zh-hans.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html），故退而求其次抉择了性能相似的 transform-jsx

$ touch .babelrc
$ yarn add babel@transform-jsx

// .babelrc
{
“presets”: [“es2015”],
“plugins”: [
[
“transform-jsx”,
{
“function”: “OllyReact.createElement”,
“useVariables”: true
}
]
]
}

$ parcel src/index.html

此时页面中能够看到 Hello 字样，阐明咱们配置胜利了！

入手实现 createElement

transform-jsx 插件会将参数封装在一个对象中，传入 createElement。

// myReact/index.js
export function createElement(args) {
const {elementName, attributes, children} = args;
return {
type:elementName,
props: {
…attributes,
children
}
};
}

思考到 children 中还可能蕴含根本类型如 string，number。为了简化操作咱们将这样的 children 对立应用 TEXT_ELEMENT 包裹。

// myReact/index.js
export function createElement(type, config, …children) {
return {
type,
props: {
…attributes,
children: children.map((child) =>
typeof child === “object” ? child : createTextElement(child)
),
}
};
}
function createTextElement(text) {
return {
type: “TEXT_ELEMENT”,
props: {
nodeValue: text,
children: [],
},
}
}
export default {createElement}

React 并不会像此处这样解决根本类型节点，但咱们这里这样做：因为这样能够简化咱们的代码。毕竟这是一篇以性能而非细节为主的文章。

看看成果

首先为咱们本人的库起个名字吧！

//.babelrc
{
“presets”: [“es2015”],
“plugins”: [
[
“@babel/plugin-transform-react-jsx”,
{
“runtime”: “automatic”,
“importSource”: “OllyReact”
}
]
]
}
​

引入时就应用本人写的名字吧！

// main.jsx
import OllyReact from “./myReact/index”;
import ReactDom from “react-dom”
const element = (
<div style=”background: salmon”>
<h1>Hello World</h1>
<h2 style=”text-align:right”>—Oliver</h2>
</div>
);
ReactDom.render(element, document.getElementById(“root”));

此时页面上曾经呈现了Hello，这证实咱们的 React.createElement 曾经根本实现了 React 的性能。

二、Render 性能

接下来编写 render 函数。

目前咱们只关注向 DOM 中增加内容。批改和删除性能将在后续增加。

// React/index.js
export function render(element, container) {}
export default {
//… 省略
render
};

细节实现

留神：

本大节每一步内容次要参考思路即可，具体的逻辑程序会在底部汇总。

  • 首先应用对应的元素类型创立新 DOM 节点，并把该 DOM 节点退出股 container 中

    const dom = document.createElement(element.type)
    container.appendChild(dom)

  • 而后递归地为每个 child JSX 元素执行雷同的操作

    element.props.children.forEach(child =>
    render(child, dom)
    )

  • 思考到 TEXT 节点须要非凡解决

    const dom =
    element.type == “TEXT_ELEMENT”
    ? document.createTextNode(“”)
    : document.createElement(element.type)

  • 最初将元素的 props 调配给实在 DOM 节点

    Object.keys(element.props)
    .filter(key => key !== “children”) // children 属性要除去。
    .forEach(name => {
    dom[name] = element.props[name];
    });

汇总：

export function render(element, container) {
const dom = element.type === “TEXT_ELEMENT”
? document.createTextNode(“”)
: document.createElement(element.type);
Object.keys(element.props)
.filter(key => key !== “children”)
.forEach(name => {
dom[name] = element.props[name];
});
element.props.children.forEach(child =>
render(child, dom)
);
container.appendChild(dom);
}

看看成果

// main.jsx
import OllyReact from “./myReact/index”;
const element = (
<div style=”background: salmon”>
<h1>Hello World</h1>
<h2 style=”text-align:right”>—Oliver</h2>
</div>
);
OllyReact.render(element, document.getElementById(“root”));

此时看到咱们的 render 函数也能够失常工作了！

小结

就是这样！当初，咱们有了一个能够将 JSX 出现到 DOM 的库（尽管它只反对原生 DOM 标签且不反对更新 QAQ）。

参考：https://pomb.us/build-your-own-react/

正文完
前端
发表至： 前端
2021-02-06
 0
关于前端:uniapp项目实践总结五自定义底部导航栏
关于前端:Vue3-中还处在实验性阶段-Suspense-是个啥
关于前端:用明道云搭建一个住宅式物业管理系统
关于前端:使用taro或react框架的针对微信小程序隐私协议的组件封装网上找了很久都没有相关模版只有自己写了一个