什么是JSX
const element = <h1>Hello, world!</h1>;
以上标签语法既不是字符串也不是 HTML,它被称为 JSX,是一个 JavaScript 的语法扩展。JSX 有点类似模板语言,但它具有 JavaScript 的全部功能。JSX 可以生成 React “元素”。
JSX 标签里可以包含很多子元素:
const element = (
<div>
<h1>Hello!</h1>
<h2>Good to see you here.</h2>
</div>
);
JSX中嵌入表达式
const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;
在 JSX 语法中,可以在大括号内放置任何有效的 Javascript 表达式:
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
const element = (
<h1>
Hello, {formatName(user)}! </h1>
);
JSX也是表达式
JSX也是一个表达式,可以在JavaScript方法中调用:
function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
JSX中指定属性
可以通过使用引号,来将属性值指定为字符串字面量:
const element = <a href="https://www.reactjs.org"> link </a>;
也可以使用大括号,来在属性值中插入一个 JavaScript 表达式:
const element = <img src={user.avatarUrl}></img>;
在属性中嵌入 JavaScript 表达式时,不能在大括号外面加上引号。应该仅使用引号(对于字符串值)或大括号(对于表达式)中的一个,对于同一属性不能同时使用这两种符号。
因为 JSX 语法上更接近 JavaScript 而不是 HTML,所以 React DOM 使用 camelCase(小驼峰命名)来定义属性的名称,而不使用 HTML 属性名称的命名约定。
例如,JSX 里的 class 变成了 className,而 tabindex 则变为 tabIndex。
元素渲染
调用 createRoot 方法创建根节点,再调用 render 方法在根节点下渲染元素:
import { createRoot } from "react-dom/client";
const element = <h1>Hello, world</h1>;
const container = document.getElementById("root");
const root = createRoot(container);
root.render(element);
元素的更新,修改上诉代码,添加计时器功能:
import { createRoot } from "react-dom/client";
const container = document.getElementById("root");
const root = createRoot(container);
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
root.render(element);
}
setInterval(tick, 1000);
运行代码可以发现只有时间部分再变化:
React 只更新它需要更新的部分。