关于React如何在浏览器上渲染用户界面的初学者指南
React最重要的功能之一是组件。组件被认为是React应用的构件，它们让你把用户界面分成独立的部分，然后可以重复使用和独立处理。
一个React组件可以是 "有状态 "或 "无状态"。它接受一个可选的输入并返回一个在屏幕上呈现的React元素。
我们将在本文的稍后部分深入探讨这个话题。
React和React DOM
为了在浏览器中使用React，我们需要包括两个库。React 和ReactDOM。
React库负责创建视图，ReactDOM库负责在浏览器中实际渲染UI。
React有一个声明式的编程方法，我们不直接更新DOM，而只是告诉react用户界面应该是怎样的，然后React和React DOM为我们处理DOM更新。
但是ReactDOM在哪里？
ReactDOM是一个JavaScript库，它允许React与DOM交互。
React与浏览器或DOM更新没有关系。React DOM在React和DOM之间扮演一个中间人。在使用React库创建组件后，我们想在浏览器上显示它们，React DOM通过使用ReactDOM.render()函数更新DOM来处理这个在屏幕上显示组件的渲染过程。
JSX和React元素
我们知道在React UI中被划分为组件--一个React组件可以是基于类的，也可以是基于功能的。让我们举一个React中的功能组件的例子。
const App = ()=>
从代码上看，我们可以说这个组件返回的是UI，但返回的不是HTML，虽然代码看起来像HTML，但它被称为JSX。
JSX是一个JavaScript扩展，它使你的JS代码看起来像HTML。
**还在迷惑吗？**让我们通过一个例子来了解幕后发生了什么。
const App = () => {
如果你去babel网站，把这段代码输入到React的babel转译器中，你会得到以下输出。
这表明JSX只是创建非常具体的JavaScript对象的语法糖。
什么是React.createElement？
React元素只是一个描述内存中DOM元素的JavaScript对象。我们可以使用React的createElement 方法创建一个React元素。
所以到现在为止，当我们创建组件时，我们是在创建JS对象，为浏览器提供关于用户界面应该是什么样子的信息。
但是，如果浏览器不理解React元素，那么组件是如何被渲染到屏幕上的？
如上所述，这就是ReactDOM的作用，它是在浏览器中渲染React元素的中间人。ReactDOM根据节点的 "类型 "属性递归地创建节点并更新DOM。
照片：JOHN TOWNERonUnsplash
虚拟DOM和调和
React维护着一个名为Virtual DOM的Real DOM副本，它只是DOM的一个虚拟表示，这也是React速度快的原因之一，因为Real DOM操作的成本很高。
当我们进行修改或添加数据时，React会创建一个新的虚拟DOM并将其与之前的DOM进行比较。这种比较算法被称为diffing，然后变化被分批进行，真实DOM以最小的变化被更新，而无需重新绘制整个DOM。
这个创建虚拟DOM并与之前的虚拟DOM进行比较的过程（Diffing）以及更新浏览器DOM的过程被称为Reconciliation。
渲染过程
React的渲染周期有两个阶段。渲染阶段和提交阶段。
1.渲染阶段
渲染也有两种类型。一种是初始渲染，一种是重新渲染。初始渲染是指你的应用程序第一次启动的时候。重新渲染是当你的状态或道具被更新后。
以下是初始渲染的流程看起来是这样的
- 组件被解析，然后使用React.createElement将JSX转换为React元素并存储在内存中。
- 使用React元素创建虚拟DOM，然后发送到提交阶段。
2.提交阶段
提交阶段是React实际操作DOM并进行修改的地方。
一旦React使用diffing算法对其新的和以前的虚拟DOM（在初始渲染的情况下，只有一个虚拟DOM）进行了比较，它就会使用React DOM库将这些变化应用到真实的DOM中。
重新渲染是如何工作的
当状态被更新或组件中的道具被改变时，重新渲染会被触发。触发状态变化的组件被标记，它被重新渲染，所有的子组件也被重新渲染。
以下是重新渲染的流程
- 标记触发状态变化的组件。
- 该组件及其子组件被解析，然后使用React.createElement将JSX转换为React元素并存储在内存中。
- 使用React元素创建一个新的虚拟DOM，然后通过diffing算法与之前的虚拟DOM进行比较。
- 更改被送入提交阶段
***注意。***如果你将一个状态钩子更新为与当前状态相同的值，React将跳出，而不渲染子代或启动效果。
React使用Object.is比较算法，这就是为什么状态变化应该是不可改变的原因。
有很多很好的资源和文章深入解释了每个概念，我参考了这些资源和文章，并将在下面分享这些链接。写这篇文章的原因是我没有找到很多详细解释渲染过程的资源，当我们希望优化React应用程序的性能时，理解这一点非常重要。
我将在下一篇文章中讨论关于如何避免不必要的重新渲染的一些技术。
构建可组合的Web应用
不要建立网络单体。使用 比特来创建和组成解耦的软件组件--在你喜欢的框架中，如React或Node。构建可扩展和模块化的应用程序，提供强大和愉快的开发体验。
把你的团队带到 比特云来托管并共同协作开发组件，并作为一个团队加快、扩大和规范开发。尝试用设计系统 或微前端的可组合前端，或探索用服务器端组件的可组合后端。
了解更多
React如何在屏幕上渲染一个组件》最初发表在《Bits and Pieces》杂志上，人们通过强调和回应这个故事来继续对话。
