这是我参与「第五届青训营 」笔记创作活动的第12天，在本次课堂上我们学习了React的写法与实现，做此笔记。

一、本堂课重点内容

• React的写法与实现

1. React实现的基本概要
2. React实现——How to Diff

二、详细知识点介绍

• ##React的写法与实现

React实现的基本概要

React是一个用于构建用户界面的JavaScript库。它通过使用组件和声明式编程来实现响应式和可重用的UI组件。React通过使用虚拟DOM（一个JavaScript对象模型）来优化更新和渲染，并且只会更新需要更新的组件，以提高性能。在React中，数据通过组件的props（属性）和状态（state）进行流通，从而控制UI的渲染。 React的思路

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

React实现——How to Diff

React 中的“Diffing”是指确定需要对组件的虚拟 DOM（组件元素及其属性和内容的表示）进行最少更改次数的过程，以便在浏览器中更新组件的实际 DOM . 这是 React 性能优化的一个重要方面，因为它有助于最大程度地减少浏览器渲染更新所需的工作量，从而实现更快、更流畅的更新。

React 使用启发式算法来执行比较过程。该算法将先前渲染的虚拟 DOM 与当前渲染的虚拟 DOM 进行比较，并确定哪些元素已更改、添加或删除。基于这些信息，React 然后尽可能高效地更新实际的 DOM。

为了有效地比较，React 使用了“键”的概念，这是分配给虚拟 DOM 中元素的唯一标识符。通过使用键，React 可以确保它能够准确地跟踪哪些元素从一个渲染到下一个渲染发生了变化，并进行最少数量的更改来更新实际的 DOM。