全新的JSX转换

https://react.docschina.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

全新的好处
  • 使用全新的转换，你可以单独使用 JSX 而无需引入 React。
  • 根据你的配置，JSX 的编译输出可能会略微改善 bundle 的大小。
  • 它将减少你需要学习 React 概念的数量，以备未来之需。

当你使用 JSX 时，编译器会将其转换为浏览器可以理解的 React 函数调用。旧的 JSX 转换会把 JSX 转换为 React.createElement(...) 调用。

源代码

  1. import React from 'react';
  3. function App() {
  4.   return <h1>Hello World</h1>;
  5. }

旧的 JSX 转换会将上述代码变成普通的 JavaScript 代码：

  1. import React from 'react';
  3. function App() {
  4.   return React.createElement('h1', null, 'Hello world');
  5. }

新的 JSX 转换不会将 JSX 转换为 **React.createElement**，而是自动从 React 的 package 中引入新的入口函数并调用。

  1. // 由编译器引入（禁止自己引入！）
  2. import {jsx as _jsx} from 'react/jsx-runtime';
  4. function App() {
  5.   return _jsx('h1', { children: 'Hello world' });
  6. }

创建项目

  1. npx create-react-app my-app        # 如果安装失败，把yarn卸载掉
  2. cd 01.basic
  3. npm run start

先修改命令，禁用新的jsx转换 cross-env DISABLE_NEW_JSX_TRANSFORM=true
  1. "scripts": {
  2.   "start": "react-scripts start",
  3.   "start2": "cross-env DISABLE_NEW_JSX_TRANSFORM=true  react-scripts start",
  4.   "build": "cross-env DISABLE_NEW_JSX_TRANSFORM=true  react-scripts build",
  5.   "test": "cross-env DISABLE_NEW_JSX_TRANSFORM=true  react-scripts test",
  6.   "eject": "cross-env DISABLE_NEW_JSX_TRANSFORM=true  react-scripts eject"
  7. },

src/index.js
  1. import React from 'react';
  2. import ReactDOM from 'react-dom';
  4. let element = (
  5.   <div className="title" style={{color: 'red', backgroundColor: 'green'}}>
  6.     <span>hello</span>
  7.     world
  8.   </div>
  9. )
  11. // React.createElement();
  12. console.log(JSON.stringify(element, null, 2));
  13. ReactDOM.render(element, document.getElementById('root'));

虚拟DOM元素结构打印出来，如下

  1. {
  2.   "type": "div",
  3.   "key": null,
  4.   "ref": null,
  5.   "props": {
  6.     "className": "title",
  7.     "style": {
  8.       "color": "red",
  9.       "backgroundColor": "green"
  10.     },
  11.     "children": [
  12.       {
  13.         "type": "span",
  14.         "key": null,
  15.         "ref": null,
  16.         "props": {
  17.           "children": "hellp"
  18.         },
  19.         "_owner": null,
  20.         "_store": {}
  21.       },
  22.       "world"
  23.     ]
  24.   },
  25.   "_owner": null,
  26.   "_store": {}
  27. }

public/index.html
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <title>01.basic</title>
  8. </head>
  9. <body>
  10.   <div id="root"></div>
  11. </body>
  12. </html>

实现元素的渲染

  • 父组件先开始挂载，后挂载完成
  • 子组件后开始挂载，先挂载完成

1609002145166.png

src/index.js
  1. import React from './react';
  2. import ReactDOM from './react-dom';
  4. let element = (
  5.   <div className="title" style={{color: 'red', backgroundColor: 'green'}}>
  6.     <span>hello</span>
  7.     world
  8.   </div>
  9. )
  10. console.log(element);
  11. console.log(JSON.stringify(element, null, 2));
  13. // React.createElement 不需要自己手动引入去处理上面的jsx语法，
  14. // @babel/preset-env会自动调用这个方法去处理。
  15. ReactDOM.render(element, document.getElementById('root'));

image.png

src/react.js
  1. /**
  2.  * 
  3.  * @param {*} type 元素的类型
  4.  * @param {*} config 配置对象
  5.  * @param {*} children 元素的儿子或儿子们
  6.  */
  7. function createElement(type, config, children){
  8.   if (config){
  9.     delete config.__source;
  10.     delete config.__self;
  11.   }
  13.   let props = {...config};
  14.   if (arguments.length > 3){
  15.     children = Array.prototype.slice.call(arguments, 2);
  16.   }
  17.   props.children = children;
  19.   return {
  20.     type,
  21.     props,
  22.   }
  23. }
  25. const React = {
  26.   createElement,
  27. }
  29. export default React;

src/react-dom.js
  1. /**
  2.  * 1.把vdom虚拟DOM变成真实DOM dom
  3.  * 2.把虚拟DOM上的属性更新或者同步到dom上
  4.  * 3.把此虚拟DOM的儿子们也都变成真实DOM挂载到自己的dom上  dom.appendChild
  5.  * 4.把自己挂载到容器上
  6.  * @param {*} vdom 要渲染的虚拟DOM
  7.  * @param {*} container 要把虚拟DOM转换真实DOM并插入到哪个容器中去
  8.  */
  9. function render (vdom, container){
  10.   const dom = createDOM(vdom);
  11.   container.appendChild(dom);
  12. }
  14. /**
  15.  * 把虚拟DOM变成真实DOM
  16.  * @param {*} vdom 虚拟DOM 
  17.  */
  18. function createDOM(vdom){
  19.   // TODO 处理vdom是数字或者字符串的情况，直接返回一个真实的文本节点
  20.   if (typeof vdom === 'string' || typeof vdom === 'number'){
  21.     return document.createTextNode(vdom);
  22.   }
  23.   // 否则 它就是一个虚拟DOM对象了，也就是React元素
  24.   let { type, props } = vdom;
  25.   let dom = document.createElement(type);
  27.   // 使用虚拟DOM的属性更新刚创建出来的真实DOM的属性
  28.   updateProps(dom, props);
  30.   // 处理儿子情况
  31.   let children = props.children;
  32.   if (typeof children === 'string' || typeof children === 'number'){
  33.     dom.textContent = children;    // 如果只有一个儿子，且是文本，就直接把文本填进dom里即可
  34.   } else if (typeof children === 'object' && children.type){
  35.     // 如果只有一个儿子，并且这个儿子是一个虚拟DOM元素，就把儿子变成真实DOM插到自己身上
  36.     render(children, dom);
  37.   } else if (Array.isArray(children)){
  38.     reconcileChilren(children, dom);    // 如果儿子是一个数组
  39.   } else {
  40.     dom.textContent = children ? children.toString() : '';
  41.   }
  42.   // 把真实DOM作为一个dom属性放在虚拟DOM上，为以后更新做准备
  43.   // Cannot add property dom, object is not extensible
  44.   // vdom.dom = dom;
  45.   return dom;
  46. }
  48. /**
  49.  * 处理儿子数组情况
  50.  * @param {*} childrenVdom 儿子们的虚拟DOM
  51.  * @param {*} parentDOM 父亲的真实DOM
  52.  */
  53. function reconcileChilren(childrenVdom, parentDOM){
  54.   for (let i=0; i<childrenVdom.length; i++){
  55.     let childVdom = childrenVdom[i];
  56.     render(childVdom, parentDOM);
  57.   }
  58. }
  61. /**
  62.  * 使用虚拟DOM的属性更新刚创建出来的真实DOM的属性
  63.  * @param {*} dom 真实DOM
  64.  * @param {*} newProps 新属性对象
  65.  */
  66. function updateProps(dom, newProps){
  67.   for (let key in newProps){
  68.     if (key === 'children') continue; //儿子单独处理，不在此处处理
  69.     if (key === 'style'){
  70.       let styleObj = newProps.style;
  71.       for (let attr in styleObj){
  72.         dom.style[attr] = styleObj[attr];
  73.       }
  74.     } else {
  75.       dom[key] = newProps[key];
  76.     }
  77.   }
  78. }
  80. const ReactDOM = {
  81.   render,
  82. }
  83. export default ReactDOM;

实现函数组件的渲染

src/index.js
  1. import React from './react';
  2. import ReactDOM from './react-dom';
  4. function App(props){
  5.   return (
  6.     <div className="title" style={{color: 'red', backgroundColor: 'green'}}>
  7.       <span>{props.name}</span>
  8.       {props.children}
  9.     </div>
  10.   )
  11. }
  12. let element = (
  13.   <App name="jack">
  14.     <span>world</span>
  15.   </App>
  16. )
  18. console.log(element);
  19. //React.createElement(App, {name: 'jack'}, <span>world</span>);
  20. ReactDOM.render(element, document.getElementById('root'));

image.png

src/react-dom.js

