5 分钟内解释所有 React 概念

React 是一个 JavaScript 库，可让您在几分钟内开发前端代码。它具有预构建的方法和函数来执行某些任务。React 作为一个库包含复杂的术语，如协调、状态、道具等。它们实际上是什么意思？

在本文中，你将更加简单地了解这个夸张的概念。

1.组件

组件是一小段可重复使用的代码，可返回要在网页上呈现的 React 元素。它是一组代码，构成网页的单个部分，如按钮、导航栏、卡片等。它就像一个 JavaScript 函数，但返回一个呈现的元素。它接受称为“Props”的参数。组件以大写字母命名。

功能组件示例



function Heading(props) {
  return <h1>Join us, {props.name}!</h1>;
}

笔记：

建议使用功能组件，而不是基于类的组件。
当 UI 根据状态的值而不是 Prop 的值动态更新时，函数式组件通常被称为有状态组件。
当函数式组件使用 Prop 的值而不是状态的值来动态改变 UI 时，它被称为无状态组件。

2. JSX

JSX 是 JavaScript XML，它允许我们在 React 中编写 HTML。它引入了类似 XML 的标签和属性来创建 React 元素。它允许你在.jsx文件中编写类似 HTML 的代码，从而轻松创建 React 组件。JSX 无需使用复杂的 JavaScript，即可使代码更易读、更简洁。React DOM 使用驼峰命名法来命名属性，例如htmlFor, onClick。

JSX 示例



<h1 className="head">This is H1!</h1>

现在，TSX 是包含 JSX 语法的 TypeScript 文件的文件扩展名。使用 TSX，您可以使用现有的 JSX 语法编写类型检查的代码。TypeScript 不是另一种语言，它只是 JavaScript 的一个超集，添加了可选的静态类型。

更简单地说，使用 TSX 文件，您可以使用 TypeScript 和 JSX 一起编写 React 组件。

TSX 的示例



interface AgeProps {
  age: number;
}

const GreetAge = (props: AgeProps) => {
  return (
    <div>
      Hello, you are {props.age} old.
    </div>
  );
};

笔记：

JSX 文件使用 .jsx 文件扩展名。
TSX 文件使用“.tsx”文件扩展名。
TypeScript 的类型系统有助于在开发早期发现潜在的错误。

3.片段

React 中的 Fragments 允许您从组件返回多个元素。它对元素列表进行分组，而无需创建额外的 DOM 节点。它清除 DOM 中的所有额外 div。这可以快速呈现 UI。

片段示例



const App = () => {
  return  (
    <>
      <h1>Eat</h1>
      <button>Learn more</button>
      <p>Code is Fun</p>
      <button>Repeat</button>
    </>
  );
}

笔记：

片段使代码更加清晰，可读性更强。
它的内存效率很高。
它不能有 CSS 样式。

4.道具

“Props” 是 React 中一个特殊的关键字，代表属性。它用于在组件之间传输数据。数据传输是单向的，即从父组件到子组件。

道具示例



function Head(props) {
  return <p>{props.children}</p>;
}

注意：Props 是只读的，这确保子组件不会操纵来自父组件的值。

5.州

当用户交互时，组件需要跟踪某些值。假设当用户点击按钮时，亮/暗模式主题切换按钮会改变其值（从亮变为暗，反之亦然）。组件需要记住主题的当前值。在 React 中，这种特定于组件的内存称为状态。

状态是使用useState()钩子定义的；稍后会详细介绍。

定义状态的示例



const [index, setIndex] = useState(0)

注意：在顶级组件中定义状态始终是一个好的做法，以便轻松地与其他子组件共享并确保单一事实来源。

6.生命周期方法

生命周期方法是 React 类中可以使用的特殊函数，用于在组件存在的各个阶段执行操作。这些阶段包括：

安装：首次创建组件并将其插入到 DOM 中时。
更新：当组件的 props 或 state 发生变化时，导致组件重新渲染。
卸载：当一个组件从 DOM 中移除时。

7.纯度

函数式编程中的纯度是指给定的相同输入返回相同的输出。如果输入是决定输出的唯一因素，则该函数被称为纯函数。

在 React 中，如果一个组件对相同的输入返回相同的输出（即 props），则该组件被称为纯组件。

8.严格模式

严格模式是 React 中的一项开发功能，可启用额外的安全功能来提高代码质量。它会在代码中显示有关潜在错误和漏洞的警告。它会将警告记录到浏览器的控制台中。

严格模式示例



import { StrictMode } from 'react';

function App() {
  return (
    <>
     <StrictMode>
        <Header />
        <Sidebar />
        <Content />
        <Footer />
     </StrictMode>
    </>
  )
}

React 中的严格模式显示浏览器控制台

9.钩子

React 中的 Hooks 允许使用状态和其他 React 功能，而无需编写类组件。Hooks 是提供对 React 状态管理、副作用和其他功能的访问的函数。

一些常用的钩子：useState，，，等等useMemo。useRef

钩子示例



import React, { useState } from "react"; // Importing useState hook;

function FavoriteColor() {
  const [color, setColor] = useState("red"); // Initializing the state and setter function;

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")} // Updating the state;
        >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")} // Updating the state;
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("yellow")} // Updating the state;
      >Yellow</button>
      </>
  );
}

笔记：

Hooks 只能在 React 函数组件内部调用。
钩子只能在组件的顶层调用。
钩子不能是有条件的。

