自己写一个 react 1.基础

Question

要想深入学习一个前端的框架/库，最好的方法是自己动手造个轮子，对于熟悉框架的内部原理很有帮助。造轮子一开始先不求生产能用，以自己的基础知识及大脑的第一反应先去实现，再去跟其他的实现进行对比，逐渐完善。

比如我想自己实现一个 react，那么就要从用法入手，例如这样
https://github.com/facebook/react/blob/183aefa51f5b7b18bde05dccdd417b8983d741d0/README.md#examples

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(
  <HelloMessage name="Taylor" />,
  document.getElementById('container')
);

首先我们要知道，上面的代码不能直接在浏览器运行，在浏览器运行的是经过 babel 转译的代码，我们可以去这里进行转译，转译之后的代码如下

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Taylor" }), document.getElementById('container'));

很明显，我们要实现

React.Component, React.createElement, ReactDOM.render

等 api

我的第一反应，Component，createElement 等的作用是做一个标记，以一个对象为基础，记录一个 dom 应该有的信息，比如标签名,属性,子元素等。（可能还有其他的一些信息，但有最基础的，就可以进行渲染了，我们先实现基础的）然后 render 就是利用上面的信息，以浏览器 api 进行渲染。

于是就有了第一版的 diyReact https://github.com/p2227/diyReact/blob/6ea38a16f9466df8b0beb61e48b0d6703fac119d/src/stage0-base.js

这里面提一下，在实现 render 的时候，我的第一反应是，构造一个容器 dom，再把 div 等元素塞进去，但是后来发现并不需要这样做，后面我会记录一下这个思考的过程。