添加 vdom 的 type 是函数组件时的条件处理

  1. function createDOM(vdom){
  2.   ...
  3.     let dom;
  4.   if (typeof type === 'function'){ //如果是自定义的函数组件
  5.     return mountFunctionComponent(vdom);
  6.   } else {  //如果原生组件
  7.     dom = document.createElement(type);
  8.   }
  9.   ...
  10. }
  12. /** 把一个类型为自定义的函数组件的虚拟DOM转换成真实DOM并返回
  13.  * 
  14.  * @param {*} vdom 类型为“自定义函数组件”的虚拟DOM
  15.  */
  16. function mountFunctionComponent(vdom){
  17.   let { type, props } = vdom;
  18.   let renderVdom = type(props);
  19.   return createDOM(renderVdom);
  20. }

实现类组件的渲染

src/index.js
  1. import React from './react';
  2. import ReactDOM from './react-dom';
  4. class App extends React.Component {
  5.   render(){
  6.     return (
  7.       <div className="title" style={{color: 'red'}}>
  8.         <span>{this.props.name}</span>
  9.         {this.props.children}
  10.       </div>
  11.     )
  12.   }
  13. }
  15. let element = <App name="hello">world</App>;
  16. console.log(element);
  17. ReactDOM.render(element, document.getElementById('root'));

src/Component.js
  1. class Component {
  2.   static isReactComponent = true;
  3.   constructor(props){
  4.     this.props = props;
  5.     this.state = {};
  6.   }
  7. }
  8. export default Component;

src/react.js

添加 Component 类

  1. import { Component } from './Component'
  2. export { Component };
  4. function createElement(type, config, children){
  5.   //...
  6. }
  8. const React = {
  9.   createElement,
  10.   Component,
  11. }
  13. export default React;

src/react-dom.js

添加 vdom 的 type 是类组件时的条件处理

  1. function createDOM(vdom){
  2.   ...
  3.     let dom;
  4.   if (typeof type === 'function'){ 
  5.     if (type.isReactComponent){ //如果是自定义类组件
  6.       return mountClassComponent(vdom);
  7.     } else {  //如果是自定义的函数组件
  8.       return mountFunctionComponent(vdom);
  9.     }
  10.   } else {  //如果原生组件
  11.     dom = document.createElement(type);
  12.   }
  13.   ...
  14. }
  16. /** 把一个类型为 “自定义类组件” 的虚拟DOM转换成真实DOM并返回
  17.  * 
  18.  * 1.创建类组件的实例
  19.  * 2.调用类组件实例的render方法，获得返回的虚拟DOM元素，即React元素
  20.  * 3.把返回的虚拟DOM转换成真实的DOM进行挂载
  21.  * @param {*} vdom 虚拟DOM
  22.  */
  23. function mountClassComponent(vdom){
  24.   let { type, props } = vdom; //解构类的属性和类的属性对象
  25.   let classInstance = new type(props);  //创建类的实例
  26.   let renderVdom = classInstance.render();  //调用实例方法render，返回要渲染的虚拟DOM对象
  27.   let dom = createDOM(renderVdom);  //根据虚拟DOM对象，返回真实的DOM对象
  28.   classInstance.dom = dom;  //为以后类组件的更新，把真实DOM挂载到了类的实例上
  29.   return dom;
  30. }

实现组件更新

1609002644954.png

src/index.js
  1. import React from './react';
  2. import ReactDOM from './react-dom';
  4. class Counter extends React.Component {
  5.   constructor(props){
  6.     super(props);
  7.     this.state = {
  8.       name: props.name,
  9.       number: 0,
  10.     }
  11.   }
  12.   handleClick = () => {
  13.     this.setState({
  14.       number: this.state.number+1,
  15.     })
  16.   }
  17.   render(){
  18.     return (
  19.       <div>
  20.         <div>{`${this.props.name}: ${this.state.number}`}</div>
  21.         <button onClick={this.handleClick}>+</button>
  22.       </div>
  23.     )
  24.   }
  25. }
  27. let element = <Counter name="计数器" />;
  28. ReactDOM.render(element, document.getElementById('root'));

src/Component.js

添加setState实例方法

  1. import { createDOM } from './react-dom.js'
  3. class Component {
  4.   static isReactComponent = true;
  5.   constructor(props){
  6.     this.props = props;
  7.     this.state = {};
  8.   }
  9.   setState(partialState){
  10.     let state = this.state;
  11.     this.state = {...state, ...partialState};
  12.     let newVdom = this.render();
  13.     updateClassComponent(this, newVdom);
  14.   }
  15. }
  17. /** 更新类组件
  18.  * 
  19.  * @param {*} classInstance 
  20.  * @param {*} newVdom 
  21.  */
  22. function updateClassComponent(classInstance, newVdom){
  23.   let oldDom = classInstance.dom; //取出类组件上次渲染出来的真实DOM
  24.   let newDom = createDOM(newVdom);  //把新的虚拟DOM转换成真实DOM
  25.   oldDom.parentNode.replaceChild(newDom, oldDom); //用新的真实DOM替换旧的真实DOM
  26.   classInstance.dom = newDom;
  27. }
  29. export default Component;

src/react-dom.js

添加一个条件，把虚拟DOM的事件属性更新为真实DOM的事件属性。

  1. function updateProps(dom, newProps){
  2.   ...
  3.   else if (key.startsWith('on')){
  4.     dom[key.toLocaleLowerCase()] = newProps[key]; // 给真实的DOM加事件属性， onClick => onclick
  5.   }
  6.   ...
  7. }

实现合成事件和批量更新

setState2.jpg

src/index.js

  1. // import React from 'react';
  2. // import ReactDOM from 'react-dom';
  3. import React from './react';
  4. import ReactDOM from './react-dom';
  6. class Counter extends React.Component {
  7.   constructor(props){
  8.     super(props);
  9.     this.state = {
  10.       name: props.name,
  11.       number: 0,
  12.     }
  13.   }
  14.   handleClick = (e) => {
  15.     e.stop();
  16.     this.setState({number: this.state.number+1 }, () => {
  17.       console.log('callback1', this.state.number);
  18.     });
  19.     console.log(this.state.number);
  20.     this.setState({number: this.state.number+1 });
  21.     console.log(this.state.number);
  23.     setTimeout(() => {
  24.       console.log(this.state.number);
  25.       this.setState({number: this.state.number+1 });
  26.       console.log(this.state.number);
  27.       this.setState({number: this.state.number+1 });
  28.       console.log(this.state.number);
  29.     }, 1000)
  31.     // this.setState(prevState => ({number: prevState.number + 1}), () => {
  32.     //   console.log('callback', this.state.number);    //2
  33.     // });
  34.     // console.log(this.state.number);
  35.     // this.setState(prevState => ({number: prevState.number + 1}));
  36.     // console.log(this.state.number);
  38.     // setTimeout(() => {
  39.     //   console.log(this.state.number);
  40.     //   this.setState(prevState => ({number: prevState.number + 1}));
  41.     //   console.log(this.state.number);
  42.     //   this.setState(prevState => ({number: prevState.number + 1}));
  43.     //   console.log(this.state.number);
  44.     // }, 1000)
  45.   }
  46.   aa = (e) => {
  47.     console.log('aa');
  48.   }
  49.   render(){
  50.     return (
  51.       <div onClick={this.aa}>
  52.         <div>{`${this.props.name}: ${this.state.number}`}</div>
  53.         <button onClick={this.handleClick}>+</button>
  54.       </div>
  55.     )
  56.   }
  57. }
  59. let element = <Counter name="计数器" />;
  60. ReactDOM.render(element, document.getElementById('root'));

