学习并实现react4

实现生命周期

生命周期介绍

componentWillMount // 组件挂载前
componentDidMount // 组件挂载后
componentWillReceiveProps // 组件props 变化时
shouldComponentUpdate //  (props / state) 变化时
componentWillUpdate // 组件更新前
componentDidUpdate // 组件更新后
componentWillUnmount // 组件即将销毁

React 生命周期图

React 子组件在父组件下的生命周期流程

实现 componentWillMount, componentDidMount, componentDidUpdate

componentWillMount

在组件实例新建时执行

componentDidMount、componentDidUpdate

相同点：组件render 执行完成后执行的
不同点：新建的实例render 后执行componentDidMount，已创建的实例组件再次render 则调用componentDidUpdate

function render(vnode, parent, comp, olddomOrComp, myIndex) {
  ...
  if (typeof vnode.type === 'function') {
    let func = vnode.type
    let inst
    if (olddomOrComp && olddomOrComp instanceof func) {
      inst = olddomOrComp
      inst.props = vnode.props
    } else {
      inst = new func(vnode.props)
      // 新建组件实例执行 componentWillMount
      inst.componentWillMount && inst.componentWillMount.call()

      if (comp) comp.__rendered = inst
      else parent.__rendered[myIndex] = inst // dom 渲染
    }

    let innerVNode = inst.render()
    render(innerVNode, parent, inst, inst.__rendered, myIndex)

    // render 后进行判断调用 componentDidUpdate componentDidMount
    if (olddomOrComp && olddomOrComp instanceof func) {
      inst.componentDidUpdate && inst.componentDidUpdate.call()
    } else {
      inst.componentDidMount && inst.componentDidMount.call()
    }
  }
}

实现 componentWillReceiveProps， shouldComponentUpdate， componentWillUpdate

componentWillReceiveProps

componentWillReceiveProps(nextProps) {
  console.log(nextProps) // 变化后的 props
  console.log(this.props) // 变化前的 props
}

componentWillReceiveProps 具有一个 nextProps 参数，表示改变后的新props，而在componentWillReceiveProps 内执行的 this.props 还是指向未改变的 oldProps

if (typeof vnode.type === 'function') {
  let func = vnode.type
  let inst
  if (olddomOrComp && olddomOrComp instanceof func) {
    inst = olddomOrComp
    // 父组件改变时 inst.props 改变前 调用 componentWillReceiveProps
    inst.componentWillReceiveProps && inst.componentWillReceiveProps(vnode.props)
    
    inst.props = vnode.props
  } else {
    inst = new func(vnode.props)
    inst.componentWillMount && inst.componentWillMount.call()

    if (comp) comp.__rendered = inst
    else parent.__rendered[myIndex] = inst // dom 渲染
  }

  let innerVNode = inst.render()
  render(innerVNode, parent, inst, inst.__rendered, myIndex)
  
  if (olddomOrComp && olddomOrComp instanceof func) {
    inst.componentDidUpdate && inst.componentDidUpdate.call()
  } else {
    inst.componentDidMount && inst.componentDidMount.call()
  }
}

shouldComponentUpdate / componentWillUpdate

shouldComponentUpdate(nextProps, nextState) {
  return boolean
}
componentWillUpdate(nextProps, nextState) {}

组件setState 或props 后决定组件是否更新，返回一个 true 或 false 通知组件是否执行 componentWillUpdate - render - componentDidUpdate, 组件不存在shouldComponentUpdate 则直接更新

componentWillUpdate 只有当shouldComponentUpdate 返回值是true 时才会调用

