这是 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 的使用。
求点赞求分享求评论。由于文章推送算法调整，互动少不会推送到读者，互动一下表示认可，我会尽力保持高质量原创，万分感谢
网友评论