src/Component.js

  1. import { createDOM } from './react-dom.js'
  3. // 批量更新队列
  4. export let updateQueue = {
  5.   isBatchingUpdate: false,  //当前是否处于批量更新模式，默认值是false
  6.   updaters: new Set(),
  7.   batchUpdate(){  // 进行批量更新，之后重置为非批量模式
  8.     for (let updater of this.updaters){
  9.       updater.updateComponent();
  10.     }
  11.     this.isBatchingUpdate = false;
  12.   }
  13. }
  15. // 更新器
  16. class Updater {
  17.   constructor(classInstance){
  18.     this.classInstance = classInstance; //类组件的实例
  19.     this.pendingStates = [];  //等待生效的状态，可能是一个对象，也可能给是一个函数
  20.     this.cbs = []; //状态更新后的回调
  21.   }
  22.   addState(partialState, cb){
  23.     // 把该次 setState() 传递的数据和回调函数先存起来
  24.     this.pendingStates.push(partialState);
  25.     if (typeof cb === 'function') this.cbs.push(cb);
  27.     if (updateQueue.isBatchingUpdate){
  28.       updateQueue.updaters.add(this); //如果是批量模式，先不更新，缓存起来。本次setState就结束了
  29.     } else {
  30.       this.updateComponent();  //如果非批量模式，直接更新组件
  31.     }
  32.   }
  33.   // 更新类组件
  34.   updateComponent(){
  35.     let { classInstance, pendingStates, cbs } = this;
  36.     if (pendingStates.length > 0){  //如果有等待更新的状态对象
  37.       classInstance.state = this.getState();  //类组件的state更新为最新的state
  38.       classInstance.forceUpdate();  //强制重新更新渲染
  39.       cbs.forEach(cb => cb());  //更新后运行 setState() 传递的回调函数
  40.       cbs.length = 0; //回调函数运行后，清空cbs数组
  41.     }
  42.   }
  43.   // 获取最新的state状态
  44.   getState(){
  45.     let { classInstance, pendingStates }= this;
  46.     let { state } = classInstance;
  48.     // 合并本次更新的所有state
  49.     pendingStates.forEach(nextState => {
  50.       // 如果 nextState 是一个函数的话，传入老状态，返回新状态，再进行合并
  51.       if (typeof nextState === 'function') nextState = nextState.call(classInstance, state);
  52.       state = {...state, ...nextState};
  53.     })
  54.     pendingStates.length = 0; //state获取完后，清空 pendingStates 数组
  55.     return state;
  56.   }
  57. }
  59. class Component {
  60.   static isReactComponent = true;
  61.   constructor(props){
  62.     this.props = props;
  63.     this.state = {};
  64.     this.updater = new Updater(this);
  65.   }
  66.   setState(partialState, cb){
  67.     this.updater.addState(partialState, cb);
  68.   }
  69.   // 强制更新渲染
  70.   forceUpdate(){
  71.     let newVdom = this.render();
  72.     updateClassComponent(this, newVdom);
  73.   }
  74. }
  76. /** 更新类组件
  77.  * 
  78.  * @param {*} classInstance 
  79.  * @param {*} newVdom 
  80.  */
  81. function updateClassComponent(classInstance, newVdom){
  82.   let oldDom = classInstance.dom; //取出类组件上次渲染出来的真实DOM
  83.   let newDom = createDOM(newVdom);  //把新的虚拟DOM转换成真实DOM
  84.   oldDom.parentNode.replaceChild(newDom, oldDom); //用新的真实DOM替换旧的真实DOM
  85.   classInstance.dom = newDom;
  86. }
  89. export default Component;

src/react-dom.js

  1. import { addEvent } from './event.js'
  3. function updateProps(dom, newProps){
  4.     ...
  5.   else if (key.startsWith('on')){
  6.     // dom[key.toLocaleLowerCase()] = newProps[key]; // 给真实的DOM加事件属性， onClick => onclick
  7.     addEvent(dom, key.toLocaleLowerCase(), newProps[key]);    //给真实的dom添加委托事件
  8.   }
  9.   ...
  10. }

src/event.js

  1. import { updateQueue } from './Component.js'
  3. /** 给真实DOM添加事件处理函数
  4.  * 什么么要做合成事件？为什么要做事件委托或代理？
  5.  * 1.做兼容处理，兼容不同浏览器
  6.  * 2.可以在你写的事件处理函数之前和之后做一些事情
  7.  * 
  8.  * @param {*} dom 真实DOM
  9.  * @param {*} eventType  事件类型
  10.  * @param {*} listener 监听函数
  11.  */
  12. export function addEvent(dom, eventType, listener){
  13.   let store;
  14.   if (dom.store){
  15.     store = dom.store;
  16.   } else{
  17.     dom.store={};
  18.     store = dom.store;
  19.   }
  20.   // let store = dom.store || (dom.store = {});
  22.   store[eventType] = listener;
  23.   if (!document[eventType]){
  24.     // 事件委托，不管你给哪个DOM元素上绑定事件，最后都统一代理到document上去了
  25.     document[eventType] = dispatchEvent;  //document.onclick = dispatchEvent;
  26.   }
  27. }
  29. //创建一个单例的合成event对象，这个也是react包装后返回的event对象
  30. let syntheticEvent = {
  31.   // 阻止冒泡
  32.   stopping: false,
  33.   stop(){
  34.     this.stopping = true;
  35.   }
  36. };
  38. // document的事件委托函数
  39. function dispatchEvent(event){
  40.   // 事件源target=button那个DOM元素; 类型type=click
  41.   let { target, type } = event;
  42.   let eventType = `on${type}`;
  44.   updateQueue.isBatchingUpdate = true;  // 把列队设置为批量更新模式
  46.   createSyntheticEvent(event);  //包装event对象
  47.   while (target){
  48.     let { store } = target; 
  49.     let listener = store && store[eventType];
  50.     listener && listener.call(target, syntheticEvent);
  52.     // 如果调用了 e.stop() 阻止了冒泡，就打断
  53.     if (syntheticEvent.stopping){
  54.       syntheticEvent.stopping = false;
  55.       break;
  56.     }
  57.     //如果父节点也绑定了事件， 继续向上冒泡执行
  58.     target = target.parentNode; 
  59.   }
  61.   // 事件函数调用之后，清空 syntheticEvent 对象
  62.   for (let key in event){
  63.     syntheticEvent[key] = null;
  64.   }
  66.   updateQueue.batchUpdate();  // 进行批量更新，之后重置为非批量模式
  67. }
  69. function createSyntheticEvent(nativeEvent){
  70.   for (let key in nativeEvent){
  71.     syntheticEvent[key] = nativeEvent[key];
  72.   }
  73. }

实现 ref

forwardRef 的实现见 hook源码篇

src/index.js
  1. import React from './react';
  2. import ReactDOM from './react-dom';
  4. class Form extends React.Component {
  5.   refTextInput;
  6.   constructor(props){
  7.     super(props);
  8.     this.refTextInput = React.createRef();
  9.   }
  10.   getFocus = () => {
  11.     let refTextInput = this.refTextInput.current; //TextInput组件实例
  12.     refTextInput.getFocus();
  13.   }
  14.   render(){
  15.     return (
  16.       <div>
  17.         <TextInput ref={this.refTextInput}></TextInput>
  18.         <button onClick={this.getFocus}>获得焦点</button>
  19.       </div>
  20.     )
  21.   }
  22. }
  24. class TextInput extends React.Component {
  25.   refInput;
  26.   constructor(props){
  27.     super(props);
  28.     this.refInput = React.createRef();
  29.   }
  30.   getFocus = () => {
  31.     this.refInput.current.focus();
  32.   }
  33.   render(){
  34.     return <input ref={this.refInput} />
  35.   }
  36. }
  38. ReactDOM.render(<Form />, document.getElementById('root'));

src/react.js
  1. function createElement(type, config, children){
  2. + let ref;
  3.   if (config){
  4.     delete config.__source;
  5.     delete config.__self;
  6. +   ref = config.ref;
  7. +   delete config.ref;
  8.     key = config.key;
  9.     delete config.key;
  10.   }
  12.   let props = {...config};
  13.   if (arguments.length > 3){
  14.     children = Array.prototype.slice.call(arguments, 2);
  15.   }
  16.   props.children = children;
  18.   //ref、key等都是react原生属性，不属于props属性，所以要单拎出来
  19.   return {
  20.     type,
  21.     props,
  22. +   ref,
  23.   }
  24. }
  26. +function createRef(initialValue){
  27. +  return {current: null};
  28. +}
  30. const React = {
  31.   createElement,
  32.   Component,
  33. + createRef,
  34. }
  36. export default React;

src/react-dom.js
  1. export function createDOM(vdom){
  2.     ...
  3. + let { type, props, ref } = vdom;
  4.   let dom;  //创建真实dom对象
  6.   if (typeof type === 'function'){ 
  7.     if (type.isReactComponent){ //如果是自定义类组件
  8.       return mountClassComponent(vdom);
  9.     } else {  //自定义的函数组件
  10. +     if (ref) throw new Error('Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?')
  11.       return mountFunctionComponent(vdom);
  12.     }
  13.   } else {  //原生组件
  14.     dom = document.createElement(type);
  15. +   if (ref) ref.current = dom; //原生组件绑定的 ref.current 为真实dom
  16.     updateProps(dom, props);  // 使用虚拟DOM的属性更新刚创建出来的真实DOM的属性      
  17.     renderChildren(props.children, dom);  // 挂载父节点的儿子或儿子们
  18.   }
  19.   return dom;
  20. }
  22. function mountClassComponent(vdom){
  23. + let { type, props, ref } = vdom; //解构类的属性和类的属性对象
  24.   let classInstance = new type(props);  //创建类的实例
  26.   // 为类组件绑定ref
  27. +  if (typeof ref === 'function'){ //<App ref={(node) => {this.refApp = node}} />
  28. +    ref(classInstance);
  29. +  } else {
  30. +    if (ref){ //this.refApp = React.createRef()  <App ref={this.refApp} />
  31. +      ref.current = classInstance;
  32. +      classInstance.ref = ref;
  33. +    }
  34. +  }
  36.   let renderVdom = classInstance.render();  //调用实例方法render，返回要渲染的虚拟DOM对象
  37.   let dom = createDOM(renderVdom);  //根据虚拟DOM对象，返回真实的DOM对象
  39.   classInstance.dom = dom;  //为以后类组件的更新，把真实DOM挂载到了类的实例上
  40.   return dom;
  41. }

实现 React.Fragment

React.Fragment 等同于 <></>

