从一段很简单的代码看 React源码

首先，我写一个很简单的组件，用React-dom渲染，源码如下，打一个断点

import React, {
    
    Component} from 'react';
import ReactDom from "react-dom"

debugger
class App extends Component {
    
    
  state = {
    
    
    c: 0
  }
  click(){
    
    
    this.setState({
    
    
      c: 100
    })
  }
  render() {
    
    
    return (
      <div>
        {
    
    this.state.c} <br/>
        <button onClick={
    
    this.click.bind(this)}>click me </button>
      </div>
    )
  }
}

ReactDom.render(<App name='app'/>, document.getElementById("root"))

webpack 打包后，我把代码优化了一下，通过这样看React的基本原理,我在node_modules 下的React包中的umd目录，拿到react和react-dom因为这样可以在浏览器端跑的，方便看源码，我把代码删减了许多不重要的代码之后，React的原理就呼之欲出了。。。


let _react = React
let _reactDom = reactDom
_react["default"] = React;
let createElement =  _react.createElement;


function App(_Component) {
    
    

  function App_() {
    
    
    let _this = this;
    // 一些控制、校验代码省略...
    _this.state = {
    
    c: 0};
    return _this;
  }

  // App 继承 React.Component
  _inherits(App_, _Component);

  // 绑定在原型上的方法，和传统写类一样  
  const protoProps = [{
    
    
    key: "click",
    value: function click() {
    
    
      this.setState({
    
    
        c: 100
      });
    }
  }, {
    
    
    key: "render",
    value: function render() {
    
    
      return createElement("div", null, this.state.c, " ",
        createElement("br", null),
        createElement("button", {
    
    
          onClick: this.click.bind(this)
        }, "click me ")
      );
    }
  }];

  // 把 protoProps 绑定到 App_.prototype 上
  // 得到结果 App_.prototype.click = function()...
  // 得到结果 App_.prototype.render = function render()...
  _createClass(App_, protoProps);

  return App_;
}

// 这是一个高阶函数，返回一个继承自Component的函数，为什么这么写，因为还有PureComponent之类，还可以这么写 app = App(_react.PureComponent);
app = App(_react.Component);

//debugger
_reactDom.render(
  // createElement react 创建vdom的核心方法，第一个参数可以是自定义的组件，也可以是 div p 这种
  // createElement 三个参数 type props children
  // app就是处理之后的App_方法
  createElement(app, {
    
    name: 'app'}),
  document.getElementById("root")
);

从一段很简单的代码看 React源码

猜你喜欢