写在开首
从新完成一个简易版React（二）地点：https://segmentfault.com/a/11…
在上一节，我们的react已具有了衬着功用。
在这一节我们将偏重完成它的更新，说到更新，人人能够都邑想到React的diff算法，它能够说是React机能高效的保证，同时也是最神奇，最难明白的部份（个人以为），想当初我也是看了许多文章，敲了N次代码，调试了几十遍，才总算明白了它的也许。在这也算是把我的明白论述出来。
进入正题
一样，我们会完成三种ReactComponent的update要领。不过在这之前，我们先想一想，该怎样触发React的更新呢？没错，就是setState要领。
// 一切自定义组件的父类
class Component {
constructor(props) {
this.props = props
}
setState(newState) {
this._reactInternalInstance.updateComponent(null, newState)
}
}
//代码地点：src/react/Component.js这里的reactInternalInstance就是我们在衬着ReactCompositeComponent时保存下的本身的实例，经由过程它挪用了ReactCompositeComponent的update要领，接下来，我们就先完成这个update要领。
ReactCompositeComponent
这里的update要领同mount有点相似，都是挪用生命周期和render要领，先上代码：
class ReactCompositeComponent extends ReactComponent {
constructor(element) {
super(element)
// 寄存对应的组件实例
this._instance = null
this._renderedComponent = null
}
mountComponent(rootId) {
//内容略
}
// 更新
updateComponent(nextVDom, newState) {
// 假如有新的vDom,就运用新的
this._vDom = nextVDom || this._vDom
const inst = this._instance
// 猎取新的state,props
const nextState = { ...inst.state, ...newState }
const nextProps = this._vDom.props
// 推断shouldComponentUpdate
if (inst.shouldComponentUpdate && (inst.shouldComponentUpdate(nextProps, nextState) === false)) return
inst.componentWillUpdate && inst.componentWillUpdate(nextProps, nextState)
// 变动state,props
inst.state = nextState
inst.props = nextProps
const prevComponent = this._renderedComponent
// 猎取render新旧的vDom
const prevRenderVDom = prevComponent._vDom
const nextRenderVDom = inst.render()
// 推断是须要更新照样从新衬着
if (shouldUpdateReactComponent(prevRenderVDom, nextRenderVDom)) {
// 更新
prevComponent.updateComponent(nextRenderVDom)
inst.componentDidUpdate && inst.componentDidUpdate()
} else {
// 从新衬着
this._renderedComponent = instantiateReactComponent(nextRenderVDom)
// 从新天生对应的元素内容
const nextMarkUp = this._renderedComponent.mountComponent(this._rootNodeId)
// 替代悉数节点
$(`[data-reactid="${this._rootNodeId}"]`).replaceWith(nextMarkUp)
}
}
}
//代码地点：src/react/component/ReactCompositeComponent.js有两点要申明：
- 熟习React的都晓得，许多时刻组件的更新，vDom并没有变化，我们能够经由过程shouldComponentUpdate这个生命周期来优化这点，当shouldComponentUpdate为false时，直接return，不实行下面的代码。
- 当挪用render猎取到新的vDom时，将会比较新旧的vDom范例是不是雷同，这也属于diff算法优化的一部份，假如范例雷同，则实行更新，反之，就从新衬着。
// 推断是更新照样衬着
function shouldUpdateReactComponent(prevVDom, nextVDom) {
if (prevVDom != null && nextVDom != null) {
const prevType = typeof prevVDom
const nextType = typeof nextVDom
if (prevType === 'string' || prevType === 'number') {
return nextType === 'string' || nextType === 'number'
} else {
return nextType === 'object' && prevVDom.type === nextVDom.type && prevVDom.key === nextVDom.key
}
}
}
//代码地点：src/react/component/util.js注重，这里我们运用到了key，当type雷同时运用key能够疾速正确得出两个vDom是不是雷同，这是为何React请求我们在轮回衬着时必需增添key这个props。
ReactTextComponent
ReactTextComponent的update要领异常简朴，推断新旧文本是不是雷同，差别则更新内容，直接贴代码：
class ReactTextComponent extends ReactComponent {
mountComponent(rootId) {
//省略
}
// 更新
updateComponent(nextVDom) {
const nextText = '' + nextVDom
if (nextText !== this._vDom) {
this._vDom = nextText
}
// 替代悉数节点
$(`[data-reactid="${this._rootNodeId}"]`).html(this._vDom)
}
// 代码地点：src/react/component/ReactTextComponent.js
}ReactDomComponent
ReactDomComponent的update最庞杂，能够说diff的中心都在这里，本文的重心也就放在这。
悉数update分为两块，props的更新和children的更新。
class ReactDomComponent extends ReactComponent {
mountComponent(rootId) {
//省略
}
// 更新
updateComponent(nextVDom) {
const lastProps = this._vDom.props
const nextProps = nextVDom.props
this._vDom = nextVDom
// 更新属性
this._updateDOMProperties(lastProps, nextProps)
// 再更新子节点
this._updateDOMChildren(nextVDom.props.children)
}
// 代码地点：src/react/component/ReactDomComponent.js
}props的更新异常简朴，不过就是遍历新旧props，删除不在新props里的老props，增添不在老props里的新props，更新新旧都有的props，事宜特别处置惩罚。
_updateDOMProperties(lastProps, nextProps) {
let propKey = ''
// 遍历，删除已不在新属性鸠合里的老属性
for (propKey in lastProps) {
// 属性在原型上或许新属性里有，直接跳过
if (nextProps.hasOwnProperty(propKey) || !lastProps.hasOwnProperty(propKey)) {
continue
}
// 关于事宜等特别属性，须要零丁处置惩罚
if (/^on[A-Za-z]/.test(propKey)) {
const eventType = propKey.replace('on', '')
// 针对当前的节点作废事宜代办
$(document).undelegate(`[data-reactid="${this._rootNodeId}"]`, eventType, lastProps[propKey])
continue
}
}
// 关于新的属性，须要写到dom节点上
for (propKey in nextProps) {
// 更新事宜属性
if (/^on[A-Za-z]/.test(propKey)) {
var eventType = propKey.replace('on', '')
// 之前假如已有，须要先去掉
lastProps[propKey] && $(document).undelegate(`[data-reactid="${this._rootNodeId}"]`, eventType, lastProps[propKey])
// 针对当前的节点增添事宜代办
$(document).delegate(`[data-reactid="${this._rootNodeId}"]`, `${eventType}.${this._rootNodeId}`, nextProps[propKey])
continue
}
if (propKey === 'children') continue
// 更新一般属性
$(`[data-reactid="${this._rootNodeId}"]`).prop(propKey, nextProps[propKey])
}
}
// 代码地点：src/react/component/ReactDomComponent.jschildren的更新则相对庞杂了许多，陈屹先生的《深切React手艺栈》中提到，diff算法分为3块，分别是
- tree diff
- component diff
- element diff
上文中的shouldUpdateReactComponent就属于component diff，接下来，让我们依据这三种diff完成updateChildren。
// 全局的更新深度标识，用来剖断触发patch的机遇
let updateDepth = 0
// 全局的更新行列
let diffQueue = []
_updateDOMChildren(nextChildVDoms) {
updateDepth++
// diff用来递归查找差别，组装差别对象，并增添到diffQueue中
this._diff(diffQueue, nextChildVDoms)
updateDepth--
if (updateDepth === 0) {
// 详细的dom衬着
this._patch(diffQueue)
diffQueue = []
}这里经由过程updateDepth对vDom树举行层级掌握，只会对雷同层级的DOM节点举行比较，只有当一棵DOM树悉数遍历完，才会挪用patch处置惩罚差别。也就是所谓的tree diff。
确保了同条理后，我们要完成_diff要领。
已衬着过的子ReactComponents在这里是数组，我们要遍历出内里的vDom举行比较，这里就牵涉到上文中的key，在有key时，我们优先用key来猎取vDom，所以，我们起首遍历数组，将其转为map(这里先用object替代，以后会变动成es6的map)，假如有key值的，就用key值作标识，无key的，就用index。
下面是array到map的代码：
// 将children数组转化为map
export function arrayToMap(array) {
array = array || []
const childMap = {}
array.forEach((item, index) => {
const name = item && item._vDom && item._vDom.key ? item._vDom.key : index.toString(36)
childMap[name] = item
})
return childMap
}部份diff要领:
// 将之前子节点的component数组转化为map
const prevChildComponents = arrayToMap(this._renderedChildComponents)
// 天生新的子节点的component对象鸠合
const nextChildComponents = generateComponentsMap(prevChildComponents, nextChildVDoms)将ReactComponent数组转化为map后，用老的ReactComponents鸠合和新vDoms数组天生新的ReactComponents鸠合，这里会运用shouldUpdateReactComponent举行component diff，假如雷同，则直接更新即可，反之，就从新天生ReactComponent
/**
* 用来天生子节点的component
* 假如是更新，就会继承运用之前的component，挪用对应的updateComponent
* 假如是新的节点，就会从新天生一个新的componentInstance
*/
function generateComponentsMap(prevChildComponents, nextChildVDoms = []) {
const nextChildComponents = {}
nextChildVDoms.forEach((item, index) => {
const name = item.key ? item.key : index.toString(36)
const prevChildComponent = prevChildComponents && prevChildComponents[name]
const prevVdom = prevChildComponent && prevChildComponent._vDom
const nextVdom = item
// 推断是更新照样从新衬着
if (shouldUpdateReactComponent(prevVdom, nextVdom)) {
// 更新的话直接递归挪用子节点的updateComponent
prevChildComponent.updateComponent(nextVdom)
nextChildComponents[name] = prevChildComponent
} else {
// 从新衬着的话从新天生component
const nextChildComponent = instantiateReactComponent(nextVdom)
nextChildComponents[name] = nextChildComponent
}
})
return nextChildComponents
}阅历了以上两步，我们已获得了新旧同层级的ReactComponents鸠合。须要做的，只是遍历这两个鸠合，举行比较，同属性的更新一样，举行挪动，新增，和删除，固然，在这个过程当中，我会包括我们的第三种优化，element diff。它的战略是如许的：起首对新鸠合的节点举行轮回遍历，经由过程唯一标识能够推断新老鸠合中是不是存在雷同的节点，假如存在雷同节点，则举行挪动操纵，但在挪动前须要将当前节点在老鸠合中的位置与 lastIndex 举行比较，if (prevChildComponent._mountIndex < lastIndex)，则举行节点挪动操纵，否则不实行该操纵。这是一种递次优化手腕，lastIndex 一直在更新，示意接见过的节点在老鸠合中最右的位置（即最大的位置），假如新鸠合中当前接见的节点比 lastIndex 大，申明当前接见节点在老鸠合中就比上一个节点位置靠后，则该节点不会影响其他节点的位置，因而不必增添到差别行列中，即不实行挪动操纵，只有当接见的节点比 lastIndex 小时，才须要举行挪动操纵。
上完全的diff要领代码：
// 差别更新的几种范例
const UPDATE_TYPES = {
MOVE_EXISTING: 1,
REMOVE_NODE: 2,
INSERT_MARKUP: 3
}
// 追踪差别
_diff(diffQueue, nextChildVDoms) {
// 将之前子节点的component数组转化为map
const prevChildComponents = arrayToMap(this._renderedChildComponents)
// 天生新的子节点的component对象鸠合
const nextChildComponents = generateComponentsMap(prevChildComponents, nextChildVDoms)
// 从新复制_renderChildComponents
this._renderedChildComponents = []
for (let name in nextChildComponents) {
nextChildComponents.hasOwnProperty(name) && this._renderedChildComponents.push(nextChildComponents[name])
}
let lastIndex = 0 // 代表接见的末了一次老的鸠合位置
let nextIndex = 0 // 代表抵达的新的节点的index
// 经由过程对照两个鸠合的差别，将差别节点增添到行列中
for (let name in nextChildComponents) {
if (!nextChildComponents.hasOwnProperty(name)) continue
const prevChildComponent = prevChildComponents && prevChildComponents[name]
const nextChildComponent = nextChildComponents[name]
// 雷同的话，申明是运用的同一个component，须要挪动
if (prevChildComponent === nextChildComponent) {
// 增添差别对象，范例：MOVE_EXISTING
prevChildComponent._mountIndex < lastIndex && diffQueue.push({
parentId: this._rootNodeId,
parentNode: $(`[data-reactid="${this._rootNodeId}"]`),
type: UPDATE_TYPES.MOVE_EXISTING,
fromIndex: prevChildComponent._mountIndex,
toIndex: nextIndex
})
lastIndex = Math.max(prevChildComponent._mountIndex, lastIndex)
} else {
// 假如不雷同，申明是新增的节点
// 假如老的component在，须要把老的component删除
if (prevChildComponent) {
diffQueue.push({
parentId: this._rootNodeId,
parentNode: $(`[data-reactid="${this._rootNodeId}"]`),
type: UPDATE_TYPES.REMOVE_NODE,
fromIndex: prevChildComponent._mountIndex,
toIndex: null
})
// 去掉事宜监听
if (prevChildComponent._rootNodeId) {
$(document).undelegate(`.${prevChildComponent._rootNodeId}`)
}
lastIndex = Math.max(prevChildComponent._mountIndex, lastIndex)
}
// 新增添的节点
diffQueue.push({
parentId: this._rootNodeId,
parentNode: $(`[data-reactid="${this._rootNodeId}"]`),
type: UPDATE_TYPES.INSERT_MARKUP,
fromIndex: null,
toIndex: nextIndex,
markup: nextChildComponent.mountComponent(`${this._rootNodeId}.${name}`)
})
}
// 更新_mountIndex
nextChildComponent._mountIndex = nextIndex
nextIndex++
}
// 关于老的节点里有，新的节点里没有的，悉数删除
for (let name in prevChildComponents) {
const prevChildComponent = prevChildComponents[name]
if (prevChildComponents.hasOwnProperty(name) && !(nextChildComponents && nextChildComponents.hasOwnProperty(name))) {
diffQueue.push({
parentId: this._rootNodeId,
parentNode: $(`[data-reactid="${this._rootNodeId}"]`),
type: UPDATE_TYPES.REMOVE_NODE,
fromIndex: prevChildComponent._mountIndex,
toIndex: null
})
// 假如衬着过，去掉事宜监听
if (prevChildComponent._rootNodeId) {
$(document).undelegate(`.${prevChildComponent._rootNodeId}`)
}
}
}
}
// 代码地点：src/react/component/ReactDomCompoent.js挪用diff要领后，会回到tree diff那一步，当一整棵树遍历完后，就须要经由过程Patch将更新的内容衬着出来了，patch要领相对照较简朴，因为我们把更新的内容都放入了diffQueue中，只需遍历这个数组，依据差别的范例举行响应的操纵就行。
// 衬着
_patch(updates) {
// 处置惩罚挪动和删除的
updates.forEach(({ type, fromIndex, toIndex, parentNode, parentId, markup }) => {
const updatedChild = $(parentNode.children().get(fromIndex))
switch (type) {
case UPDATE_TYPES.INSERT_MARKUP:
insertChildAt(parentNode, $(markup), toIndex) // 插进去
break
case UPDATE_TYPES.MOVE_EXISTING:
deleteChild(updatedChild) // 删除
insertChildAt(parentNode, updatedChild, toIndex)
break
case UPDATE_TYPES.REMOVE_NODE:
deleteChild(updatedChild)
break
default:
break
}
})
}
// 代码地点：src/react/component/ReactDomComponent.js总结
以上，悉数简易版React就完成了，能够试着写些简朴的例子跑跑看了，是不是是异常有成就感呢？
总结下更新：
ReactCompositeComponent：担任挪用生命周期，经由过程component diff将更新都交给了子ReactComponet
ReactTextComponent：直接更新内容
ReactDomComponent：先更新props，在更新children，更新children分为三步，tree diff保证同层级比较，运用shouldUpdateReactComponent举行component diff,末了在element diff经由过程lastIndex递次优化
至此，悉数从新完成简易版React就完毕了，谢谢人人的寓目。
参考资料，谢谢几位先辈的分享：
https://www.cnblogs.com/sven3…
https://github.com/purplebamb…
陈屹 《深切React手艺栈》
