浅谈React底层实现原理

目录

• 1. props，state与render函数关系，数据和页面如何实现互相联动？
• 2. React中的虚拟DOM
• 常规思路
• 改良思路（仍使用DOM）
• React的思路
• 深入理解虚拟DOM
• 3. 虚拟DOM的diff算法
• 4. React中ref的使用
• 5. React中的生命周期函数
• 6. 生命周期函数的使用场景

1. props，state与render函数关系，数据和页面如何实现互相联动？

当组件的state或者props发生改变的时候，自己的render函数就会重新执行。
注意：当父组件的render被执行的时候，子组件的render也会被重新执行一次（因为在父组件的render里面）。
即当绑定的事件改变了state或者props，render函数就会重新执行解析页面，这时解析的时候就会使用新的数据了，所以页面就会变化。

2. React中的虚拟DOM

因为只要state、props改变就会重新渲染render，可以想象要不断的重新渲染页面对性能要求非常高，实际上render的性能时非常高的，这归功于虚拟DOM。
首先提前明确DOM的相关操作需要调用web application对性能损耗是比较高的。

常规思路

• state数据
• JSX模板
• 数据+模板相结合，生成真实的DOM来展示。
• state改变
• 数据+模板相结合，生成真实的DOM，替换原始的DOM
  缺点：第一次生成了一个完整的DOM片段，第二次又生成了一个完整的DOM片段，第二次的DOM替换第一次的DOM，这样生成、替换非常的消耗性能。

改良思路（仍使用DOM）

• state数据
• JSX模板
• 数据+模板相结合，生成真实的DOM来展示
• state改变
• 数据+模板相结合，生成真实的DOM，并不直接替换原始的DOM
• 新的DOM（文档碎片）原始的DOM作对比，找差异（性能损耗大）
• 找出发生了什么变化，比如找出了只有input框有差异
• 只用新的DOM中的input元素替换掉老的DOM中的input元素
  缺点：性能提升并不明显，因为性能消耗在了对比上。

React的思路

• state数据
• JSX模板
• 数据+模板相结合，生成虚拟DOM（虚拟DOM就是一个JS数组对象，完整的描述真实的DOM）( [ ‘ idv ‘ , { id : ‘ abc ‘ } , [ ‘ span ‘ , { } , ‘ hello ‘ ] ] )，用JS生成JS对象性能损耗极小，生成DOM性能损耗大要调用web application。
• 用虚拟DOM的结构生成真实的DOM，来显示( < div id=’abc’>< span>hello</ span></ div> )。
• state发生变化(< div id=’abc’>< span>bye</ span></ div>)
• 数组+模板生成了新的虚拟DOM( [ ‘ idv ‘ , { id : ‘ abc ‘ } , [ ‘ span ‘ , { } , ‘ bye ‘ ] ] )（极大的提升了性能）
• 比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中的内容（极大的提升了性能）
• 直接操作DOM改变span中的内容
  总结：减少了对真实DOM的创建和对比，而创建和对比的是JS对象，从而实现了极大的性能飞跃。

深入理解虚拟DOM

Vue与React中的虚拟DOM的原理和步骤是完全一致的。
React中真实DOM的生成步骤：JSX -> createElement方法 -> JS对象（虚拟DOM） -> 真实的DOM。
因此可见，JSX中的div等标签仅仅是JSX的语法，并不是DOM，仅用于生成JS对象。
其实在React中创建虚拟DOM（JS对象）使用的是（没有JSX语法也可用下面的方法生成）

// 传三个参数：标签 属性 内容
// <div>item</div>
// 所以其实没有JSX语法也可以用下面的方式生成
React.createElement('div',{},'item')

虚拟DOM的优点：

• 性能提升DOM对比变成了JS的对比
• 它使得跨平台应用得以实现，React Native（安卓和ios中没有DOM的概念，使用虚拟DOM（JS对象）在所有应用中都可以被使用，然后变成原生客户端的组件）

3. 虚拟DOM的diff算法