src/index.js
  1. import React from './react';
  2. import ReactDOM from './react-dom';
  4. class Form extends React.Component {
  5.   refTextInput;
  6.   constructor(props){
  7.     super(props);
  8.   }
  9.   render(){
  10.     return (
  11.       <React.Fragment>
  12.         <div className="a">hello</div>
  13.         <span>world</span>
  14.         <><p>today</p></>
  15.       </React.Fragment>
  16.     )
  17.   }
  18. }
  20. ReactDOM.render(<Form />, document.getElementById('root'));

src/constants.js
  1. export const REACT_FRAGMENT = Symbol('react.fragment');

src/react.js
  1. import { REACT_FRAGMENT } from './constants'
  2. function createElement(type, config, children){
  3. +  if (type.name === 'Fragment') type = REACT_FRAGMENT;
  4. }
  6. export function Fragment(props){
  7.   return <>{props.children}</>
  8. }
  10. const React = {
  11.   Fragment,
  12. }

src/react-dom.js
  1. import { addEvent } from './event.js'
  2. +import { REACT_TEXT, REACT_FRAGMENT } from './constants'
  4. function render (vdom, container){
  5.   const dom = createDOM(vdom, container);
  6. + if (dom) container.appendChild(dom);
  7. }
  9. /** 把虚拟DOM变成真实DOM
  10.  * 
  11.  * @param {*} vdom 虚拟DOM 
  12.  */
  13. export function createDOM(vdom, container){
  14.   // TODO 处理vdom是数字或者字符串的情况，直接返回一个真实的文本节点。
  15.   if (typeof vdom === 'string' || typeof vdom === 'number'){
  16.     return document.createTextNode(vdom);
  17.   }
  19.   // 否则 它就是一个虚拟DOM对象了，也就是React元素
  20.   let { type, props, ref } = vdom;
  21.   let dom;  //创建真实dom对象
  23.   if (typeof type === 'function'){ 
  24.     if (type.isReactComponent){ //如果是自定义类组件
  25. +     return mountClassComponent(vdom, container);
  26.     } else {  //自定义的函数组件
  27.       if (ref) throw new Error('Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?')
  28. +     return mountFunctionComponent(vdom, container);
  29.     }
  30.   } else {  //原生组件
  31. +   if (type === undefined || type === REACT_FRAGMENT){  //如果是Fragment
  32.       dom = null;
  33.       renderChildren(props.children, container);
  34.     } else {
  35.       dom = document.createElement(type);
  36.       if (ref) ref.current = dom; //原生组件绑定的 ref.current 为真实dom
  37.       updateProps(dom, props);  // 使用虚拟DOM的属性更新刚创建出来的真实DOM的属性      
  38.       renderChildren(props.children, dom);  // 挂载父节点的儿子或儿子们
  39.     }
  40.   }
  41.   return dom;
  42. }
  44. //把一个类型为 “自定义函数组件” 的虚拟DOM转换成真实DOM并返回
  45. +function mountFunctionComponent(vdom, container){
  46.   let { type, props } = vdom;
  47.   let renderVdom = type(props);
  48. + return createDOM(renderVdom, container);
  49. }
  51. //把一个类型为 “自定义类组件” 的虚拟DOM转换成真实DOM并返回
  52. +function mountClassComponent(vdom, container){
  53.   let { type, props, ref } = vdom; //解构类的属性和类的属性对象
  54.   let classInstance = new type(props);  //创建类的实例
  55.   let renderVdom = classInstance.render();  //调用实例方法render，返回要渲染的虚拟DOM对象
  56. + let dom = createDOM(renderVdom, container);  //根据虚拟DOM对象，返回真实的DOM对象
  57.   if (ref) ref.current = classInstance; //类组件绑定的 ref.current 为类的实例
  58.   classInstance.dom = dom;  //为以后类组件的更新，把真实DOM挂载到了类的实例上
  59.   return dom;
  60. }

实现基本生命周期

React基础（源码篇） - 图6

src/index.js

  1. import React from './react';
  2. import ReactDOM from './react-dom';
  4. class Counter extends React.Component {
  5.   static defaultProps = { //设置初始属性对象
  6.     name: '计数器',
  7.   }
  8.   constructor(props){
  9.     super(props);
  10.     this.state = { number: 0 };
  11.     console.log('Counter 1.constructor 初始化属性和状态对象');
  12.   }
  13.   componentWillMount(){
  14.     console.log('Counter 2.componentWillMount 组件将要挂载');
  15.   }
  16.   componentDidMount(){
  17.     console.log('Counter 4.componentDidMount 组件完成挂载');
  18.   }
  19.   handleClick = () => {
  20.     console.log('click add button!');
  21.     this.setState({number: this.state.number + 1});
  22.   }
  23.   // react可以shouldComponentUpdate方法中优化，PureComponent 可以帮我们做这件事
  24.   shouldComponentUpdate(nextProps, nextState){  //参数：下一次属性；下一次状态
  25.     console.log('Counter 5.shouldComponentUpdate 决定组件是否需要更新？');
  26.     return nextState.number % 2 === 0;  //此函数只有返回了true，才会调用 render 方法
  27.   }
  28.   componentWillUpdate(nextProps, nextState){
  29.     console.log('Counter 6.componentWillUpdate 组件将要更新');
  30.   }
  31.   componentDidUpdate(prevProps, prevState){
  32.     console.log('Counter 7.componentDidUpdate 组件完成更新');
  33.   }
  35.   render(){
  36.     console.log('Counter 3.render 重新计算新的虚拟DOM');
  37.     let st = this.state;
  39.     return (
  40.       <div>
  41.         <p>{st.number}</p>
  42.         <button onClick={this.handleClick}>+</button>
  43.       </div>
  44.     )
  45.   }
  46. }
  48. ReactDOM.render(<Counter />, document.getElementById('root'));
  50. // Counter 1.constructor 初始化属性和状态对象
  51. // Counter 2.componentWillMount 组件将要挂载
  52. // Counter 3.render 重新计算新的虚拟DOM
  53. // Counter 4.componentDidMount 组件完成挂载
  55. // click add button!
  56. // Counter 5.shouldComponentUpdate 决定组件是否需要更新？
  58. // click add button!
  59. // Counter 5.shouldComponentUpdate 决定组件是否需要更新？
  60. // Counter 6.componentWillUpdate 组件将要更新
  61. // Counter 3.render 重新计算新的虚拟DOM
  62. // Counter 7.componentDidUpdate 组件完成更新

src/react-dom.js

  1. function render (vdom, container){
  2.   const dom = createDOM(vdom, container);
  3.   if (dom) container.appendChild(dom);
  4. + dom.componentDidMount && dom.componentDidMount();
  5. }
  7. // 把一个类型为 “自定义类组件” 的虚拟DOM转换成真实DOM并返回
  8. function mountClassComponent(vdom, container){
  9.   let { type, props, ref } = vdom; //解构类的属性和类的属性对象
  10.   let classInstance = new type(props);  //创建类的实例
  12.   // 为类组件绑定ref
  13.   if (typeof ref === 'function'){ //<App ref={(node) => {this.refApp = node}} />
  14.     ref(classInstance);
  15.   } else {
  16.     if (ref){ //this.refApp=React.createRef()  <App ref={this.refApp} />
  17.       ref.current = classInstance;
  18.       classInstance.ref = ref;
  19.     }
  20.   }
  22. +    if (classInstance.componentWillMount) classInstance.componentWillMount();
  24.   let renderVdom = classInstance.render();  //调用实例方法render，返回要渲染的虚拟DOM对象
  25.   let dom = createDOM(renderVdom, container);  //根据虚拟DOM对象，返回真实的DOM对象
  27. + if (classInstance.componentDidMount){
  28. +   dom.componentDidMount = classInstance.componentDidMount.bind(classInstance);
  29. + }
  31.   classInstance.dom = dom;  //为以后类组件的更新，把真实DOM挂载到了类的实例上
  32.   return dom;
  33. }

