React 回忆录（三）运用 React 衬着界面

2023年6月23日 200次阅读 来源: libinfs

Hi 列位，迎接来到 React 回忆录！👋 在上一章中，我引见了 React 框架的“五大特性”：假造DOM，组件化，声明式代码，单向数据流和地道的 JavaScript 语法。在本章中，我们将谈到 React 是怎样衬着 UI 的，以及在这个历程中所表现出的 组件化 头脑。

01. React 衬着界面的体式格局

在 React 等大型前端框架涌现之前，我们衬着 UI 元素的体式格局是运用字符串模板。而在 React 中，我们经由过程运用JavaScript 对象来衬着 UI 元素。

在上一章我们提到过，React 为了节约频仍操纵 DOM 所消耗的前端机能，提出了假造DOM的观点，在这里我们所建立的 JavaScript 对象等于用来形貌“页面看起来是什么模样”的假造DOM节点。“假造DOM”是怎样终究转化为“实在DOM“并展如今浏览器中的呢？这里面的庞杂事情（操纵 DOM 树，增加节点）由 React 完成。

让我们先看看怎样经由过程一个 JavaScript 对象建立一个假造的DOM节点（即 React 元素）：

// 为了建立一个 React 元素，我们须要运用 React.createElement API
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

该 API 终究会返回一个大抵以下花样的 JavaScript 对象：

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world'
  }
};

React 会为这个 JavaScript 对象在天生的假造DOM树上找到一席之地，并终究和浏览器中的实在 DOM 树兼并，衬着视图。

但是在现实开辟中，你几乎不会运用到 React.createElement API，而是像下方如许建立 React 元素：

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

这类建立体式格局是经由过程一种叫做 JSX 的 JavaScript 语法扩大完成的，而关于 JSX 的观点在这里我就不再进一步论述了，你大能够将它理解为一种简约，高效建立 React 元素的语法糖，用来越发文雅的构建全部运用的假造 DOM。

值得一提的是，JSX 并非 React 框架的一部分（这源于 React 代码组织上只管分而治之的哲学），因而 React 并不像担任兼并假造DOM与实在DOM那样，担任将由 JSX 语法写成的代码转化为运用了 React.createElement API 的 JavaScript 对象。

那谁来做这件事呢？答案是 Babel。而一般，我们运用 webpack 来打包我们的 JavaScript代码并输送至 Babel 举行转译。如今你邃晓了，为何 React，webpack和Babel老是像连体婴儿一样涌如今一起。

到目前为止，我们已晓得怎样建立 React 元素了，但现实上我们只是“建立“罢了，离元素被真正展如今浏览器上，还查了症结的一步”衬着“。

在这里我们加快脚步，想要将之前建立好的 React 元素衬着出来，我们须要运用以下代码：

<div id="root"></div>

const element = <h1>Hello, world</h1>;

// 运用 ReactDOM.render API
ReactDOM.render(
  element,
  document.getElementById('root')
);

没错，id 为 root 的 DOM元素将会成为全部假造DOM树的根节点。至此，我们已控制了把 React 元素转换为假造DOM节点，再在浏览器上衬着出该元素的全部流程。但是，只是能够运用 React 衬着视觉元素还远远谈不上发挥了 React 的代价。别忘了 React 是作为大型前端框架存在的（虽然相较于其他大型前端框架，它的组件并不完整），React 的真正代价在于：运用 React 元素简约，高效的完成种种庞杂的营业逻辑。

怎样做到这一点呢？答案是运用React 组件。

02. React 组件

React 组件不仅能够使我们有才能打包一堆视觉元素而且还能够使我们有才能打包一系列相对应的交互行动。能够说：React 组件是组成 React 运用的基石。

那什么是 React 组件呢？你能够设想 React 组件就像是一个工场，它吸收一些列被称为属性的物料，终究临盆（返回）React 元素/组件。

让我们换个角度说，React 组件实质上就是一个 JavaScript 函数，它吸收一系列参数，返回 React 元素/组件。让我们看看它是被怎样誊写的：

import React form 'react'
import ReactDOM form 'react-dom'

function Button(props) {
    return <button>{props.buttonName}</button>
}

看到了吗，React 组件完全相符之前我们提到过的组件化头脑，吸收参数，返回UI元素。

以组件化的角度思索构建 React 运用是一个异常棒的主意，由于组件化就意味着模块化与可重用性。组件类就像是一个工场临盆组件的实例，这些组件类完全相符”单一相应准绳“与”DOT“准绳。

在 React 的官方文档中，大批的 React API 是关于组件的。因而组件是 React 异常重要的一个观点，从实质上说，组件是 React 赋予我们的重要的封装单位。经由过程一个个组件，我们能像搭积木一样疾速搭起一个具有庞杂交互逻辑和视觉界面的大型运用，而且运用中的每一个视觉单位又具有着异常清楚的义务。

愿望到这里你能体会到 React 在构建大型运用时的代价了，它使我们能够关注于运用中的一小部分，而不会无意中影响到运用的其余部分（即每一个组件都相符了”高内聚，低耦合“的准绳）。运用 React，我们更轻易写出清楚，文雅的代码。

03. 小结

末了，让我们再次总结在 React 中运用组件衬着界面的两点上风：

  1. 易于重用：我们能够在任何时候所在挪用一个组件；
  2. 轻易定制：经由过程赋予组件差别属性，我们能够获得差别的 UI 元素；

经由过程这一章的引见，愿望列位有所收成，假如有任何问题或发起，也迎接列位在批评区内留言，下一章见 🙌

PS：🔊假如你对该专题感兴趣，别忘了定阅本专栏，确保实时收到更新关照。记得点击下方👇的各个按钮，让我晓得你承认我的支付，这是鼓励我延续产出的动力和源泉 😎。

下个章节见 🎉 🙌 👋！

    原文作者：libinfs
    原文地址: https://segmentfault.com/a/1190000015667893
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