摘要：本系列文章在实现一个的同时理顺框架的主干内容虚拟组件生命周期算法从到实现系列和从到实现系列组件和生命周期先来回顾的生命周期，用流程图表示如下该流程图比较清晰地呈现了的生命周期。它们的目的都是降低空间复杂度。
本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/...)
从 0 到 1 实现 React 系列 —— JSX 和 Virtual DOM
从 0 到 1 实现 React 系列 —— 组件和 state|props
生命周期先来回顾 React 的生命周期，用流程图表示如下：
该流程图比较清晰地呈现了 react 的生命周期。其分为 3 个阶段 —— 生成期，存在期，销毁期。
因为生命周期钩子函数存在于自定义组件中，将之前 _render 函数作些调整如下：
// 原来的 _render 函数，为了将职责拆分得更细，将 virtual dom 转为 real dom 的函数多带带抽离出来
function vdomToDom(vdom) {
if (_.isFunction(vdom.nodeName)) { // 为了更加方便地书写生命周期逻辑，将解析自定义组件逻辑和一般 html 标签的逻辑分离开
const component = createComponent(vdom) // 构造组件
setProps(component) // 更改组件 props
renderComponent(component) // 渲染组件，将 dom 节点赋值到 component
return component.base // 返回真实 dom
}
...
}
我们可以在 setProps 函数内（渲染前）加入 componentWillMount，componentWillReceiveProps 方法，setProps 函数如下：
function setProps(component) {
if (component && component.componentWillMount) {
component.componentWillMount()
} else if (component.base && component.componentWillReceiveProps) {
component.componentWillReceiveProps(component.props) // 后面待实现
}
}
而后我们在 renderComponent 函数内加入 componentDidMount、shouldComponentUpdate、componentWillUpdate、componentDidUpdate 方法
function renderComponent(component) {
if (component.base && component.shouldComponentUpdate) {
const bool = component.shouldComponentUpdate(component.props, component.state)
if (!bool && bool !== undefined) {
return false // shouldComponentUpdate() 返回 false，则生命周期终止
}
}
if (component.base && component.componentWillUpdate) {
component.componentWillUpdate()
}
const rendered = component.render()
const base = vdomToDom(rendered)
if (component.base && component.componentDidUpdate) {
component.componentDidUpdate()
} else if (component && component.componentDidMount) {
component.componentDidMount()
}
if (component.base && component.base.parentNode) { // setState 进入此逻辑
component.base.parentNode.replaceChild(base, component.base)
}
component.base = base // 标志符
}
测试生命周期
测试如下用例：
class A extends Component {
componentWillReceiveProps(props) {
console.log("componentWillReceiveProps")
}
render() {
return (
{this.props.count}
)
}
}
class B extends Component {
constructor(props) {
super(props)
this.state = {
count: 1
}
}
componentWillMount() {
console.log("componentWillMount")
}
componentDidMount() {
console.log("componentDidMount")
}
shouldComponentUpdate(nextProps, nextState) {
console.log("shouldComponentUpdate", nextProps, nextState)
return true
}
componentWillUpdate() {
console.log("componentWillUpdate")
}
componentDidUpdate() {
console.log("componentDidUpdate")
}
click() {
this.setState({
count: ++this.state.count
})
}
render() {
console.log("render")
return (
)
}
}
ReactDOM.render(
,
document.getElementById("root")
)
页面加载时输出结果如下：
componentWillMount render componentDidMount
点击按钮时输出结果如下：
shouldComponentUpdate componentWillUpdate render componentDidUpdatediff 的实现
在 react 中，diff 实现的思路是将新老 virtual dom 进行比较，将比较后的 patch（补丁）渲染到页面上，从而实现局部刷新；本文借鉴了 preact 和 simple-react 中的 diff 实现，总体思路是将旧的 dom 节点和新的 virtual dom 节点进行了比较，根据不同的比较类型（文本节点、非文本节点、自定义组件）调用相应的逻辑，从而实现页面的局部渲染。代码总体结构如下：
/**
* 比较旧的 dom 节点和新的 virtual dom 节点：
* @param {*} oldDom 旧的 dom 节点
* @param {*} newVdom 新的 virtual dom 节点
*/
function diff(oldDom, newVdom) {
...
if (_.isString(newVdom)) {
return diffTextDom(oldDom, newVdom) // 对比文本 dom 节点
}
if (oldDom.nodeName.toLowerCase() !== newVdom.nodeName) {
diffNotTextDom(oldDom, newVdom) // 对比非文本 dom 节点
}
if (_.isFunction(newVdom.nodeName)) {
return diffComponent(oldDom, newVdom) // 对比自定义组件
}
diffAttribute(oldDom, newVdom) // 对比属性
if (newVdom.children.length > 0) {
diffChild(oldDom, newVdom) // 遍历对比子节点
}
return oldDom
}
下面根据不同比较类型实现相应逻辑。
对比文本节点首先进行较为简单的文本节点的比较，代码如下：
// 对比文本节点
function diffTextDom(oldDom, newVdom) {
let dom = oldDom
if (oldDom && oldDom.nodeType === 3) { // 如果老节点是文本节点
if (oldDom.textContent !== newVdom) { // 这里一个细节：textContent/innerHTML/innerText 的区别
oldDom.textContent = newVdom
}
} else { // 如果旧 dom 元素不为文本节点
dom = document.createTextNode(newVdom)
if (oldDom && oldDom.parentNode) {
oldDom.parentNode.replaceChild(dom, oldDom)
}
}
return dom
}
对比非文本节点
对比非文本节点，其思路为将同层级的旧节点替换为新节点，代码如下：
// 对比非文本节点
function diffNotTextDom(oldDom, newVdom) {
const newDom = document.createElement(newVdom.nodeName);
[...oldDom.childNodes].map(newDom.appendChild) // 将旧节点下的元素添加到新节点下
if (oldDom && oldDom.parentNode) {
oldDom.parentNode.replaceChild(oldDom, newDom)
}
}
对比自定义组件
对比自定义组件的思路为：如果新老组件不同，则直接将新组件替换老组件；如果新老组件相同，则将新组件的 props 赋到老组件上，然后再对获得新 props 前后的老组件做 diff 比较。代码如下：
// 对比自定义组件
function diffComponent(oldDom, newVdom) {
if (oldDom._component && (oldDom._component.constructor !== newVdom.nodeName)) { // 如果新老组件不同，则直接将新组件替换老组件
const newDom = vdomToDom(newVdom)
oldDom._component.parentNode.insertBefore(newDom, oldDom._component)
oldDom._component.parentNode.removeChild(oldDom._component)
} else {
setProps(oldDom._component, newVdom.attributes) // 如果新老组件相同，则将新组件的 props 赋到老组件上
renderComponent(oldDom._component) // 对获得新 props 前后的老组件做 diff 比较（renderComponent 中调用了 diff）
}
}
遍历对比子节点
遍历对比子节点的策略有两个：一是只比较同层级的节点，二是给节点加上 key 属性。它们的目的都是降低空间复杂度。代码如下：
// 对比子节点
function diffChild(oldDom, newVdom) {
const keyed = {}
const children = []
const oldChildNodes = oldDom.childNodes
for (let i = 0; i < oldChildNodes.length; i++) {
if (oldChildNodes[i].key) { // 将含有 key 的节点存进对象 keyed
keyed[oldChildNodes[i].key] = oldChildNodes[i]
} else { // 将不含有 key 的节点存进数组 children
children.push(oldChildNodes[i])
}
}
const newChildNodes = newVdom.children
let child
for (let i = 0; i < newChildNodes.length; i++) {
if (keyed[newChildNodes[i].key]) { // 对应上面存在 key 的情形
child = keyed[newChildNodes[i].key]
keyed[newChildNodes[i].key] = undefined
} else { // 对应上面不存在 key 的情形
for (let j = 0; j < children.length; j++) {
if (isSameNodeType(children[i], newChildNodes[i])) { // 如果不存在 key，则优先找到节点类型相同的元素
child = children[i]
children[i] = undefined
break
}
}
}
diff(child, newChildNodes[i]) // 递归比较
}
}
测试
在生命周期的小节中，componentWillReceiveProps 方法还未跑通，稍加修改 setProps 函数即可：
/**
* 更改属性，componentWillMount 和 componentWillReceiveProps 方法
*/
function setProps(component, attributes) {
if (attributes) {
component.props = attributes // 这段逻辑对应上文自定义组件比较中新老组件相同时 setProps 的逻辑
}
if (component && component.base && component.componentWillReceiveProps) {
component.componentWillReceiveProps(component.props)
} else if (component && component.componentWillMount) {
component.componentWillMount()
}
}
来测试下生命周期小节中最后的测试用例：
生命周期测试
diff 测试
项目地址，关于如何 pr
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/96305.html
摘要：因为版本将真正废弃这三生命周期到目前为止，的渲染机制遵循同步渲染首次渲染，更新时更新时卸载时期间每个周期函数各司其职，输入输出都是可预测，一路下来很顺畅。通过进一步观察可以发现，预废弃的三个生命周期函数都发生在虚拟的构建期间，也就是之前。 showImg(https://segmentfault.com/img/bVbweoj?w=559&h=300); 背景 前段时间准备前端招聘事项...
摘要：当组件要被卸载之前，框架会调用函数，之后就会卸载组件。开发者可以在这几个生命周期函数中定义一些你想组件变化的操作或者做一些数据的改变。 react组件有两个状态，一个是渲染状态，一个是卸载状态，而渲染状态又分为初始渲染状态（也可以说是创建状态）和重新渲染状态（也可以说是存在状态，说明组件一直存在，会发生多次重新渲染）。这三个状态下又会产生一系列的生命周期函数，开发人员一般只需要了解其中...
摘要：前言的基本概念组件的构建方法以及高级用法这背后的一切如何运转深入内部的实现机制和原理初探源码代码组织结构包含一系列的工具方法插件包含一系列同构方法包含一些公用或常用方法如等包含一些测试方法等包含一些边界错误的测试用例是代码的核心部分它包含了 前言 React的基本概念,API,组件的构建方法以及高级用法,这背后的一切如何运转,深入Virtual DOM内部的实现机制和原理. 初探Rea...
摘要：异步渲染利用事件循环，延迟渲染函数的调用调用回调函数处理后跟函数的情况浅合并逻辑事件循环，关于的事件循环和的事件循环后续会单独写篇文章。 showImg(https://segmentfault.com/img/remote/1460000015785464?w=640&h=280); 看源码一个痛处是会陷进理不顺主干的困局中，本系列文章在实现一个 (x)react 的同时理顺 Rea...
摘要：背景介绍入门实例教程起源于的内部项目，因为该公司对市场上所有框架，都不满意，就决定自己写一套，用来架设的网站。做出来以后，发现这套东西很好用，就在年月开源了。也就是说，通过钩子函 react - JSX React 背景介绍 React 入门实例教程 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套...
阅读 2569·2021-10-11 10:58
阅读 1153·2021-09-29 09:34
阅读 1496·2021-09-26 09:46
阅读 3831·2021-09-22 15:31
阅读 734·2019-08-30 15:54
阅读 1459·2019-08-30 13:20
阅读 1254·2019-08-30 13:13
阅读 1489·2019-08-26 13:52
