React底层实现原理

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

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

2. React中的虚拟DOM

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

常规思路

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

改良思路（仍使用DOM）

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

React的思路

1. state数据
2. JSX模板
3. 数据+模板相结合，生成虚拟DOM（虚拟DOM就是一个JS数组对象，完整的描述真实的DOM）( [ ‘ idv ‘ , { id : ‘ abc ‘ } , [ ‘ span ‘ , { } , ‘ hello ‘ ] ] )，用JS生成JS对象性能损耗极小，生成DOM性能损耗大要调用web application。
4. 用虚拟DOM的结构生成真实的DOM，来显示( < div id=’abc’>< span>hello</ span></ div> )。
5. state发生变化(< div id=’abc’>< span>bye</ span></ div>)
6. 数组+模板生成了新的虚拟DOM( [ ‘ idv ‘ , { id : ‘ abc ‘ } , [ ‘ span ‘ , { } , ‘ bye ‘ ] ] )（极大的提升了性能）
7. 比较原始虚拟DOM和新的虚拟DOM的区别，找到区别是span中的内容（极大的提升了性能）
8. 直接操作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')
1
2
3
4

虚拟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
	}))
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

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

}
1
2
3
4
5
6
7
8
9

5. React中的生命周期函数

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