Part1 组件之间的概念差异
·组件
组件是我们为了描述用户界面的一部分而编写的，它只是一个普通的JavaScript函数，但它是一个返回React式元素的函数，这些元素是用JSX语法来编写的，我们可以把组件理解为一个“蓝图”或“模板”。
·组件实例
一个组件实例就像是一个组件的实际物理表现，通俗来讲，React在哪里调用了组件，哪里就有组件实例。事实上，每个实例都有自己的状态和道具，也有自己的生命周期，就像一个活的有机体。
·React元素
当React在每个实例中执行代码，它们中的每一个都将返回一个或多个React元素。React元素基本上包含为当前组件实例创建DOM元素所需的所有信息，因此，React元素最终将会被转换为实际的DOM元素，然后被浏览器刷新到页面上。
Part2 组件在屏幕上显示的流程
·触发阶段
通过更新状态触发新的渲染，有两种情况，第一种是程序第一次运行（初始渲染），第二种是发生在一个或多个组件实例中的状态更新（重新渲染）
·渲染阶段
React调用我们的组件函数，并找出它应该如何更新DOM
·提交阶段
新元素可能或被放置在DOM中，已经存在的元素可能会被更新或删除，为了正确反映应用程序的当前状态
·刷新屏幕
浏览器注意到DOM已经更新，便刷新屏幕，这一步才实际上发生了视觉上的变化
Part3 key prop
key是一个特殊的道具，我们可以用它来告诉不同的算法某个元素是独一无二的，这对DOM元素和React元素都是有效的。在实践中，这意味着我们可以给每个组件实例一个唯一的标识，这将允许React区分同一组件类型的多个实例。
key通常会被用在列表中或者被用于重置状态
·key用于列表中
用法例子如下：
<ul>
<Question key='q1' question={q[1]}/>
<Question key='q2' question={q[2]}/>
</ul>
·key用于重置状态
例如：
<ContentBox>
<Content
content={{
title:'title1'
body:'body2'
}}
key="c23" //此处的key值为c23，使得React唯一标识此组件实例
/>
</ContentBox>
当我们想要一个新的content，可以给它一个不同的key，就会创造出一个全新的DOM元素，这样一来状态可以重置了，例如：
<ContentBox>
<Content
content={{
title:'title1'
body:'body2'
}}
key="c89" //此处的key值为c89，使得React唯一标识此组件实例
/>
</ContentBox>
Part4 关于渲染逻辑的规则
在React组件中，我们可以写入两种类型的逻辑，分别是渲染逻辑和事件处理函数。渲染逻辑基本上是位于组件顶层的所有代码，用于描述某个组件实例的视图应该是什么样子的。事件处理函数基本上就是执行的代码片段，作为处理程序正在监听的事件的结果。
渲染逻辑不允许产生任何副作用，换句话说，运行在顶层的逻辑并且负责渲染的组件应该与外界没有交互。这意味着渲染逻辑不允许执行网络请求、不允许创建计时器或者直接使用DOM API（比如使用添加事件监听器监听事件）
Part5 批处理状态更新
React在更新同一事件处理程序函数中的多个状态片段时，会把所有的状态批处理到一个状态上来更新整个事件处理程序，比如说：
const reset=function(){
setAnswer(' ')
console.log(answer)
setBest(true)
setSolved(false)
}
//在这个例子中有三个状态发生了更新，而React不会分别进行三次渲染，而是把这三个状态批处理，一起渲染
//组件状态在渲染阶段是存储在纤维树(fiber tree)中的，在上述代码中，在打印answer的地方时，渲染阶段尚未发生，所以React仍然在逐行读取函数，弄清楚哪些状态需要更新，因此，控制台打印answer的结果将会是answer原来的值。
状态更新只会在重新渲染后反映在状态变量中，出于这个原因，我们说React中的更新状态是异步的。
Part6 关于事件传播和事件委托的工作原理
假设现在有一个DOM树：
<html>
<body>
<div>
<header>
<div>
<button><button><button>
当我们点击button，事件触发，将会创建一个新的事件对象，这个对象会在文档的根目录(树的顶端html)中创建，然后，在所谓的捕获阶段，这个事件对象将会沿着整个树传播，一直到它到达目标元素(我们点击的那个button)，我们可以通过在这个目标元素中放置事件处理程序函数来处理事件，在到达目标元素之后，事件对象就会立刻沿着整个树向上移动，也就是在所谓的起泡阶段。
React处理事件实际上是对应用程序中的所有事件执行事件委托，也就是将所有事件处理程序添加到根元素中。所以如果我们的代码中有多个点击处理程序，React实际上会以某种方式把它们捆绑在一起，只需要在纤维树的根节点上添加一个大的点击处理程序，可以理解为React为每个事件类型注册一个事件处理程序函数。
标签：渲染,元素,React,实例,React18,key,组件,第六篇 From： https://blog.csdn.net/2301_80425436/article/details/140702848