Learning Path
浏览 React 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
51
React 简介 React 是由 Facebook（现 Meta）开发并于 2013 年开源的 JavaScript 库，专门用于构建用户界面，特别是单页应用程序（SPA）。 React 允许开发者使用声明式的方式来构建可复用的 UI 组件。 React 的定位 不是框架，而是库：React 专注于视图层（MVC 中的 V），不像 Angular 那样提供完整的框架解决方案 组件化思想：将 UI 拆分成独立、可复用..
React JSX JSX（JavaScript XML）是看起来像 XML 的 JavaScript 语法扩展，React 中常用它替代常规 JavaScript 来编写 UI 组件，让你能用类 HTML 的方式描述组件结构与行为。 使用 JSX 并非强制要求，但它具备以下核心优势： 执行高效：编译为 JavaScript 代码后经过优化，运行速度更快； 类型安全：编译阶段即可发现错误（配合 TypeScript 时效果更佳）； 编..
React 列表 & Keys 我们可以使用 JavaScript 的 map() 方法来创建列表。 React 实例 使用 map() 方法遍历数组生成了一个 1 到 5 的数字列表: [mycode3 type='js'] const numbers = [1, 2, 3, 4, 5]; const listItems = numbers.map((numbers) => {nu..
React Memo React.memo 是一个高阶组件（Higher Order Component, HOC），用于优化函数组件的性能。它通过记忆组件的渲染输出，在组件的 props 没有变化时跳过重新渲染，从而提高性能。以下是 React.memo 的详细介绍和使用方法。 1. 基本使用 React.memo 的基本使用方法是将一个函数组件作为参数传递给 React.memo，并返回一个记忆化的组件。 实例 [..
React 在线生成 现在第三方的 AI 工具越来越多，我么可以直接在线生成 React 项目进行学习测试。 本章节我们先用最简单的秒哒来生成应用（默认使用 React 框架），先访问官网注册 https://www.miaoda.cn，登录后，在输入框输入要生成的应用： 接下来秒哒就开始生成一份需求文档，还是很详细的，然后我们可以在右侧点编辑文档或生成应用按钮，它就会根据我们的需求直接开始生成应用： 接下来就会开始生成代码，整个过..
React 项目说明 一个典型的 React 项目由多个文件和文件夹组成，每个部分都有其特定的作用。 本章节将对 React 项目代码做基本的说明，帮助大家理解项目的结构和各个部分的功能。React 项目由多个文件和文件夹组成，核心文件包括 index.html、index.js 和 App.js。React 组件是应用的基本构建块，可以是函数组件或类组件。JSX 是 React 的核心语法，用于描述 UI。Props 和 State ..
React Props 在 React 中，Props（属性）是用于将数据从父组件传递到子组件的机制，Props 是只读的，子组件不能直接修改它们，而是应该由父组件来管理和更新。 state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。 使用 Props 传递 Props 语..
使用 Qoder 开发 React Qoder 是基于 VSCode 开源框架打造的 AI 编程平台，本章节我们将介绍使用 Qoder 开发 React。 Qoder（/ˈkoʊdər/）是一款面向真实软件开发的 Agentic 编码平台,通过增强上下文工程与智能体无缝结合，全面理解你的代码库，并以系统化方式推进开发任务。 Qoder 提供代码智能生成、智能问答、多文件修改、编程智能体等能力，思考更深入、编码更高效、构建更出色，为开发者..
React 测验 知识挑战 通过这些互动问题测试学习情况 ..
React componentDidMount() 方法 React 组件生命周期 componentDidMount() 方法格式如下： componentDidMount() componentDidMount() 方法在组件挂载后（插入 DOM 树中）立即调用。 依赖于 DOM 节点的初始化应该放在 componentDidMount() 方法中。 以下实例会先输出 runoob，然后使用 componentDidMount(..
React componentDidUpdate() 方法 React 组件生命周期 componentDidUpdate() 方法格式如下： componentDidUpdate(prevProps, prevState, snapshot) componentDidUpdate() 方法在组建更新后会被立即调用。 首次渲染不会执行此方法。 你也可以在 componentDidUpdate() 中直接调用 setState(..
React componentWillUnmount() 方法 React 组件生命周期 componentWillUnmount() 方法格式如下： componentWillUnmount() componentWillUnmount() 方法在组件卸载及销毁之前直接调用。 componentWillUnmount() 方法中不应调用 setState()，因为该组件将永远不会重新渲染。组件实例卸载后，将永远不会再挂载它。 ..
React constructor() 方法 React 组件生命周期 constructor() 方法格式如下： constructor(props) 在 React 组件挂载之前，会调用它的构造函数 constructor()。 React.Component 子类实现构造函数时，应在其他语句之前前调用 super(props)。 以下实例在创建组件时，React 都会调用构造函数： 实例 [mycode3 type=..
React getDerivedStateFromProps() 方法 React 组件生命周期 getDerivedStateFromProps() 方法格式如下： static getDerivedStateFromProps(props, state) getDerivedStateFromProps 会在调用 render 方法之前调用，即在渲染 DOM 元素之前会调用，并且在初始挂载及后续更新时都会被调用。 state ..
React getSnapshotBeforeUpdate() 方法 React 组件生命周期 getSnapshotBeforeUpdate() 方法格式如下： getSnapshotBeforeUpdate(prevProps, prevState) getSnapshotBeforeUpdate() 方法在最近一次渲染输出（提交到 DOM 节点）之前调用。 在 getSnapshotBeforeUpdate() 方法中，我..
React render() 方法 React 组件生命周期 在 React 18 中，ReactDOM.render 方法被 ReactDOM.createRoot 和 root.render 取代。新 API 提供了更强大的功能和更好的性能。以下是对这些方法的介绍及其使用方法。 1、ReactDOM.createRoot ReactDOM.createRoot 是 React 18 中引入的新方法，用于创建一个可以控制根组件的..
React shouldComponentUpdate() 方法 React 组件生命周期 shouldComponentUpdate() 方法格式如下： shouldComponentUpdate(nextProps, nextState) shouldComponentUpdate() 方法会返回一个布尔值，指定 React 是否应该继续渲染，默认值是 true， 即 state 每次发生变化组件都会重新渲染。 shouldCom..
React 参考手册 React 手册包含了各种核心 API、Hooks、组件生命周期方法等。 以下是一份完整的 React 参考手册，内容覆盖从基础到高级的所有核心概念（基于 React 18+ 现代实践，优先函数组件 + Hooks），每个表格包含概念/语法、描述、示例代码 和 注意事项。 1、JSX 基础 概念/语法 描述 示..
React Refs React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。 这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ），这样就可以确保在任何时间总是拿到正确的实例。 在 React 中，Refs（引用）提供了一种访问 DOM 元素或组件实例的方法。使用 Refs 可以直接操作 DOM 元素或获取子组件实例，适用于处理焦点、..
React 元素渲染 在 React 18 中，元素渲染与之前的版本有一些变化，特别是在使用 ReactDOM.createRoot 和新的并发特性方面。下面是一个详细的示例和解释，展示如何在 React 18 中渲染元素。 实例 [mycode4 type='js'] import React from 'react'; import ReactDOM from 'react-dom/..
React 路由 React 路由通常使用 react-router 库来实现，它是一个功能强大的库，用于在 React 应用程序中实现客户端路由。以下是关于如何在 React 中使用 React Router 的详细说明： 安装 React Router 首先，你需要安装 react-router-dom 包，这是用于在浏览器环境中实现路由的包。 npm install react-router-dom 基本用法 以下是使用 R..
React Sass Sass（Syntactically Awesome Stylesheets）是一种 CSS 预处理器。 Sass 允许你使用 CSS 中尚不存在的特性，比如变量、嵌套规则、混入、函数等等。 Sass 文件在服务器上执行，并将生成的 CSS 发送到浏览器。 你可以在我们的 Sass 教程 中了解更多关于 Sass 的信息。 安装 Sass 在终端中运行以下命令来安装 Sass： npm i sass 现在你已..
React 组件状态(State) 组件可以拥有状态（state），它是组件数据的私有部分，可以用来管理动态数据。 状态仅适用于类组件，或者使用 React 的 Hook 时可以在函数组件中使用。 React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。 React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作..
React Tailwind CSS 在 React 项目中使用 Tailwind CSS 是一个很流行的选择，因为它提供了一种实用工具优先的方法来编写 CSS，使得你可以直接在类名中应用样式，这种方法使得样式编写更加简洁和直观。 Tailwind CSS 教程：https://www.runoob.com/tailwindcss/tailwindcss-tutorial.html Tailwind CSS 官网：https://ta..