10.上下文 API

Context API 用于在组件树中共享状态、函数等数据，而无需在每个级别手动传递 props。它通过简化状态管理和在组件中共享数据来避免prop 钻取。使用 Context API，数据可直接与将使用它的子组件共享。

该createContext()方法用于创建上下文。此函数返回一个包含两个组件的上下文对象—— aProvider和 a Consumer。

Provider用于包装您希望上下文可用的组件树部分。它接受一个强制值 prop，其中包含您想要与其他组件共享的数据。

该useContext钩子用于访问数据。

Context API 示例

使用方法创建上下文createContext()。将子组件包装在 Context Provider 中并提供状态值。



import { useState, createContext} from "react";

const UserContext = createContext();

function ParentCounter() {
  const [count, setCount] = useState(10);

  return (
    <UserContext.Provider value={count}>
      <h1>{`Current Count: ${count}!`}</h1>
      <Button />
    </UserContext.Provider>
  );
}

使用useContext钩子来访问年龄的值。



import { useContext } from "react";

function GrandChildConsumer() {
  const count = useContext(UserContext);

  return (
    <>
      <h1>This is GrandChildConsumer</h1>
      <h2>{`Current Count: ${count}`}</h2>
    </>
  );
}

注意：为了获得更好的可读性和简单性，通常使用 useContext 钩子来代替 Consumer。

11.列表和键

AKey是 React 中列表项的一种特殊属性。当列表项被更新、删除或添加时，它充当每个列表项的唯一标识符。

不鼓励将项目的索引指定为，Key因为如果重新排列项目，它将影响预期的行为。

假设您在购物车中添加了 10 件商品，每件商品都有一个唯一索引Key。现在，您决定从购物车中删除第一件和第五件商品。当商品被移除时，索引将发生变化；第二件商品将成为第一件，第六件商品将成为第五件。

列表和键的示例



const fruits = ["apple", "banana", "orange"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}> {fruit} </li>
      ))}
    </ul>
  );
}

笔记：

建议使用字符串作为唯一标识列表中项目的“键”。
像 UUID 这样的第三方库提供了创建唯一键的功能。

12.表单：受控组件和非受控组件

与传统 HTML 表单相比，React 表单可以更好地收集和管理用户输入。这些表单使用组件构建，并将用户输入存储到状态中。有两种类型的组件：

受控组件

在受控组件中，表单的状态由组件本身管理。这是 React 中管理表单数据的推荐方法。当用户与表单交互（例如，在输入字段中输入内容）时，组件的状态会更新以反映更改。

受控组件示例



function ControlledInput() {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" value={name} onChange={handleChange} />
      <p>Your name is: {name}</p>
    </div>
  );
}

不受控制的组件

非受控组件依赖 DOM 来管理表单数据。该组件不直接控制表单的状态，但可以使用 ref 等 DOM 方法访问值。

不受控制的组件示例



function UncontrolledInput() {
  const nameRef = useRef(null);

  const handleClick = () => {
    console.log(nameRef.current.value);
  }

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" ref={nameRef} />
      <button onClick={handleClick}>Get Name</button>
    </div>
  );
}

笔记：

受控组件提供表单验证，因为用户的输入会因状态的使用而立即反映出来。
在不受控制的组件中无法进行表单验证，因为只有在提交表单后才能访问用户的输入。

13. React 路由器

React Router 导航简介
基本设置和使用
示例：创建路线并在页面之间导航

React Router 是 React 中用于路由的标准库。它支持在 React 应用程序中的各个组件之间导航。它允许更改浏览器 URL 并将 UI 与 URL 同步。React Router 对于创建具有导航功能的单页应用程序 (SPA) 非常重要。

首先，您需要从终端安装 React Router。

安装 React Router



# If you are using npm
npm install react-router-dom

# If you are using yarn
yarn add react-router-dom

React Router 示例



import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
      </Routes>
    </BrowserRouter>
  );
}

首先将您的内容包装到中<BrowserRouter>。然后我们定义<Routes>并在其中引入<Route>导航。has<Route>指定path页面的 URL，以及element指定需要在定义路径上呈现的组件的属性。

笔记：

一个应用可以有多个<Routes>。
<Route>可以嵌套。
react-router-dom 也有 <Link> 和 <Outlet> 组件用于导航。

结论

学习任何编程语言的最佳方法是多练习项目。建立小项目并试验概念。

菜单

分享

5 分钟内解释所有 React 概念

1.组件

2. JSX

3.片段

4.道具

5.州

6.生命周期方法

7.纯度

8.严格模式

9.钩子

10.上下文 API

11.列表和键

12.表单：受控组件和非受控组件

受控组件

不受控制的组件

13. React 路由器

结论

系统设计面试中的 19 种微服务模式

用 CSS 单行代码改进（几乎）每个项目

介绍开发百科全书：面向开发人员的“维基百科”

如何在 2025 年成为 AI 开发人员（完整指南 + 资源）

50 个 DevOps 项目构想助您打造技能：从初学者到高级

系统设计基础 - 缓存

DevOps 中的脚本：从初学者到高级的完整指南

能帮你节省大量时间的 6 大 CSS 速查表

拖延者的荣耀指南：将浪费的时间转化为职业黄金的开源项目

如何使用 Ollama 和 Open WebUI 在本地运行 Llama 3