src/Component.js

  1. // 更新器
  2. class Updater {
  3.     ...
  4.   addState(partialState, cb){
  5.     // 把该次 setState() 传递的数据和回调函数先存起来
  6.     this.pendingStates.push(partialState);
  7.     if (typeof cb === 'function') this.cbs.push(cb);
  8. +   this.emitUpdate(); 
  9.   }
  10.   // 发布更新（一个组件不管是属性变了，还是状态变了，都会更新）
  11.   emitUpdate(newProps){
  12.     if (updateQueue.isBatchingUpdate){
  13.       updateQueue.updaters.add(this); //如果是批量模式，先不更新，缓存起来。本次setState就结束了
  14.     } else {
  15.       this.updateComponent();  //如果非批量模式，直接更新组件
  16.     }
  17.   }
  18.   // 更新类组件
  19.   updateComponent(){
  20.     let { classInstance, pendingStates, cbs } = this;
  21.     if (pendingStates.length > 0){  //如果有等待更新的状态对象
  22.       shouldUpdate(classInstance, this.getState());
  23.       // cbs.forEach(cb => cb());  //更新后运行 setState() 传递的回调函数
  24.       // cbs.length = 0; //回调函数运行后，清空cbs数组
  25.     }
  26.   }
  27.     ...
  28. }
  30. /** 是否应该更新
  31.  * 
  32.  * @param {*} classInstance 组件实例
  33.  * @param {*} nextState 新的状态
  34.  */
  35. function shouldUpdate(classInstance, nextState){
  36.   //不管组件要不要刷新（是否执行render），其实组件的state属性一定会改变
  37.   classInstance.state = nextState;
  38.   // 如果有 shouldComponentUpdate 方法，并且该方法返回值为 false，到这就结束了。
  39.   let noUpdate = classInstance.shouldComponentUpdate && !classInstance.shouldComponentUpdate(classInstance.props, classInstance.state);
  40.   if (noUpdate) return;
  41.   classInstance.forceUpdate();  //强制重新更新渲染
  42. }
  44. class Component {
  45.   ...
  46.   // 强制更新渲染
  47.   forceUpdate(){
  48. +   if (this.componentWillUpdate) this.componentWillUpdate();
  49.     let newVdom = this.render();
  50.     updateClassComponent(this, newVdom);
  51. +   if (this.componentDidUpdate) this.componentDidUpdate();
  52.   }
  53. }
  55. // 更新类组件
  56. function updateClassComponent(classInstance, newVdom){
  57.   let oldDom = classInstance.dom; //取出类组件上次渲染出来的真实DOM
  58.   let newDom = createDOM(newVdom);  //把新的虚拟DOM转换成真实DOM
  59.   oldDom.parentNode.replaceChild(newDom, oldDom); //用新的真实DOM替换旧的真实DOM
  60.   classInstance.dom = newDom;
  61. }

实现完整生命周期

counterdomdiff.zip
counterdomdiff.jpg

dom-diff 最基本算法
  • 按索引一一对比，如果类型相同，则复用老的DOM节点，更新属性即可。
  • 如果类型不同，删除老的DOM节点，添加新的DOM节点。
  • 如果老节点为null，新的节点有，新建新的DOM节点，并插入。
  • 如果老节点有，新节点为null, 移除老的DOM节点。

src/index.js

  1. import React from './react';
  2. import ReactDOM from './react-dom';
  4. class Counter extends React.Component {
  5.   static defaultProps = { //设置初始属性对象
  6.     name: '计数器',
  7.   }
  8.   constructor(props){
  9.     super(props);
  10.     this.state = { number: 0 };
  11.     console.log('Counter 1.constructor 初始化属性和状态对象');
  12.   }
  13.   componentWillMount(){
  14.     console.log('Counter 2.componentWillMount 组件将要挂载');
  15.   }
  16.   componentDidMount(){
  17.     console.log('Counter 4.componentDidMount 组件完成挂载');
  18.   }
  19.   handleClick = () => {
  20.     console.log('click add button!');
  21.     this.setState({number: this.state.number + 1}, () =>{
  22.       console.log(this.state);
  23.     });
  24.   }
  25.   // react可以shouldComponentUpdate方法中优化，PureComponent 可以帮我们做这件事
  26.   shouldComponentUpdate(nextProps, nextState){  //参数：下一次属性；下一次状态
  27.     console.log('Counter 5.shouldComponentUpdate 决定组件是否需要更新？');
  28.     return nextState.number % 2 === 0;  //此函数只有返回了true，才会调用 render 方法
  29.   }
  30.   componentWillUpdate(nextProps, nextState){  //参数：下一次属性；下一次状态
  31.     console.log('Counter 6.componentWillUpdate 组件将要更新');
  32.   }
  33.   componentDidUpdate(prevProps, prevState){ //参数：上一次属性；上一次状态
  34.     console.log('Counter 7.componentDidUpdate 组件完成更新', prevProps, prevState);
  35.   }
  37.   render(){
  38.     console.log('Counter 3.render 重新计算新的虚拟DOM');
  39.     let st = this.state;
  41.     return (
  42.       <div id={`counter-${st.number}`} >
  43.         <p>{st.number}</p>
  44.         {st.number === 4 ? null : <ChildCounter count={st.number} />}
  45.         <button onClick={this.handleClick}>+</button>
  46.         <FunctionCounter count={st.number} />
  47.       </div>
  48.     )
  49.   }
  50. }
  52. class ChildCounter extends React.Component {
  53.   componentWillUnmount(){
  54.     console.log('ChildCounter 8.componentWillUnmount 组件将要卸载');
  55.   }
  56.   componentWillMount(){
  57.     console.log('ChildCounter 1.componentWillMount 组件将要挂载');
  58.   }
  59.   componentDidMount(){
  60.     console.log('ChildCounter 3.componentDidMount 组件完成挂载');
  61.   }
  62.   // 第一次不会执行，之后属性更新时才会执行（即：组件挂载时不执行，组件挂载后，有属性变化，才执行）
  63.   componentWillReceiveProps(newProps){
  64.     console.log('ChildCounter 4.componentWillReceiveProps 组件将要接收到新的属性');
  65.   }
  66.   shouldComponentUpdate(nextProps, nextState){
  67.     console.log('ChildCounter 5.shouldComponentUpdate 决定组件是否需要更新？');
  68.     return nextProps.count % 3 === 0;  //3的倍数就更新，否则就不更新
  69.   }
  70.   componentWillUpdate(){
  71.     console.log('ChildCounter 6.componentWillUpdate 组件将要更新');
  72.   }
  73.   componentDidUpdate(){
  74.     console.log('ChildCounter 7.componentDidUpdate 组件完成更新');
  75.   }
  76.   render(){
  77.     console.log('ChildCounter 2.render');
  78.     return (
  79.       <div id="sub-counter">{`ChildCounter: ${this.props.count}`}</div>
  80.     )
  81.   }
  82. }
  84. let FunctionCounter = (props) => <div id="counter-function">{props.count}</div>
  86. ReactDOM.render(<Counter />, document.getElementById('root'));

src/constants.js

  1. export const REACT_TEXT = Symbol('REACT_TEXT');
  2. export const REACT_FRAGMENT = Symbol('react.fragment');

src/utils.js

  1. import { REACT_TEXT } from './constants'
  3. /** 为了方便后边的dom-diff，把文本节点进行单独封装或做一个标识
  4.  *  不管原来是什么，都全部包装成React元素的形式
  5.  * @param {*} element 可能是一个React元素，也可以是一个字符串或数字
  6.  * @returns 
  7.  */
  8. export function wrapToVdom(element){
  9.   return (typeof element === 'string' || typeof element === 'number')
  10.     ? {type: REACT_TEXT, props: {content: element}}: element;
  11. }

src/react.js

  1. import { Component } from './Component'
  2. import { wrapToVdom } from './utils'
  3. import { REACT_FRAGMENT } from './constants'
  4. export { Component };
  6. /**
  7.  * @param {*} type 元素的类型
  8.  * @param {*} config 配置对象
  9.  * @param {*} children 元素的儿子或儿子们
  10.  */
  11. function createElement(type, config, children){
  12.   let ref;
  13.   if (type.name === 'Fragment') type = REACT_FRAGMENT;
  15.   if (config){
  16.     delete config.__source;
  17.     delete config.__self;
  18.     ref = config.ref;
  19.   }
  21.   let props = {...config};
  22.   //为了方便进行dom-diff，用 wrapToVdom 把文本节点进行一个标识，方便判断
  23.   if (arguments.length > 3){
  24.     props.children = Array.prototype.slice.call(arguments, 2).map(wrapToVdom);
  25.   } else {
  26.     props.children = wrapToVdom(children);
  27.   }
  29.   return { type, props, ref };
  30. }
  32. export function createRef(){
  33.   return {current: null};
  34. }
  36. export function Fragment(props){
  37.   return <>{props.children}</>
  38. }
  40. const React = {
  41.   createElement,
  42.   Component,
  43.   createRef,
  44.   Fragment,
  45. }
  47. export default React;

