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 使用驼峰命名法 (camelCase) 来命名属性，例如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 的一项开发特性，它启用额外的安全功能来提升代码质量。它会在代码中显示有关潜在错误和 bug 的警告，并将警告记录到浏览器的控制台中。

严格模式示例



import { StrictMode } from 'react';

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

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。它通过简化状态管理和跨组件共享数据来避免props 的反复传递。使用 Context API，数据可以直接与使用它的子组件共享。

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

Provider用于包装组件树中您希望上下文可用的部分。它接受一个强制的 value prop，该 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>
  );
}

笔记：

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

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

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

受控组件

在受控组件中，表单的状态由组件自身管理。这是 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>导航的。<Route>haspath指定页面的 URL，以及element指定需要在定义路径上呈现的组件的属性。

笔记：

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

结论

学习任何编程语言的最佳方法是多练习项目。构建一些小项目，并尝试其中的概念。

如果你觉得这篇文章有用，别忘了继续点赞哦。下次再见，点赞、分享，一起学习吧！

您还可以通过此处以及在X、GitHub和LinkedIn上关注我来与我保持联系。

文章来源：https://dev.to/jitendrachoudhary/every-react-concept-explained-in-5-minutes-39b9