【React】渲染组件的流程

1 年 ago

文, 翔

1 minute

首先

当我突然想到像这样的组件最终是如何在浏览器中呈现的时候，我将其总结成备忘录。
换句话说，我将总结React和JSX如何协同工作来构建虚拟DOM，并最终更新实际的DOM。

组件的定义

在React中，组件表示可重复使用的UI的一部分。通常情况下，组件会在单独的文件中定义，并在需要时从其他文件中导入。

export function Hello() {
  return <h1>Hello, world!</h1>;
}

使用JSX语法来创建React元素

上述的写法被称为JSX，并且是React.createElement()的语法糖。

要创建React元素，通常需要调用这样的API。它接受type、props和children作为参数，并创建React元素。

const element = React.createElement(
  'h1', // type
  null, // props
  'Hello, world!' // children
);

在另一方面，JSX允许以更加直观的方式创建接近HTML的React元素。

export function Hello() {
  return <h1>Hello, world!</h1>;
}

尽管它是一种语法糖，但要从JSX创建React元素，需要使用像Babel这样的转译器将JSX转换为普通的JavaScript。这是因为浏览器和Node.js无法直接理解JSX。在这个转换过程中，JSX内的标签会转换为对React.createElement()的调用。

会被转译成下面这样，通过一个转译器。

React.createElement(Hello)

这句话的意思是React.createElement函数根据指定的类型（本例中为Hello）和属性创建一个新的React元素。

将内容添加到虚拟DOM并进行差异评估。

这个React元素会被添加到虚拟DOM中，并最终渲染到实际的DOM上。
可以使用ReactDOM.render函数将其添加到虚拟DOM中，并接受以下类似的参数。

ReactDOM.render(
  //1.React要素,
  //2.DOM要素
)

当调用ReactDOM.render()时，React会在内存中创建虚拟DOM树，并管理每个组件的状态。

React通过计算与实际DOM的差异，仅对需要进行实际显示更改的组件进行高效渲染，以便在浏览器中显示。

export function Hello() {
  return <h1>Hello, world!</h1>;
}

import { Hello } from './Hello';

function App() {
  return <Hello />;
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
)

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>React App</title>
</head>
<body>
  <div id="root"></div>
  <script src="./App.js"></script>
</body>
</html>

概述

JSXはReact.createElementのシンタックスシュガー

JSXはReact.createElementに変換するにはBabelなどのトランスパイラが必要

ReactDOM.renderが呼び出され、実際のブラウザとの差分をReactが評価することで、差分のコンポーネントのみレンダリングされる