src/Component.js

  1. import { compareTwoVdom, findDOM } from './react-dom.js'
  3. // 批量更新队列
  4. export let updateQueue = {
  5.   isBatchingUpdate: false,  //当前是否处于批量更新模式，默认值是false
  6.   updaters: new Set(),
  7.   add(updater){
  8.     this.updaters.add(updater);
  9.   },
  10.   batchUpdate(){  // 进行批量更新，之后重置为非批量模式
  11.     this.isBatchingUpdate = false;
  12.     for (let updater of this.updaters){
  13.       updater.emitUpdate();
  14.     }
  15.     updateQueue.updaters.clear();
  16.   }
  17. }
  19. // 更新器
  20. class Updater {
  21.   constructor(classInstance){
  22.     this.classInstance = classInstance; //类组件的实例
  23.     this.pendingStates = [];  //等待生效的状态，可能是一个对象，也可能给是一个函数
  24.     this.cbs = []; //状态更新后的回调
  25.   }
  26.   addState(partialState, cb){
  27.     // 把该次 setState() 传递的数据和回调函数先存起来
  28.     this.pendingStates.push(partialState);
  29.     if (typeof cb === 'function') this.cbs.push(cb);
  31.     if (updateQueue.isBatchingUpdate){
  32.       updateQueue.add(this); //如果是批量模式，先不更新，缓存起来。本次setState就结束了
  33.     } else {
  34.       this.emitUpdate();  //如果非批量模式，直接更新
  35.     }
  36.   }
  37.   // 发布更新（一个组件不管是属性变了，还是状态变了，都会更新）
  38.   emitUpdate(nextProps){
  39.     let { classInstance, pendingStates, cbs } = this;
  41.     if (nextProps || pendingStates.length > 0){  //如果有等待更新的状态对象
  42.       shouldUpdate(classInstance, nextProps, this.getState());
  44.       // 不管是否要更新，结束后，setState的回调函数都要运行
  45.       if (cbs.length > 0){
  46.         cbs.forEach(cb => cb());  //更新后运行 setState() 传递的回调函数
  47.         cbs.length = 0; //回调函数运行后，清空cbs数组
  48.       }
  49.     }
  50.   }
  51.   // 获取最新的state状态
  52.   getState(){
  53.     let { classInstance, pendingStates }= this;
  54.     let { state } = classInstance;
  56.     // 合并本次更新的所有state
  57.     pendingStates.forEach(nextState => {
  58.       // 如果 nextState 是一个函数的话，传入老状态，返回新状态，再进行合并
  59.       if (typeof nextState === 'function') nextState = nextState.call(classInstance, state);
  60.       state = {...state, ...nextState};
  61.     })
  62.     pendingStates.length = 0; //state获取完后，清空 pendingStates 数组
  63.     return state;
  64.   }
  65. }
  67. /** 是否应该更新
  68.  * 
  69.  * @param {*} classInstance 组件实例
  70.  * @param {*} nextState 新的状态
  71.  */
  72. function shouldUpdate(classInstance, nextProps, nextState){
  73.   let willUpdate = true;
  74.   // 如果有 shouldComponentUpdate 方法，并且该方法返回值为 false，就只更新属性和状态，不调用render进行渲染了
  75.   if(classInstance.shouldComponentUpdate &&!classInstance.shouldComponentUpdate(nextProps, nextState)){
  76.     willUpdate = false;
  77.   }
  78.   // 调用 组件将要更新 生命周期函数
  79.   if(willUpdate && classInstance.componentWillUpdate) classInstance.componentWillUpdate(nextProps, nextState);
  81.   classInstance.prevProps = classInstance.props;
  82.   classInstance.prevState = classInstance.state;
  83.   // 不管组件要不要刷新（是否执行render），其实组件的state属性一定会改变
  84.   if(nextProps) classInstance.props = nextProps;  //更新props
  85.   classInstance.state = nextState;  //更新state
  87.   if (willUpdate) classInstance.forceUpdate();
  88. }
  90. class Component {
  91.   static isReactComponent = true; //是否类组件
  92.   constructor(props){
  93.     this.props = {...this.constructor.defaultProps, ...props};
  94.     this.state = {};
  95.     this.updater = new Updater(this);
  96.   }
  97.   setState(partialState, cb){
  98.     this.updater.addState(partialState, cb);
  99.   }
  100.   // 强制更新渲染
  101.   forceUpdate(){
  102.     let newRenderVdom = this.render();
  103.     let oldDom = findDOM(this.oldRenderVdom);
  104.     // 深度比较新旧两个虚拟DOM
  105.     let currentRenderVdom = compareTwoVdom(oldDom.parentNode, this.oldRenderVdom, newRenderVdom);
  106.     this.oldRenderVdom = currentRenderVdom;
  107.     this.componentDidUpdate && this.componentDidUpdate(this.prevProps, this.prevState);
  108.   }
  109. }
  111. export default Component;

