react 学习(三) 组件更新

// src/index.js

class Counter extends React.Component {
  constructor(props) {
    super(props);
    // 类的构造函数中 唯一给 state 赋值的地方
    this.state = {
      number: 0,
    };
  }

  handleClick = () => {
    // 明显 setState 是继承来的
    this.setState({
      number: ++this.state.number,
    });
  };
  render() {
    return (
      <div>
        <p>{this.props.title}</p>
        <p>{this.state.number}</p>
        <button onClick={this.handleClick}>plus</button>
      </div>
    );
  }
}
ReactDOM.render(<Counter title="加法" />, document.getElementById("root"));

// src/Component.js
export class Component {
  constructor(props) {
    // react 的实例单独注册了一个更新器，回来统一处理 state，类似写函数嵌套多了，把不同功能单独提出去
    this.updater = new Updater(this) // 把组件实例传入
  }
  
  setState(partialState) {
    // 我们可以写多个 setState 方法，react 会统一处理，所以很明显使用一个栈存储的
    this.updater.addState(partialState)
  }
}

class Updater{
  constructor(classInstance) {
    this.classInstance = classInstance
    this.pendingStates = []
  }
  addState(partialState) {
    // 状态存储
    this.pendingStates.push(partialState)
    
    // 触发更新
    this.emitUpdate()
  }
  
  emitUpdate（) {
    this.updaetComponent()
  }
  // 组件更新原理
  //1.计算新的 state
  //2.重新执行render
  //3.得到新的虚拟dom，真实dom
  //4.覆盖重新挂载
  updaetComponent() {
    const {calssInstance, pendingStates}  = this
    if (pendingStates.length) {
      // 获取新的状态
      let newState = this.getState()
      // 查看是否更新
      showUpdate(classInstance, newState)
    }
  }
  getState() {
    const {classInstance, pendingStates} = this
    // 得到老状态
    let {state} = classInstance
    // 合并状态
    pendingStates.forEach(nextState => {
      state = {
        ...state,
        ...nextState
      }
    })
    // 清空
    pendingStates.length = []
    return state
  }
}

function showUpdate(classInstance, newState) {
  classInstace.state = newState // 用新的状态 直接覆盖组件实例的状态
  classInstance.forceUpadte() // 强制更新， 此方法在父组件上
}

// Components.js Component 类
// 这里的逻辑是 获取老的真实dom，获取新的虚拟dom 生成的真实dom，使用 replaceChild 方法，用新的dom替换旧的真实dom
forceUpdate() {
  let oldRenderVdom = this.oldRenderVdom
  let oldDOM = finDOM(oldRenderVdom) // 根据虚拟 dom 获取真实dom
  let newRenderVdom = this.render()
  compareTowVdom(oldDOM.parentNode, oldDOM, newRenderVdom)
  this.oldRenderVdom = newRenderVdom
}

// react-dom.js
 function createDOM(vdom) {
   ...
   vdom.dom = dom // 我们把得到的真实 dom，添加到虚拟 dom 对象上
   ...
 }
 
// 函数组件    babel 把属性转为 props 对像
function mountFunctionComponent(vdom) {
  const { type, props } = vdom;
  // 函数式组件 type 是个 函数  返回虚拟函数
  let renderVdom = type(props);
  // 把旧的 渲染的虚拟dom 存起来   ///////////// 看这里
  vdom.oldRenderVdom = renderVdom;

  return createDOM(renderVdom);
}

// 类组件
function mountClassComponent(vdom) {
  const { type, props } = vdom;
  const classInstance = new type(props);
  const renderVdom = classInstance.render();
  // 把旧的 渲染的虚拟dom 存储  ///////////// 看这里
  classInstance.oldRenderVdom = vdom.oldRenderVdom = renderVdom;
  return createDOM(renderVdom);
} 

// react-dom.js
function findDOM(vdom) {
  if (!vdom) return null
  if (vdom.dom) return vdom.dom // 我们在上面 createDOM 中做了绑定
  // 如果没有虚拟dom
  let renderVdom = vdom.oldRenderVdom
  return findDOM(renderVdom)
}

// react-dom.js
function compareTwoVdom(parentDOM, oldDOM, newVdom) {
  let newDOM = createDOM(newVdom) // 我们执行 render 得到的新的虚拟 dom
  parentDOM.replace(newDOM, oldDOM) // 完成替换
}

// react-dom.js
function updateProps() {
  ....
  if (/^on[A-Z].*/.test(key)) {
    // 转成 js 原生的小写
    dom[key.toLowerCase()] = newProps[key]
  }
  ...
}