React入门指南：JSX、Hooks与渲染机制详解

React是用于构建用户界面的强大JavaScript库。无论小型组件还是大型前端和全栈应用，React都能帮助创建交互式、高效和现代的功能。

什么是React？

React是基于组件的JavaScript库，用于高效构建用户界面。开发者使用React构建独立、可重用的组件，这些组件可以与其他隔离的用户界面组合，创建高度可扩展的应用程序。

React名称的由来

名称源于React渲染UI并对界面事件作出反应的概念。

React是框架吗？

不，React是库而非框架。它仅作为应用程序的附加功能，并非设计用作应用的主要支持系统。

如何向网站添加React组件

创建新项目目录

1
2


mkdir codesweetly-donation-ui-001
cd path/to/codesweetly-donation-ui-001

创建DOM容器

创建HTML页面并指定React管理的区域：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>CodeSweetly Donation UI</title>
  </head>
  <body>
    <div id="donation-ui"></div>
  </body>
</html>

导入React、Babel和组件

1
2
3
4


<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel" src="DonationUserInterface.js"></script>

创建组件

创建DonationUserInterface.js文件：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


function DonationUserInterface() {
  const [donate, setDonate] = React.useState(false);

  function createUserInterface() {
    if (donate) {
      return (
        <p>
          <a href="https://www.buymeacoffee.com/codesweetly">Support page</a>.
          Thank you so much! 🎉
        </p>
      );
    }
    return <button onClick={() => setDonate(true)}>☕ Buy me a coffee</button>;
  }
  return createUserInterface();
}

const root = ReactDOM.createRoot(document.getElementById("donation-ui"));
root.render(<DonationUserInterface />);

配置本地服务器

1
2


npm install servor@4.0.2 --save-dev
npx servor --browse --reload

什么是JSX？

JSX是JavaScript语法扩展，允许在JavaScript代码中直接使用类似HTML的语法构建React元素。

JSX使用技巧

将JSX像任何JavaScript表达式一样使用
多行JSX用括号包裹
表达式用花括号包裹
使用驼峰命名法命名属性
正确关闭空JSX标签
React组件只能返回单个元素

示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


function SupportCodeSweetly() {
  return (
    <div className="support-ui">
      <a
        id="support-link"
        className="support-link"
        target="_blank"
        href="https://www.buymeacoffee.com/codesweetly"
      >
        Buy me a coffee
      </a>
      . Thank you!
    </div>
  );
}

什么是React组件？

React组件是接受单个props参数并返回元素的类或函数。

组件语法

1
2
3


function MyBio(props) {
  return <h1>My name is {props.firstName}.</h1>;
}

组件最佳实践

组件名称首字母大写
不要在React组件标签中使用括号表示法表达式
组件作为纯函数效果最佳
在文件顶层创建组件
将长组件拆分为更小的块

如何从数组渲染元素列表

使用map()方法从数据数组创建React元素列表：

1
2
3
4
5


function BestColor() {
  const bestColors = ["Blue", "White", "Pink"];
  const bestColorsLiElements = bestColors.map((color) => <li key={color.id}>{color.name}</li>);
  return <ul>{bestColorsLiElements}</ul>;
}

键分配要点

在创建数组时设置每个数组元素的键
React不向组件传递键
始终在组件外部生成键

如何在React中处理事件

React中的事件处理涉及配置JSX元素以响应用户交互：

1
2
3
4
5


export default function App() {
  return <h1 onClick={handleClick}>Oluwatobi is my name.</h1>;
}

const handleClick = () => alert("You clicked the heading!");

什么是React状态？

React状态是组件的内存，用于存储在组件重新渲染期间React应该记住的数据，其更新应触发新的渲染。

状态语法

1
2
3
4
5
6


import { useState } from "react";

function App() {
  const [state, setState] = useState(initialState);
  // ...
}

示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


function AboutCompany() {
  const [age, setAge] = useState(5);

  function updateAge() {
    setAge(age + 1);
  }

  return (
    <div>
      <h3>CodeSweetly is {age} years old!</h3>
      <button type="button" onClick={updateAge}>
        Click to update age
      </button>
    </div>
  );
}

React触发 vs 渲染 vs 提交 vs 绘制

触发：指定要在屏幕上显示UI的组件
渲染：调用已触发的组件
提交：使用渲染组件的UI更新DOM
绘制：将提交的DOM代码转换为用户可以在浏览器中交互的用户友好元素

什么是React Ref Hook？

React Ref Hook允许存储更改时不会触发重新渲染的值。

Ref语法

1

useRef(initialValue);

示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


import { useRef } from "react";

function App() {
  const myNameRef = useRef("Oluwatobi");

  function handleClick() {
    console.log(myNameRef.current); // Outputs: "Oluwatobi"
  }

  return <button onClick={handleClick}>Click me</button>;
}

变量 vs Refs vs States

特性	React Ref	React State	JavaScript变量
值在重新渲染期间是否持久化	是	是	否
更新值是否触发组件重新渲染	否	是	否
是否为纯JavaScript	是	否	是
是否可以在组件外部声明	否	否	是

什么是useEffect Hook？

useEffect hook让函数组件在React外部执行副作用。

useEffect语法

1

useEffect(callback, array);

示例：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


import { useState, useEffect } from "react";

function AboutCompany() {
  const [age, setAge] = useState(5);

  useEffect(() => {
    document.title = `🥳🎁🎉 It's CodeSweetly's birthday! 🎉🎁🥳`;
  });

  return (
    <div>
      <h3>CodeSweetly is {age} years old!</h3>
      <button type="button" onClick={() => setAge(age + 1)}>
        Click to update age
      </button>
    </div>
  );
}

如何样式化React组件

1. 使用CSS样式表

1
2
3
4


.text {
  color: seagreen;
  font-weight: bold;
}

1
2
3
4
5


import "../styles.css";

function App() {
  return <div className="text">Oluwatobi is my name.</div>;
}

2. 使用内联样式属性

1
2
3
4


function App() {
  const textStyles = { color: "seagreen", fontWeight: "bold" };
  return <div style={textStyles}>Oluwatobi is my name.</div>;
}

3. 使用CSS模块

1
2
3
4
5


import codesweetlyStyles from "../styles.module.css";

function App() {
  return <div className={codesweetlyStyles.imageInfo}>Oluwatobi is my name.</div>;
}

4. 使用CSS-in-JS库

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


/** @jsxImportSource @emotion/react */

const codesweetlyStyles = {
  border: "8px ridge #71380f",
  backgroundColor: "#ffe5b4",
  padding: "20px 0 7px",
  textAlign: "center",
  color: "maroon"
};

function App() {
  return <div css={codesweetlyStyles}>Oluwatobi is my name.</div>;
}

本手册涵盖了开始使用React构建应用程序所需的核心概念，并通过示例练习了创建和样式化组件。