src/react-dom.js

  1. import { addEvent } from './event.js'
  2. import { REACT_TEXT, REACT_FRAGMENT } from './constants'
  4. /** 渲染vdom虚拟DOM
  5.  * 
  6.  * 1.把vdom虚拟DOM变成真实DOM dom
  7.  * 2.把虚拟DOM上的属性更新或者同步到dom上
  8.  * 3.把此虚拟DOM的儿子们也都变成真实DOM挂载到自己的dom上  dom.appendChild
  9.  * 4.把自己挂载到容器上
  10.  * @param {*} vdom 要渲染的虚拟DOM
  11.  * @param {*} container 要把虚拟DOM转换真实DOM并插入到哪个父容器(父真实DOM节点)中去
  12.  */
  13. // 给根容器挂载的时候
  14. function render (vdom, container){
  15.   mount(vdom, container);
  16. }
  17. // 挂载
  18. function mount (vdom, container){
  19.   if (!vdom) return;
  20.   const dom = createDOM(vdom, container);
  21.   if (dom){
  22.     container.appendChild(dom);
  23.     dom.componentDidMount && dom.componentDidMount();
  24.   }
  25. }
  28. /** 把虚拟DOM变成真实DOM
  29.  * 
  30.  * @param {*} vdom 虚拟DOM 
  31.  */
  32. export function createDOM(vdom, container){
  33.   let { type, props, ref } = vdom;  //解构虚拟DOM
  34.   let dom;  //创建真实dom对象
  36.   if (type === REACT_TEXT){ // 字符串或文本
  37.     dom = document.createTextNode(props.content);
  38.   } else if (typeof type === 'function'){ 
  39.     if (type.isReactComponent){ //类组件
  40.       return mountClassComponent(vdom, container);
  41.     } else {  //函数组件
  42.       if (ref) throw new Error('Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?')
  43.       return mountFunctionComponent(vdom, container);
  44.     }
  45.   } else {  //原生组件（React元素）
  46.     if (type === undefined || type === REACT_FRAGMENT){  //如果是Fragment
  47.       dom = null;
  48.       renderChildren(props.children, container);
  49.     } else {
  50.       dom = document.createElement(type);
  51.       if (ref) ref.current = dom; //原生组件绑定的 ref.current 为真实dom
  52.       updateProps(dom, {}, props);  // 使用虚拟DOM的属性更新刚创建出来的真实DOM的属性      
  53.       renderChildren(props.children, dom);  // 挂载父节点的儿子或儿子们
  54.     }
  55.   }
  57.   // 把真实DOM作为一个dom属性放在虚拟DOM上（dom-diff 时需要）
  58.   // 当根据一个vdom创建出来一个真实DOM之后，真实DOM挂载到vdom.dom属性上
  59.   vdom.dom = dom;
  61.   return dom;
  62. }
  64. /** 挂载父节点的儿子或儿子们
  65.  * 
  66.  * @param {*} children 虚拟的儿子或儿子们元素
  67.  * @param {*} container 父容器(父真实DOM节点)
  68.  */
  69. function renderChildren (children, container){
  70.   if (typeof children === 'object' && children.type){ // 如果只有一个儿子
  71.     mount(children, container);
  72.   } else if (Array.isArray(children)){  // 如果有多个儿子
  73.     reconcileChilren(children, container);
  74.   }
  75. }
  76. /** 处理vdom儿子是数组情况
  77.  * 
  78.  * @param {*} childrenVdom 儿子们的虚拟DOM
  79.  * @param {*} container 父容器(父真实DOM节点)
  80.  */
  81. function reconcileChilren(childrenVdom, container){
  82.   childrenVdom.forEach(childVdom => {
  83.     mount(childVdom, container);
  84.   })
  85. }
  87. /** 把一个类型为 “自定义函数组件” 的虚拟DOM转换成真实DOM并返回
  88.  * 
  89.  * @param {*} vdom 虚拟DOM
  90.  */
  91. function mountFunctionComponent(vdom, container){
  92.   const { type, props } = vdom;
  93.   const renderVdom = type(props);
  94.   vdom.oldRenderVdom = renderVdom;  //把 vdom的渲染DOM 挂载到 vdom 上 （dom-diff 时需要）
  95.   return createDOM(renderVdom, container);
  96. }
  98. /** 把一个类型为 “自定义类组件” 的虚拟DOM转换成真实DOM并返回
  99.  * 
  100.  * 1.创建类组件的实例
  101.  * 2.调用类组件实例的render方法，获得返回的虚拟DOM元素，即React元素
  102.  * 3.把返回的虚拟DOM转换成真实的DOM进行挂载
  103.  * @param {*} vdom 虚拟DOM
  104.  */
  105. function mountClassComponent(vdom, container){
  106.   const { type, props, ref } = vdom; //解构类的属性和类的属性对象
  107.   const classInstance = new type(props);  //创建类的实例
  109.   vdom.classInstance = classInstance; //把 类的实例 挂载到 vdom 上（dom-diff 时需要）
  111.   // 为类组件绑定ref
  112.   if (typeof ref === 'function'){ //<App ref={(node) => {this.refApp = node}} />
  113.     ref(classInstance);
  114.   } else {
  115.     if (ref){ //this.refApp=React.createRef()  <App ref={this.refApp} />
  116.       ref.current = classInstance;
  117.       classInstance.ref = ref;
  118.     }
  119.   }
  121.   classInstance.componentWillMount && classInstance.componentWillMount();
  123.   const renderVdom = classInstance.render();  //调用实例方法render，返回要渲染的虚拟DOM对象
  124.   const dom = createDOM(renderVdom, container);  //根据虚拟DOM对象，返回真实的DOM对象
  126.   //把 vdom的渲染DOM 挂载到 vdom 和 类的实例 上（dom-diff 时需要）
  127.   classInstance.oldRenderVdom = vdom.oldRenderVdom = renderVdom;  
  129.   if (classInstance.componentDidMount){
  130.     dom.componentDidMount = classInstance.componentDidMount.bind(classInstance);
  131.   }
  133.   return dom;
  134. }
  137. /** 使用虚拟DOM的属性更新刚创建出来的真实DOM的属性
  138.  * 
  139.  * @param {*} dom 真实DOM
  140.  * @param {*} oldProps 旧属性对象
  141.  * @param {*} newProps 新属性对象
  142.  */
  143. function updateProps(dom, oldProps={}, newProps){
  144.   for (let key in newProps){
  145.     if (key === 'children') continue; //儿子单独处理，不在此处处理
  146.     if (key === 'style'){
  147.       let styleObj = newProps.style;
  148.       for (let attr in styleObj){
  149.         dom.style[attr] = styleObj[attr];
  150.       }
  151.     } else if (key.startsWith('on')){
  152.       addEvent(dom, key.toLocaleLowerCase(), newProps[key]);  //给真实的dom添加委托事件
  153.     } else {
  154.       dom[key] = newProps[key];
  155.     }
  156.   }
  157.   for (let key in oldProps){
  158.     if (!newProps.hasOwnProperty(key)){
  159.       dom[key] = '';
  160.     }
  161.   }
  162. }
  164. // 查找此虚拟DOM对应的真实DOM
  165. export function findDOM(vdom){
  166.   let { type } = vdom;
  167.   let dom;
  168.   if (typeof type === 'function'){ //如果是 类组件 或者 函数组件
  169.     //类组件render后，有可能还是还是个类组件或函数组件，所有要递归处理
  170.     dom = findDOM(vdom.oldRenderVdom);  
  171.   } else {  //原生组件
  172.     dom = vdom.dom;
  173.   }
  175.   return dom;
  176. }
  179. /** 比较新老虚拟DOM（dom-diff）
  180.  * 
  181.  * @param {*} container 当前组件挂载的父容器(父真实DOM节点)
  182.  * @param {*} oldVdom   上一次的虚拟DOM
  183.  * @param {*} newVdom 本次的虚拟DOM
  184.  */
  185. export function compareTwoVdom(container, oldVdom, newVdom, nextDOM){
  186.   // 如果老的虚拟DOM和新的虚拟DOM都是null
  187.   if (!oldVdom && !newVdom) return; 
  189.   // 老的有，新的没有 => 要刪除此节点
  190.   if (oldVdom && !newVdom){
  191.     let oldDOM = findDOM(oldVdom);  //先找到此虚拟DOM对应的真实DOM
  192.     if (oldDOM) container.removeChild(oldDOM);
  193.     if (oldVdom.classInstance && oldVdom.classInstance.componentWillUnmount){
  194.       oldVdom.classInstance.componentWillUnmount(); 
  195.     }
  196.     return;
  197.   }
  199.   // 老的没有，新的有 => 要新建DOM节点，并添加
  200.   if (!oldVdom && newVdom){
  201.     let newDOM = createDOM(newVdom, container);
  202.     if (nextDOM){
  203.       container.insertBefore(newDOM, nextDOM);  //如果有下一个弟弟节点，插到其前面
  204.     } else {
  205.       container.appendChild(newDOM);
  206.     }
  207.     newDOM.componentDidMount && newDOM.componentDidMount();
  208.     return newVdom;
  209.   }
  211.   // 新旧都有虚拟DOM，但是类型type不相同  => 直接替换节点
  212.   if (oldVdom && newVdom && oldVdom.type !== newVdom.type){
  213.     let oldDOM = findDOM(oldVdom);
  214.     let newDOM = createDOM(newVdom);
  215.     container.replaceChild(newDOM, oldDOM); //直接用新的真实DOM，替换掉老的真实DOM
  216.     if (oldVdom.classInstance && oldVdom.classInstance.componentWillUnmount){
  217.       oldVdom.classInstance.componentWillUnmount(); 
  218.     }
  219.     newDOM.componentDidMount && newDOM.componentDidMount();
  220.     return newVdom;
  221.   }
  223.   // 新旧都有虚拟DOM，并且类型type也相同
  224.   if (oldVdom && newVdom && oldVdom.type === newVdom.type){
  225.     deepCompare(container, oldVdom, newVdom);
  226.     return newVdom;
  227.   }
  228. }
  230. /** 新旧都有虚拟DOM，并且类型type也相同，进行深度的比较（dom-diff）
  231.  * 
  232.  * @param {*} oldVdom 老的虚拟DOM
  233.  * @param {*} newVdom 新的虚拟DOM
  234.  */
  235. function deepCompare(container, oldVdom, newVdom){
  236.   // 文本节点
  237.   if (oldVdom.type === REACT_TEXT){
  238.     let currentDOM = newVdom.dom = oldVdom.dom; //复用老组件的真实DOM节点，直接更换其文本
  239.     currentDOM.textContent = newVdom.props.content;
  241.   } else if (typeof oldVdom.type === 'string'){  //原生组件
  242.     let currentDOM = newVdom.dom = oldVdom.dom; //复用老组件的真实DOM
  243.     updateProps(currentDOM, oldVdom.props, newVdom.props);  //更新自己的属性
  244.     updateChildren(currentDOM, oldVdom.props.children, newVdom.props.children); //更新儿子们
  246.   } else if (typeof oldVdom.type === 'function'){
  247.     if (oldVdom.type.isReactComponent){  //老的和新的都是类组件，进行类组件更新
  248.       updateClassComponent(oldVdom, newVdom);
  249.     } else {  //老的和新的都是函数组件，进行函数组件更新
  250.       updateFunctionComponent(container, oldVdom, newVdom);
  251.     }
  252.   } else if (oldVdom.type === REACT_FRAGMENT){
  253.     updateChildren(container, oldVdom.props.children, newVdom.props.children); //更新儿子们
  254.   }
  255. }
  257. /** 递归儿子们，进行深度比较（dom-diff）
  258.  * 
  259.  * @param {*} container 父DOM节点
  260.  * @param {*} oldVChildren 老的儿子们
  261.  * @param {*} newVChildren 新的儿子们
  262.  */
  263. function updateChildren(container, oldVChildren, newVChildren){
  264.   // 因为children可能是对象，也可能是数组，为了方便按索引比较，全部格式化为数组
  265.   oldVChildren = Array.isArray(oldVChildren) ? oldVChildren : [oldVChildren];
  266.   newVChildren = Array.isArray(newVChildren) ? newVChildren : [newVChildren];
  267.   let maxLength = Math.max(oldVChildren.length, newVChildren.length);
  269.   for (let i=0; i<maxLength; i++){
  270.     // 在儿子里查找，大于当前索引的第一个兄弟
  271.     let nextVdom = oldVChildren.find((item, index) => index > i && item && item.dom);
  272.     compareTwoVdom(container, oldVChildren[i], newVChildren[i], nextVdom && nextVdom.dom);  //递归对比每一个儿子
  273.   }
  274. }
  276. // 如果老的虚拟DOM节点和新的虚拟DOM节点都是类组件的话，进行类组件更新（dom-diff）
  277. function updateClassComponent(oldVdom, newVdom){
  278.   let classInstance = newVdom.classInstance = oldVdom.classInstance;  //更新的时候，实例复用
  279.   newVdom.oldRenderVdom = oldVdom.oldRenderVdom;
  280.   if (classInstance.componentWillReceiveProps) classInstance.componentWillReceiveProps(); //组件将要接收到新的属性
  281.   classInstance.updater.emitUpdate(newVdom.props); //触发组件的更新，把新的属性传过来
  282. }
  284. // 如果老的虚拟DOM节点和新的虚拟DOM节点都是函数组件的话，进行函数组件更新（dom-diff）
  285. function updateFunctionComponent(container, oldVdom, newVdom){
  286.   // let container = findDOM(oldVdom).parentNode;
  287.   let { type, props } = newVdom;
  288.   let oldRenderVdom = oldVdom.oldRenderVdom;
  289.   let newRenderVdom = type(props);
  290.   newVdom.oldRenderVdom = newRenderVdom;
  291.   compareTwoVdom(container, oldRenderVdom, newRenderVdom);
  292. }
  294. const ReactDOM = {
  295.   render,
  296.   findDOM,
  297. }
  298. export default ReactDOM;

新的生命周期

