React和ReactDOM是如何工作运行的
React和ReactDOM是如何工作运行的？
我的技术栈是vue，由于公司的需要，需要学习react。但是在使用react写了一些项目之后，对react的理解还是很浅薄，使用起来虽然可以实现需求，但是内部是如何运行的一无所知，所以在网上找了一篇文章进行翻译加上自己的理解总结成这篇博客，希望能帮助到有需要的人。
当你使用React的时候，你可能会使用JSX进行构建应用程序。JSX是一个基于标签的JavaScript语法，它的语法规则看起来像HTML。React元素（React element）是在JSX和继续学习React之前需要掌握的最小和最基本的单位。换句话说，在学习JSX和继续深入学习React之前，我们要对React元素有基本的了解。
注意： 为了了解React在浏览器中是如何运行的，我们需要两个库：React和ReactDOM。React库是负责创建视图的，而ReactDOM库是负责浏览器中渲染UI的。
React: https://cdnjs.com/libraries/react ReactDOM: https://cdnjs.com/libraries/react-dom
引入这两个库在你的主要JavaScript文件之前。在了解React如何运行的同时，我们需要使用React和ReactDOM创建一个小型应用。简单起见，这个应用只包含Index.html和main.js两个文件。React库应该使用开发版本，这样在控制台是可以看到警告和错误的。
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18.2.0/umd/react-dom.production.min.js"></script></script>
<script src="./main.js"></script>
</head>
<body>
</body>
</html>
React element
先放概念：元素（element）是组成React应用的最小的单位。元素是一个普通的对象，它根据DOM节点描述了我们想要出现在页面上的东西。
HTML只是一组最终会变成DOM元素的命令。假如你需要写一个JS框架或者库的HTML的代码。比如使用vue2使用模板语法来构建DOM树。我们先使用HTML的语法来创建一个HTML层级结构来看下代码和效果：
<section class="js-section">
<h1>JavaScript Libraries and Frameworks</h1>
<ul class="list-lib-frameworks">
<li>React.js</li>
<li>Angular</li>
<li>Vue.js</li>
<li>Node.js</li>
<li>underscore.js</li>
</ul>
</section>
上述HTML代码最后会渲染成一个DOM树，根节点是section，它有两个子节点，一个是h1，一个是ul，h1的子节点是文本节点。ul的子节点是5个li节点，li的子节点是文本节点。
在过去，网站是由多页面组成的，用户点击链接，浏览器请求一个新的HTML页面并且重新创建DOM。但是在AJAX发明之后，出现了单页面应用，也就是SPA（single page application）。在单页面应用中，浏览器会加载初始的HTML文档，然后用户通过点击链接进行导航的时候，浏览器会发送请求并且浏览器只会更新一部分DOM。当用户点击链接进行导航的时候，从观感上看，是从一个页面跳转到另一个页面了，但实际上是一直保持在一个页面。JavaScript摧毁旧的UI，然后创建新的UI，这就是JavaScript的幕后工作。那么JavaScript在更新UI方面是如何运行的呢？
JavaScript如何更新DOM?
JavaScript使用DOM API更新和操纵DOM节点。DOM API是JavaScript用来操作DOM的对象的集合。操作指的就是CURD,也就是增删改查，如果你想要构建一个HTML页面，也可以使用JavaScript进行构建：
const root = document.querySelector( 'body' );
function createListElement() {
const libsAndFrameworksNames = ['React.js', 'Angular', 'Vue.js',
'Node.js', 'Underscore.js'];
const ul = document.createElement( 'ul' );
ul.classList.add( "list-lib-frameworks" );
libsAndFrameworksNames.forEach( function appoendToUnorderedList( name ) {
const listElement = document.createElement( 'li' );
listElement.innerText = name;
ul.appendChild( listElement );
} );
return ul;
}
function createWebPageWithJavaScript( root ) {
// PARENT ELEMENT
const parent = document.createElement( 'section' );
parent.classList.add( 'js-section' );
// HEADING ELEMENT
const heading = document.createElement( 'h1' );
heading.innerText = 'JavaScript Libraries and Frameworks';
// UNORDERED LIST ELEMENT
const unorderedListElement = createListElement();
// APPEND HEADING AND UNORDERED LIST ELEMENT TO PARENT
parent.appendChild(heading)
parent.appendChild( unorderedListElement );
// APPEND PARENT TO ROOT ELEMENT
root.appendChild( parent );
}
createWebPageWithJavaScript( root );
React是一个被设计用来和DOM交互的框架，从现在来看我们不直接更新DOM，而是告诉React我们要更新DOM.React将通过我们给出的命令为我们负责元素的渲染。
在DOM和React之间有许多相似点，比如他们都由节点组成。DOM是由DOM节点组成，React是由React element 组成的。看起来很相似，实际上很不同。
创建React element
就像前边所说的，React element是React中最小的单位。React元素是在内存中描述DOM元素的JavaScript对象。我们可以通过使用React的方法createElement**来创建一个React元素。
语法：
React.createElement(type,[props],[...children])
参数：
type：type就是你想要创建元素的类型，如div，p，li等等。type也可以是其他的React元素。
props：它是一个JavaScript对象，包含构建DOM需要的属性和数据。
childrenorcontent：React元素可能会有children或者content来显示其他的嵌套的元素，是节点的内容。
例子： 如何创建li元素
const element = React.createElement("li",null,'React.js')
console.log(element)
在上述例子中，我们给方法里传递了三个参数，如下所示：
li： 它代表着我们创建React元素的类型，我们也能从上述log看出type:"li"
null: 我们没有为元素定义任何的属性，但是我们可以添加像className属性，但是在上边的例子中我们没有那么做。因此我们传递了null值。
React.js: 我们传入了文本作为元素的children，children不仅可以是文本还可以是其他元素。
在渲染期间，也就是render期间，React会将React元素转变成真实DOM。
<li>React.js</li>
并且如果你想要给li元素添加一个类，可以像下边这样做：
const element = React.createElement('li',{
className:"list"},'React.js')
console.log(element)
从上图中我可以看到props中多出了一个className属性，证明我们添加成功了。
这里出现一个问题为什么不用class而是使用className？像
<li class="list">React.js</li>
标签上使用的都是class。
答案就是react元素他所对标的DOM元素，而不是HTML，在DOM API中要为创建的DOM元素添加类的话也是使用className，这样二者就更加接近。
const arr = document.createElement("div")
arr.className = "hello"
ReactDOM
当你尝试创建React元素之后，然后你想要在浏览器上看到它。但是浏览器不理解你创建的React元素。浏览器认为React元素只是一个普通的JS对象。ReactDOM就是将React元素渲染在浏览器上的一个“桥梁”。ReactDOM有许多有用的方法，但是我们最感兴趣的就是render方法。它需要两个参数来描述你需要渲染什么元素和元素需要渲染在哪里。
例子：在DOM中渲染上文所述的li元素
const element = React.createElement('li',{
class:"list"},'React.js')
const root = document.getElementById("root")
ReactDOM.render(element,root)
方法第二个参数是我们想要渲染li元素的位置，或者说我们想把li元素渲染成哪个其他元素的子节点，我们也可以使用body元素，但是这种行为是不推荐的。因为一般document.body元素经常被第三方库操作，我们直接操作document.body可能会出现一些不可预知的问题。
接下来我们使用React和ReactDOM进行构建之前的例子，然后渲染在浏览器页面上：
//main.js
const mainElement = React.createElement('section',{
className:'js-section'
},
React.createElement("h1",null, "JavaScript Libraries and Frameworks" ),
React.createElement("ul",{
className:'list-lib-frameworks'
},
React.createElement("li",null,"React.js"),
React.createElement("li",null,"Vue.js"),
React.createElement("li",null,"Angular.js"),
React.createElement("li",null,"Node.js")
)
)
ReactDOM.render(mainElement,document.getElementById("root"))
从上边的例子可以看出如果给render方法提供超过三个参数，那么第三个以及第三个以后的都会被作为children。因此React可以创建一个children的数组，这些新创建的children元素被放进了children数组中。因此第三个参数我们可以使用数组，并且用数组可以简化我们的代码。
const listOfLibAndFrameworks = ['React.js', 'Angular', 'Vue.js',
'Node.js', 'underscore.js'];
const mainElement = React.createElement('section',{
className:'js-section'
},
React.createElement("h1",null, "JavaScript Libraries and Frameworks" ),
React.createElement("ul",{
className:'list-lib-frameworks'
},
listOfLibAndFrameworks.map((item,index) => {
return React.createElement('li',null,item)
})
)
)
ReactDOM.render(mainElement,document.getElementById("root"))
使用数组遍历节省了很多的代码量，但是在浏览器控制台中会发现如下警告：
翻译过来就是每个数组子元素都应该有一个独一无二的key属性。那么我们在创建li元素的时候，通过给React.createElement方法第二个参数传递key属性就可以了：
listOfLibAndFrameworks.map((element, index) => React.createElement(``'li'``,
``{ key: index }, element))
在React中，我们使用数组的时候，如果不加上key属性，就会在控制台发出警告。想要消除这个警告，我们就要加上上述的key属性。它用于React来识别唯一的li以便于重新渲染它，这样会让我们的代码更加高效，因此很推荐加上key值。
总结：React在内存中创建React element（JS对象），然后ReactDOM将React创建好的视图元素渲染在浏览器页面上。
转载自:https://juejin.cn/post/7263016769250312253