React 知命境（五）标签元素的本质

这是 React 知命境系列，关注这个标签，阅读所有文章

在 React 中，我们要熟悉一个新语法：JSX

它不是模板语法，而是 JavaScript 扩展语法，可以参与到 JavaScript 表达式的运算中

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

从长相上来说，它跟 html 标签几乎没有差别，但它不是 html。我们可以在 JavaScript 代码中任意拆分组合这些元素。

例如，一段完整的 html 元素如下：

<div>
  <header>header</header>
  <span>hello world.</span>
  <footer>footer</footer>
</div>

而 JSX 可以这样写

const header = <header>header</header>

const div = (
  <div>
    {header}
    <span>hello world.</span>
    <footer>footer</footer>
  </div>
)

还可以这样

const header = <header>header</header>

function footer() {
  return  <footer>footer</footer>
}

const div = (
  <div>
    {header}
    <span>hello world.</span>
    {footer()}
  </div>
)

这样的灵活性，为开发者在拆分逻辑时提供了巨大的想象空间。我们可以抽离任意部分单独处理，也可以将任意部分通过合适的方式组合在一起。

注意：JSX 代码需要在 React 环境之下才有效。并且我们需要将具备 JSX 代码的模块文件以 .jsx 或者 .tsx 为后缀名。

// React 环境
import React from 'react';

在 JSX 中，开发者可以在大括号中放置任何有效的 JavaScript 表达式。例如

const element = <div>计算结果：{2 + 2}</div>

或者

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

JSX 本身也是一个表达式，例如可以作为一个函数的返回结果。从视觉上看它是一个标签，但是当我们对其取值时，它本质是一个 JavaScript 对象。

在开发环境中，Babel 会把 JSX 编译成为一个名为 React.createElement() 的函数调用，如下两种写法完全等效

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

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

他们创建了一个这样的对象

// 注意：这是简化过的结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

标签元素是 React 组件的重要组成部分。

在开发中，我们通常会使用 JSX 的可任意拆分组合的特性，将整个项目拆分成许多模块，并最后组合成一个完整的 JSX，并使用 createRoot 渲染到已经存在的根 DOM 节点中。

import React from 'react';
// @ts-ignore
import { createRoot } from 'react-dom/client'

import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';


const root = createRoot(document.getElementById('root'))
root.render(<App />)

这些与 html 元素类似的标签元素，被称之为 React 元素。他们是不可变对象。一个元素就像电影中的一帧，它代表了某个特定时刻的 UI。

我们可以利用 React 元素创建自定义组件。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

每个自定义组件，也可以看成是一个 React 元素。

const element = <Welcome name="Tony" />;

在自定义时，标签元素上所有的属性以及该元素的子组件「children」，都会聚合到 props 中，也就是函数的第一个参数。

自定义组件必须以大写字母开头

注意：自定义组件也可以参与到 JSX 的任意拆分与组合中去。

本文主要内容在于阐述 JSX 语法并明确标签语言的本质，使用时重点要关注其可任意拆分组合的特性。

接下来的一章，我们要封装一个自定义的基础组件 Icon，进一步感受 props 的使用。

求点赞求分享求评论。由于文章推送算法调整，互动少不会推送到读者，互动一下表示认可，我会尽力保持高质量原创，万分感谢

最后编辑于：2022.04.13 23:10:35