• Diff算法用于比较原始虚拟DOM和新的虚拟DOM的区别，即两个JS对象该如何比对。
• diff算法全称为difference算法
• setState实际上是异步的，这是为了提升react底层的性能，是为了防止时间间隔很短的情况下多次改变state，React会在这种情况下将几次改变state合并成一次从而提高性能。
• diff算法是同级比较，假设第一层两个虚拟DOM节点不一致，就不会往下比了，就会将原始页面虚拟DOM全部删除掉，然后用新的虚拟DOM进行全部的替换，虽然有可能有一些性能的浪费，但是由于同层对比的算法性能很高，因此又弥补了性能的损耗。
• 做list循环的时候有一个key值，这样比对的时候就可以相对应的比对，找出要改变的，以及不需要渲染的，这样使用key做关联，极大地提升了虚拟DOM比对的性能，这要保证在新的虚拟DOM后key值不变，这就说明了为什么做list循环的时候key的值不要是index，因为这样没有办法保证原虚拟DOM和新虚拟DOM的key值一致性，而造成性能的损耗，一般这个key对应后台数据的唯一id字段，而不是循环的index。

4. React中ref的使用

• 在react中使用ref来操作DOM
• 在react中也可以使用e.target来获取DOM
• ref这个参数是一个函数

<input
    id = "insertArea"
    className="input"
    value={this.state.inputValue}
    onChange={this.handleInputChange}
    ref={(input)=>{this.input = input}}
/>

handleInputChange(e){
    // const value = e.target.value; // 原始的方法
    const value = this.input.value;
    this.setState(() => ({
        inputValue: value
    }))
}

一般情况下不推荐使用ref这种方法，因为setState是一个异步函数，因此去操作DOM的时候可能无法正确的输出页面的最新DOM情况，有时候比较复杂的操作如动画之类的，如果一定要使用，就需要在setState的第二个函数，这个是回调函数，在setState完成的时候触发。

handleBtnClick(e){
    this.setState((prevState)=>({
        list: [...prevState.list, prevState.inputValue], // 展开运算符
        inputValue: '',
    }), ()=>{
        console.log(this.ul.querySelectorAll('div').length);
    });
}

5. React中的生命周期函数

• 生命周期函数是指在某一个时刻组件会自动调用执行的函数。
• render函数就是一个生命周期函数的例子，当state或props的时候改变的时刻就会自动执行。
• contructor 可以理解成一个生命周期函数，在组件被创建的时候就会被执行，但是它是es6语法，不是react特殊的语法。

组件挂载的过程：

• componentWillMount 在组件即将被挂载到页面的时刻自动执行，在渲染之前被执行
• render 进行挂载，是必须存在的
• componentDidMount 在组件被挂载到页面之后被执行。
• 注意：在state和props 改变的时候只有render会执行，componentWillMount和componentDidMount不会执行，他们只会在第一次挂载到页面的时候被执行。
• 组件更新：
• componentWillReceiveProps 两个条件都要满足：1. 当一个组件从父组件接收参数 2. 如果这个组件第一次存在于父组件中不会执行，如果这个组件之前已经存在于父组件中，才会执行。
• shouldComponentUpdate 组件即将被更新之前会执行，如焦点input框的时候，会返回一个true和false来判断要不要更新。
• componentWillUpdate 组件更新之前会自动执行，在shouldComponent返回true之后才会执行。
• componentDidUpdate 组件更新完成之后被执行。
• 组件去除的过程：
• componentWillUnmount：但这个组件即将被从页面中剔除的时候执行。

6. 生命周期函数的使用场景

• 防止父组件render的时候，子组件也要render，从而提升性能。
• shouldComponentUpdate(nextProps，nextState){if(nextProps.content !== this.props.content){return true} return false}
• 页面初始化的时候，在componentDidMount中发送AJAX请求（推荐），或者在constructor中，千万不要放在render里面，会造成死循环，也最好不要在componentWillMount中发送ajax,放这里面是没有问题的，但是如果在react native 中会有问题。
• react 没有内置ajax，使用axios。

到此这篇关于浅谈React底层实现原理的文章就介绍到这了,更多相关React底层内容请搜索易盾网络以前的文章或继续浏览下面的相关文章希望大家以后多多支持易盾网络！