React入门-JSX与元素渲染

什么是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 只更新它需要更新的部分。