摘要：系列系列簡(jiǎn)單模擬語法一系列合成事件與二系列算法實(shí)現(xiàn)分析三系列從到再到四系列與部分源碼解析五系列從使用了解的各種使用方案六前言我們先不講什么語法原理先根據(jù)效果強(qiáng)行模擬語法使用實(shí)現(xiàn)一個(gè)簡(jiǎn)易版的第一步我們先用類

React系列 --- 簡(jiǎn)單模擬語法(一)
React系列 --- Jsx, 合成事件與Refs(二)
React系列 --- virtualdom diff算法實(shí)現(xiàn)分析(三)
React系列 --- 從Mixin到HOC再到HOOKS(四)
React系列 --- createElement, ReactElement與Component部分源碼解析(五)
React系列 --- 從使用React了解Css的各種使用方案(六)

我們先不講什么語法原理,先根據(jù)API效果強(qiáng)行模擬語法使用,實(shí)現(xiàn)一個(gè)簡(jiǎn)易版的React.

第一步我們先用類創(chuàng)建一個(gè)元素返回,并且綁定點(diǎn)擊事件,代碼如下,可以正常看到一個(gè)按鈕出現(xiàn)了.

class AddButton {
  createDOM(domString) {
    const div = document.createElement("div");
    div.innerHTML = domString;
    return div;
  }

  render() {
    this.dom = this.createDOM(`0`);
    this.dom.addEventListener("click", () => console.log("click"), false);
    return this.dom;
  }
}

document.body.appendChild(new AddButton().render());

實(shí)現(xiàn)類狀態(tài)和修改狀態(tài)方法

class AddButton {
  constructor() {
    this.state = { num: 0 };
  }

  createDOM(domString) {
    const div = document.createElement("div");
    div.innerHTML = domString;
    return div;
  }

  setState(state) {
    this.state = state;
    this.dom = this.render();
  }

  handleAdd() {
    const num = this.state.num + 1;
    this.setState({
      num: num
    });
  }

  render() {
    this.dom = this.createDOM(`${this.state.num}`);
    this.dom.addEventListener("click", () => this.handleAdd(), false);
    console.log(this.dom);
    return this.dom;
  }
}

document.body.appendChild(new AddButton().render());

渲染之后看到this dom輸出已經(jīng)發(fā)現(xiàn)改變了,但是視圖并沒有渲染,那是因?yàn)檫@是結(jié)尾一次性插入,下面就渲染視圖這塊往下走

我們現(xiàn)在把插入數(shù)據(jù)的操作內(nèi)置到class里面,新增一個(gè)方法插入新元素移除舊元素.

class AddButton {
  constructor() {
    this.state = { num: 0 };
  }

  createDOM(domString) {
    const div = document.createElement("div");
    div.innerHTML = domString;
    return div;
  }

  changeDom() {
    const oDom = this.dom;
    this.dom = this.render();
    document.body.insertBefore(this.dom, oDom);
    document.body.removeChild(oDom);
  }

  setState(state) {
    this.state = state;
    this.changeDom();
  }

  handleAdd() {
    const num = this.state.num + 1;
    this.setState({
      num: num
    });
  }

  render() {
    this.dom = this.createDOM(`${this.state.num}`);
    this.dom.addEventListener("click", () => this.handleAdd(), false);
    return this.dom;
  }
}

document.body.appendChild(new AddButton().render());

現(xiàn)在效果雖然實(shí)現(xiàn),但是還是得開頭手動(dòng)把元素插入視圖

我們先將一些共有方法提取到一個(gè)多帶帶類

class Component {
  constructor() {}

  createDOM(domString) {
    const div = document.createElement("div");
    div.innerHTML = domString;
    return div;
  }

  changeDom() {
    const oDom = this.dom;
    this.dom = this._render();
    this.wrapper.insertBefore(this.dom, oDom);
    this.wrapper.removeChild(oDom);
  }

  setState(state) {
    this.state = state;
    this.changeDom();
  }

  _render(wrapper) {
    if (wrapper) this.wrapper = wrapper;
    this.dom = this.createDOM(this.render());
    this.dom.addEventListener("click", () => this.handleAdd(), false);
    return this.dom;
  }
}

然后組件只需要直接繼承Component然后處理自己邏輯即可

class AddButton extends Component {
  constructor() {
    super();
    this.state = { num: 0 };
  }

  handleAdd() {
    const num = this.state.num + 1;
    this.setState({
      num: num
    });
  }

  render() {
    return `${this.state.num}`;
  }
}

還有一個(gè)問題是點(diǎn)擊事件暫時(shí)還是耦合進(jìn)Component里面,先略過不提.

大家都知道React會(huì)提供這么一個(gè)方法將組件插入一個(gè)指定元素,我們直接模擬

const ReactDom = {
  render(component, wrapper) {
    wrapper.appendChild(component._render(wrapper));
  }
};

ReactDom.render(new AddButton(), document.getElementById("root"));

還有一個(gè)重要的傳輸數(shù)據(jù)實(shí)現(xiàn)如下

const ReactDom = {
  render(component, wrapper) {
    wrapper.appendChild(component._render(wrapper))
  }
}

class Component {
  constructor(props = {}) {
    this.props = props
  }

  createDOM(domString) {
    const div = document.createElement("div")
    div.innerHTML = domString
    return div
  }

  changeDom() {
    const oDom = this.dom
    this.dom = this._render()
    this.wrapper.insertBefore(this.dom, oDom)
    this.wrapper.removeChild(oDom)
  }

  setState(state) {
    this.state = state
    this.changeDom()
  }

  _render(wrapper) {
    if (wrapper) this.wrapper = wrapper
    this.dom = this.createDOM(this.render())
    this.dom.addEventListener("click", () => this.handleAdd(), false)
    return this.dom
  }
}

class AddButton extends Component {
  constructor(props) {
    super(props)
    this.state = { num: 0 }
  }

  handleAdd() {
    const num = this.state.num + 1
    this.setState({
      num: num
    })
  }

  render() {
    console.log(this.props)
    return `${this.state.num}`
  }
}

ReactDom.render(new AddButton({a:1}), document.getElementById("root"))

至此,拋開實(shí)際思路不說,我們已經(jīng)簡(jiǎn)單模擬出來React的一般語法實(shí)現(xiàn)了.