// render.js 父组件props 改变时
  if (typeof vnode.type === 'function') {
    let func = vnode.type
    let inst
    if (olddomOrComp && olddomOrComp instanceof func) {
      inst = olddomOrComp
      inst.componentWillReceiveProps && inst.componentWillReceiveProps(vnode.props)

      let shouldUpdate // ture or false
      if (inst.shouldComponentUpdate) {
        shouldUpdate = inst.shouldComponentUpdate(vnode.props, olddomOrComp.state) // 进行比较
      } else {
        // 组件实例不存在shouldComponentUpdate 为true
        shouldUpdate = true
      }

      // 这里调用componentWillUpdate
      shoudUpdate && inst.componentWillUpdate && inst.componentWillUpdate(inst.props, olddomOrComp.state)
      inst.props = vnode.props
      if (!shouldUpdate) return // 无需更新时阻止组件 render
    } else {
      inst = new func(vnode.props)
      inst.componentWillMount && inst.componentWillMount.call()

      if (comp) comp.__rendered = inst
      else parent.__rendered[myIndex] = inst // dom 渲染
    }

    let innerVNode = inst.render()
    render(innerVNode, parent, inst, inst.__rendered, myIndex)

    if (olddomOrComp && olddomOrComp instanceof func) {
      inst.componentDidUpdate && inst.componentDidUpdate.call()
    } else {
      inst.componentDidMount && inst.componentDidMount.call()
    }
  }

// component.js 当组件本身调用 setState
class Component {
  constructor(props) {
    this.props = props
  }

  setState(state) {
    setTimeout(() => {
      let shouldUpdate
      if (this.shouldComponentUpdate) { // state 改变时
        shouldUpdate = this.shouldComonentUpdate(this.props, state)
      } else shouldUpdate = true

      this.state = state
      if (!shouldUpdate) return // 判断是否组织render

      const vnode = this.render()
      let olddom = getDOM(this) // 获取渲染此实例的 olddom
      const myIndex = getDOMIndex(olddom)
      render(vnode, olddom.parentNode, this.__rendered, myIndex)
      this.componentDidUpdate && this.componentDidUpdate.call() // 最后执行componentDidUpdate 
    }, 0)
  }
}

componentWillUnmount

componentWillUnmount 调用的场景
1组件实例销毁时
2组件实例不被复用时
3包裹组件的dom 不被复用时 <div><Comp /></div>

function recoveryComp(comp) {
  if (comp instanceof Component) {
    comp.componentWillUnmount && comp.componentWillUnmount.call()
    recoveryComp(comp.__rendered)
  } else if (comp.__rendered instanceof Array) { // 包裹的dom，<div> / <span>
    comp.__rendered.forEach(el => recoveryComp(el))
  } else return // 文本节点
}

recoveryComp 对传入的参数进行判断

当为组件实例时调用 componentWillUnmount 然后递归调用 comp.__rendered

当comp.__rendered 为数组时comp 为dom 节点，对__rendered 里的各元素进行 recoveryComp(el)

最后如果是文本节点则不操作

function diffDOM(vnode, parent, comp, olddom) {
  const { onlyInLeft, onlyInRight, bothIn } = diffObject(vnode.props, olddom.__vnode.props)
  setAttrs(olddom, onlyInLeft) // 添加新属性
  removeAttrs(olddom, onlyInRight) // 删除旧属性
  diffAttrs(olddom, bothIn) // 比较且更新新旧属性的不同

  const willRemoveArr = olddom.__rendered.slice(vnode.children.length) // 将要删除的 dom
  const renderedArr = olddom.__rendered.slice(0, vnode.children.length)

  olddom.__rendered = renderedArr
  for (let i = 0; i < vnode.children.length; i++) {
    // 顺序固定，有缺点，原来是replaceChild，现在对dom 或 text 节点进行重新render
    _render(vnode.children[i], olddom, null, renderedArr[i], i)
  }

  willRemoveArr.forEach(el => {
    recoveryComp(el) // 当组件不被复用时进行 调用recoveryComp
    olddom.removeChild(getDOM(el))
  })

  olddom.__vnode = vnode // 不忘重新标记
}

现在我们把生命周期都加入了。

首次挂载到根节点时

1 2	// document.getElementById('app') dom 节点也需要初始化__rendered 和 myIndex render(<App />, document.getElementById('app'))

export function render(vnode, parent) {
  parent.__rendered = [] // 为 document.getElementById('root') 初始化__rendered
  _render(vnode, parent, null, null, 0)
}

function _render(vnode, parent, comp, olddomOrComp, myIndex) {
  ...
}