React基础（源码篇） - 图8

实现getDerivedStateFromProps

src/Component.js

  1. // 更新器
  2. class Updater {
  3.   // 发布更新（一个组件不管是属性变了，还是状态变了，都会更新）
  4.   emitUpdate(nextProps){
  5.     if (nextProps || pendingStates.length > 0){  //如果有等待更新的状态对象
  6. +      shouldUpdate(classInstance, nextProps, this.getState(nextProps));
  7.     }
  8.   }
  9.   // 获取最新的state状态
  10.   getState(nextProps){
  11.     ...
  12.     pendingStates.length = 0; //state获取完后，清空 pendingStates 数组
  14. +   if (classInstance.constructor.getDerivedStateFromProps){
  15. +     let partialState = classInstance.constructor.getDerivedStateFromProps(nextProps, classInstance.state);
  16. +     if (partialState) state = {...state, ...partialState};
  17. +   }
  18.     return state;
  19.   }
  20. }
  22. class Component {
  23.     ...
  24.   // 一般来说，组件的属性和状态变化了才会更新组件，
  25.   // 如果属性和状态没变，也想更新组件，怎么做？调用
  26.   forceUpdate(){
  27.     let nextProps = this.props;
  28.     let nextState = this.state;
  29.     if (this.constructor.getDerivedStateFromProps){
  30.       let partialState = this.constructor.getDerivedStateFromProps(nextProps, nextState);
  31.       if (partialState){
  32.         nextState = {...nextState, ...partialState};
  33.       }
  34.     }
  35.     this.state = nextState;
  36.     this.updateComponent();
  37.   }
  38.   // 更新渲染
  39.   updateComponent(){}
  40. }

src/react-dom.js

  1. function mountClassComponent(vdom, container){
  2.   ...
  3.   classInstance.componentWillMount && classInstance.componentWillMount();
  5. +  if (type.getDerivedStateFromProps){
  6. +    let partialState = type.getDerivedStateFromProps(classInstance.props, classInstance.state);
  7. +    if (partialState){
  8. +      classInstance.state = {...classInstance.state, ...partialState};
  9. +    }
  10. +  }
  12.   const renderVdom = classInstance.render();  //调用实例方法render，返回要渲染的虚拟DOM对象
  13.   const dom = createDOM(renderVdom, container);  //根据虚拟DOM对象，返回真实的DOM对象
  14.   ...
  15. }

实现getSnapshotBeforeUpdate

src/index.js
  1. import React, { Component } from './react';
  2. import ReactDOM from './react-dom';
  4. let number = 0;
  5. class Counter extends Component {
  6.   refUl = React.createRef();
  7.   state = {
  8.     list: [],
  9.   }
  10.   // 被调用于render之后，可以读取但无法使用DOM的时候。
  11.   // 它使您的组件可以在可能更改之前从DOM捕获一些信息（例如滚动位置）。
  12.   // 此生命周期返回的任何值都将作为参数传递给componentDidUpdate()。
  13.   getSnapshotBeforeUpdate(){
  14.     return this.refUl.current.scrollHeight; // 拿到ul的真实dom，获取它的内容高度（渲染前）
  15.   }
  16.   componentDidUpdate(prevProps, prevState, prevScrollHeight){
  17.     let currentHeight = this.refUl.current.scrollHeight;  //ul当前的内容高度（渲染后）
  18.     console.log('本次ul增加的高度', currentHeight - prevScrollHeight);
  19.   }
  20.   handleClick = () => {
  21.     let list = this.state.list;
  22.     list.push(list.length);
  23.     this.setState({list});
  24.   }
  25.   render(){
  26.     return (
  27.       <div>
  28.         <button onClick={this.handleClick}>+</button>
  29.         <ul ref={this.refUl}>
  30.           {this.state.list.map((item, index) => (
  31.             <li key={index}>{index}</li>
  32.           ))}
  33.         </ul>
  34.       </div>
  35.     )
  36.   }
  37. }
  39. ReactDOM.render(<Counter />, document.getElementById('root'));

src/Component.js
  1. class Component {
  2.   updateComponent(){
  3.     let newRenderVdom = this.render();
  4.     let oldDom = findDOM(this.oldRenderVdom);
  5. +   let extraArgs = this.getSnapshotBeforeUpdate && this.getSnapshotBeforeUpdate();
  7.     // 深度比较新旧两个虚拟DOM
  8.     let currentRenderVdom = compareTwoVdom(oldDom.parentNode, this.oldRenderVdom, newRenderVdom);
  9.     this.oldRenderVdom = currentRenderVdom;
  10. +        this.componentDidUpdate && this.componentDidUpdate(this.prevProps, this.prevState, extraArgs);
  11.   }
  12. }

Context 上下文

src/react.js
  1. // 创建上下文
  2. export function createContext(initialValue){
  3.   let context = {Provider, Consumer};
  5.   // 提供者
  6.   function Provider(props){
  7.     context._currentValue = context._currentValue || initialValue;
  8.     // 保持 context._currentValue 的引用地址不要变，
  9.     // 这样父组件更新的时候，子组件 this.context 也会是最新的
  10.     Object.assign(context._currentValue, props.value);
  11.     return props.children;
  12.   }
  14.   // 消费者
  15.   function Consumer(props){
  16.     return props.children(context._currentValue);
  17.   }
  19.   return context;
  20. }
  22. const React = {
  23.   createContext,
  24. }
  26. export default React;

src/react-dom.js
  1. //把一个类型为 “自定义类组件” 的虚拟DOM转换成真实DOM并返回
  2. function mountClassComponent(vdom, container){
  3.   const { type, props, ref } = vdom; //解构类的属性和类的属性对象
  4.   const classInstance = new type(props);  //创建类的实例
  6. +  // 为类子组件绑定上下文
  7. +  if (type.contextType){
  8. +    classInstance.context = type.contextType._currentValue;
  9. +  }
  11.   classInstance.componentWillMount && classInstance.componentWillMount();
  12.      ...
  13. }

高阶组件

https://www.yuque.com/zhuchaoyang/wrif6k/we9kxl

cloneElement

demo 参见 基础篇 反向继承的demo

src/react.js
  1. /** 克隆
  2.  * 
  3.  * @param {*} oldElement 老虚拟DOM
  4.  * @param {*} newProps 新属性
  5.  * @param  {...any} newChildren 新的儿子们 
  6.  * @returns 新虚拟DOM
  7.  */
  8. export function cloneElement(oldElement, newProps, ...newChildren){
  9.   // 老儿子可能是 undefined、对象、数组
  10.   let oldChildren = oldElement.props && oldElement.props.children;
  11.   let children = [...(Array.isArray(oldChildren) ? oldChildren : [oldChildren]), ...newChildren]
  12.     .filter(item => item !== undefined).map(wrapToVdom);
  14.   if (children.length === 0){
  15.     children = undefined;
  16.   } else if (children.length === 1){
  17.     children = children[0];
  18.   }
  20.   let props = {...oldElement.props, ...newProps, children};
  21.   return {...oldElement, props};
  22. }
  24. const React = {
  25.   cloneElement,
  26. }
  27. export default React;

shouldComponentUpdate 优化

实现PureComponent、memo

src/Component.js
  1. export class PureComponent extends Component {
  2.   // 重写了此方法，只有状态或者属性变化了才会进行更新；否则，不更新。
  3.   shouldComponentUpdate(nextProps, nextState){
  4.     return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
  5.   }
  6. }
  8. /** 浅比较 obj1 和 obj2 是否相等
  9.  * 只要内存地址一样，就认为是相等的，不一样就不相等
  10.  * @param {*} obj1 
  11.  * @param {*} obj2 
  12.  * @returns 
  13.  */
  14. function shallowEqual(obj1, obj2){
  15.   // 如果引用地址一样，就相等，不关心属性变没变
  16.   if (obj1 === obj2) return true;
  17.   // 任何一方不是对象或者不是null，也不相等
  18.   if (typeof obj1 !== 'object' || obj1 === null || typeof obj2 !== 'object' || obj2 === null) return false;
  20.   // 属性的数量不相等，也不相等
  21.   let keys1 = Object.keys(obj1);
  22.   let keys2 = Object.keys(obj2);
  23.   if (keys1.length !== keys2.length) return false;
  25.   for (let key of keys1){
  26.     if (!obj2.hasOwnProperty(key) || obj1[key] !== obj2[key]) return false;
  27.   }
  29.   return true;
  30. }

src/react.js
  1. // export { Component, PureComponent } from './Component'
  2. import { Component, PureComponent } from './Component'
  3. export { Component, PureComponent };
  5. // 返回组件要有一个功能：属性变了，重新渲染；属性不变，不更新
  6. export function memo(FunctionComponent){
  7.   return class extends PureComponent{
  8.     render(){
  9.       return <FunctionComponent {...this.props}/>
  10.     }
  11.   }
  12. }
  14. const React = {
  15.   Component,
  16.   PureComponent,
  17.   memo,
  18. }
  19. export default React;