React，也称为 ReactJS，是开发人员用来构建用户界面的 JavaScript 库，它改变了 Web 开发的格局。React 是一个库，而不是许多人认为的 JavaScript 框架。框架提供了完整的结构和工具集开发应用程序。就 React 而言，它被认为是一个库，因为它专注于提供构建用户界面的声明性方法。它由 Facebook 开发，Instagram、Netflix、Twitter 和 Dropbox 等公司在其产品开发中使用它。凭借其基于组件的架构、虚拟 DOM 和声明性语法，ReactJS 使开发人员能够高效地创建动态和交互式应用程序。本初学者指南旨在揭开 ReactJS 的神秘面纱，并为新手在这个强大的库中打下坚实的基础。
React 是后端还是前端？
React本质上是一个JavaScript前端库。它用于构建用户界面和处理Web应用程序的视图层。借助React，开发人员可以轻松管理可重用UI组件的状态和渲染。为了创建在线应用程序面向用户的部分，它经常与 HTML、CSS 和 JavaScript 等其他前端技术一起使用。
React 还可以在后端与 Next.js 或 Gatsby 等框架一起使用，它们分别支持服务器端渲染或静态网站的创建。在这些场景中，React 仍然主要用于前端功能，但它也可以用于在后端生成服务器渲染或静态 HTML。
先决条件
在开始使用 React 之前，您应该了解一些事情。
超文本标记语言
HTML（超文本标记语言）是用于创建网页结构和内容的标准标记语言。它定义了用于表示网页中不同组件和内容的元素和标签。下面是一个示例代码片段，演示了 HTML 文档的基本结构：
Sample HTML Page
Welcome to My Web Page
About Me
I am a web developer passionate about creating user-friendly and interactive websites.
Contact Information
Email: example@example.com
Phone: 123-456-7890
CSS
CSS（层叠样式表）是一种样式语言，用于定义网页上 HTML 元素的视觉外观和布局。下面是一个示例代码片段，演示了如何使用 CSS 来设置 HTML 文档的样式：
Sample HTML Page
/* Set common styles for body */
body{font-family:Arial,sans-serif;background-color:#f1f1f1;color:#333}
/* Styles for the header */
header{background-color:#333;color:#fff;padding:10px}
/* Styles for the main heading */
h1{font-size:24px;margin:0}
/* Styles for the navigation menu */
nav ul{list-style-type:none;margin:0;padding:0}
nav ul li{display:inline-block;margin-right:10px}
nav ul li a{color:#fff;text-decoration:none}
/* Styles for the main content area */
main{margin:20px}
/* Styles for the section containers */
section{background-color:#fff;padding:10px;margin-bottom:20px}
/* Styles for the section headings */
h2{font-size:18px}
/* Styles for the footer */
footer{background-color:#333;color:#fff;padding:10px;text-align:center}
Welcome to My Web Page
About Me
I am a web developer passionate about creating user-friendly and interactive websites.
Contact Information
Email: example@example.com
Phone: 123-456-7890
JavaScript
JavaScript 知识非常重要，因为 React 是一个 JavaScript 库。以下是一些与 React 特别相关的关键概念：
变量和数据类型：了解如何使用 var、let 和 const 关键字声明变量，并熟悉不同的数据类型，如字符串、数字、布尔值、数组和对象。
函数和范围：了解如何定义函数、传递参数和返回值。了解范围的概念，包括全局范围和局部范围，以及如何在不同范围内访问变量。
数组和对象：了解如何使用数组和对象，包括常见操作，例如访问元素、添加或删除项目、迭代它们以及操作它们的属性。
循环和迭代：使用 for 和 while 等循环来迭代数组或执行重复任务。理解循环控制语句，如break和continue控制循环执行。
DOM 操作：了解文档对象模型 (DOM) 以及如何使用 JavaScript 操作它。了解如何选择和修改 HTML 元素、处理事件以及动态更新元素的内容或样式。
Promise 和异步编程：掌握 Promise 和异步编程的概念，以处理异步操作，例如进行 API 调用或在不阻塞主线程的情况下执行耗时的任务。
ES6+ 功能：熟悉 ECMAScript 6 及更高版本中引入的现代 JavaScript 功能，例如模板文字、解构赋值、扩展语法、类、模块等。这些功能增强了代码的可读性、可维护性和生产力。
React 的关键概念
1. 组件
ReactJS 围绕组件的概念，组件是独立的、可重用的构建块，封装了特定的功能和用户界面。了解 React 组件对于使用 ReactJS 开发应用程序至关重要。创建 React 组件时，组件名称必须以大写字母开头。
功能组件
功能组件是返回 JSX (JavaScript XML) 元素的 JavaScript 函数。它们更简单，通常用于无状态和演示组件。这是一个例子：
function MyComponent() {
return Hello, World!;
}类组件
类组件是扩展“React.Component”类的 ES6 类。它们具有附加功能，例如状态管理和生命周期方法，使它们适合更复杂的组件。
class MyComponent extends React.Component {
render() {
return Hello, World!;
}
}道具
Props（属性的缩写）允许将数据从其父组件传递到组件中。它们是不可变的，用于自定义组件的行为或外观。Props 就像函数参数，您将它们作为属性发送到组件中。这是传递和访问 props 的示例。
function Greeting(props) {
return Hello, {props.name}!;
}
// Usage: 状态
State 对象是存储属于组件的属性值的地方。State 表示组件的内部数据，可以随时间变化。类组件可以使用 this.state 对象定义和管理状态。状态更新触发组件重新渲染。下面是一个例子
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
increment() {
this.setState({ count: this.state.count + 1 });
}
render() {
return (
Count: {this.state.count}
);
}
}2.JSX（JavaScript XML）
借助 React 中使用的 JSX 语法扩展，您可以在 JavaScript 中编写类似 HTML 的代码。它提供了一种简洁而富有表现力的方式来定义 UI 组件的结构和外观。
语法
JSX 语法类似于 HTML，但它实际上不是 HTML。它是一个语法扩展，可以使用 Babel 等构建工具转换为 JavaScript。JSX 元素看起来像 HTML 标签，但在 JavaScript 中定义。JSX 不是强制使用的，因为还有其他方法可以实现相同的效果，但使用 JSX 可以更轻松地开发 React 应用程序。
const element = Hello, JSX!
;您可以使用大括号 {} 在 JSX 中嵌入 JavaScript 表达式。这允许您动态计算和显示 JSX 元素中的值。
const name = 'John Doe';
const element = Hello, {name}!
;JSX 通常在 React 组件中用于定义 UI 的结构和内容。您可以直接在组件的“render()”中编写 JSX 元素
class MyComponent extends React.Component {
render() {
return (
Welcome to My Component
This is a paragraph within the component.
);
}
}3. 虚拟DOM
DOM 代表文档对象模型。HTML 或 XML 文档的结构和内容由此 Web 文档编程接口中的逻辑树结构表示。程序可以使用 DOM 访问、修改和更新网页中包含的组件、属性和文本。
当网页加载到浏览器中时，浏览器会解析 HTML 或 XML 文档并构造 DOM 树，表示文档的结构。树中的每个元素称为“节点”，节点可以具有父子关系。例如，元素是 DOM 树的根，具有 head 和 body 等子节点，而这些子节点又具有自己的子节点。下面是 HTML 文档的 DOM 树的简化可视化表示。
html
├── head
│ └── title
│ └── "Document Title"
└── body
├── h1
│ └── "Heading"
└── p
└── "Paragraph text"React 引入的 Virtual DOM 是内存中实际 DOM 的轻量级表示。它是 React 维护的 DOM 树的虚拟副本。React 使用虚拟 DOM 作为协调机制来有效地更新和渲染组件，最大限度地减少对实际 DOM 的直接操作。
通过使用虚拟 DOM，React 可以执行高效的比较算法来识别和更新先前状态和当前状态之间的必要更改。这种优化减少了实际 DOM 操作的数量，从而实现更快、更高效的组件渲染。
4. 状态
状态是 React 中的一个基本概念，表示组件的内部数据。它使组件能够控制和监视数据随时间的变化。为了创建动态和交互式 React 应用程序，了解状态如何工作以及如何使用它至关重要。
状态表示可以改变组件的行为或外观并对组件的行为或外观产生影响的数据。根据其携带的数据的变化，状态使组件能够更新和重新渲染。
状态管理包含在类组件中。使用“this.state”，组件的构造函数定义初始状态。通常，状态是具有代表各种数据字段的键值对的对象。组件的渲染方法访问并使用状态数据来生成用户界面。
import React from 'react';
class Counter extends React.Component {
constructor(props) {
super(props);
// Initial state with count set to 0
this.state = {
count: 0
};
}
incrementCount() {
// Update the count state by incrementing the current value
this.setState({ count: this.state.count + 1 });
}
render() {
return (
{/* Display the current count value from state */}
Count: {this.state.count}
{/* Button triggers the incrementCount method */}
);
}
}5.道具
Props（属性的缩写）是 React 中的一个基本概念，它允许数据从父组件传递到其子组件。Props 使父组件能够控制和自定义其子组件的行为和外观。
在 JSX 中，props 作为属性提供给子组件。props 由父组件定义，父组件也为它们提供值。子组件获取道具并可以利用它们来实现功能或渲染。通过 props 对象，我们可以访问组件内部的 props。Props 作为函数组件的参数提供。使用“this.props”方法在类组件内访问道具。
// Parent Component
class ParentComponent extends React.Component {
render() {
const name = 'John Doe';
const age = 25;
return (
Parent Component
{/* Passing props to the child component */}
);
}
}
// Child Component
const ChildComponent = (props) => {
// Accessing props within the child component
const { name, age } = props;
return (
Child Component
Name: {name}
Age: {age}
);
}道具与状态
可变性
状态：状态是可变的，并且有一个 setState() 方法来更新它。一旦状态发生变化，React 就会自动再次渲染页面。
Props：由于 props 是只读的，因此子组件不应更改它们。它们原封不动地从父组件转移到子组件。
所有权
状态：每个元素都控制自己的状态。定义它的组件拥有并管理状态。
Props：父组件将 props 传输给其子组件。子组件接收并使用由父组件拥有和控制的 props。
范围
状态：状态是已定义组件的本地属性。其他组件不能立即访问或修改它。
Props：提供给它们的子组件可以访问这些 props。在子组件的范围内，它们是可访问的。
渲染和更新
状态：当使用 setState() 更新状态时，React 会强制重新渲染组件和任何子组件，从而在用户界面中反映修改后的状态。
Props：当父组件的 props 更改时，React 会立即将这些更改传播到子组件，从而导致受影响的子组件重新渲染。
6. 组件生命周期
生命周期方法是 React 中预定义的方法，在组件存在的不同阶段调用。它们包含一些钩子，可让您在组件生命周期的精确点运行代码，以执行初始化状态、获取数据、更改用户界面或耗尽资源等任务。
React 中的组件的生命周期分为几个阶段。在组件生命周期的特定时间，每个阶段的一组生命周期方法都会被调用。这些方法使您能够管理组件的行为并在其生命周期的不同阶段执行特定任务。
安装阶段、更新阶段和卸载阶段是组件生命周期的三个关键阶段。
安装阶段
Mounting 是向 DOM 添加元素的过程。
挂载组件时，React 的四个内置函数会按以下顺序调用：
- constructor() – 在初始化和构造组件时调用。
- getDerivedStateFromProps() – 在收到新道具时在渲染之前调用。
- render() – 渲染组件的 UI
- componentDidMount() – 在组件渲染到 DOM 后立即调用。
class MountingComponent extends React.Component {
constructor(props) {
super(props);
// Initializing state in the constructor
this.state = { count: 0 };
}
componentDidMount() {
// Executed after the component is mounted
// Perform side effects, such as data fetching or subscribing to events
console.log('Component mounted!');
}
render() {
return Mounting Phase Example;
}
}更新阶段
当组件的状态或属性需要在 DOM 中更新时，就会发生此阶段。
React 有五个内置方法，当组件更新时，这些方法将按以下顺序调用：
- getDerivedStateFromProps() – 与安装阶段类似，当收到新的 props 时调用它。
- shouldComponentUpdate() – 确定组件是否应该重新渲染。
- render() – 渲染更新后的 UI
- getSnapshotBeforeUpdate() – 在虚拟 DOM 的更改反映到实际 DOM 之前调用。
- componentDidUpdate() – 在组件更新并且更改反映在 DOM 中后调用。
class UpdatingComponent extends React.Component {
constructor(props) {
super(props);
this.state = { count: 0 };
}
componentDidUpdate(prevProps, prevState) {
// Executed after the component is updated
// Perform side effects based on prop or state changes
console.log('Component updated!');
}
handleClick = () => {
// Updating the state triggers component re-rendering
this.setState({ count: this.state.count + 1 });
};
render() {
return (
Count: {this.state.count}
);
}
}卸载阶段
这是生命周期阶段，组件从 DOM（文档对象模型）中卸载，并且不再呈现或可访问。
React 只有一个内置方法，当组件被卸载时会被调用：
- componentWillUnmount() – 在组件被卸载并从 DOM 中删除之前调用。
class UnmountingComponent extends React.Component {
componentWillUnmount() {
// Executed before the component is unmounted
// Perform cleanup, such as cancelling timers or unsubscribing from events
console.log('Component unmounted!');
}
render() {
return Unmounting Phase Example;
}
}7. 挂钩
React 16.8 中添加的一个关键思想是钩子的概念，它使功能组件能够在不使用类组件的情况下管理生命周期事件、保持状态和处理副作用。它们提供了一种更清晰、更符合逻辑的方式来创建 React 组件。我们可以使用钩子“挂钩”React 功能，例如状态和生命周期方法。
以下规则适用于钩子：
只有 React 函数组件才能使用钩子；其他组件则不能。
只有组件的顶层才能调用钩子。
钩子不能是有条件的
UseState() 是一个钩子，可以使状态出现在功能组件中。功能组件可以使用多个 useState() 钩子来管理各种状态组件。
UseEffect() 是一个钩子，用于控制功能组件内部的生命周期活动和意外后果。回调函数和可选的依赖项数组分别是 useEffect() 的第一个和第二个参数。
附加挂钩
- 功能组件可以使用上下文来使用来自上下文提供者的值。
- 对于管理复杂的状态更新，useReducer 是 useState 的替代方案。
- UseRef 支持直接 DOM 操作以及跨渲染保存值。
自定义 Hooks
如果您有必须在多个组件中重用的状态逻辑，您可以创建自己独特的 Hooks。自定义挂钩是带有 use 前缀的常规 JavaScript 函数。
import React, { useState, useEffect } from 'react';
const ExampleComponent = () => {
// State hook to manage a counter
const [count, setCount] = useState(0);
// Effect hook to perform side effect
useEffect(() => {
// Update the document title with the current count
document.title = `Count: ${count}`;
}, [count]);
// Event handler to increment the count
const incrementCount = () => {
setCount(count + 1);
};
// Render the component
return (
Example Component
Count: {count}
);
};在上面的例子中：
- useState 钩子用于声明状态变量 count 和函数 setCount 来更新它。count 的初始值设置为 0。
- useEffect 钩子用于执行副作用。它采用回调函数作为第一个参数，该函数用当前计数更新文档标题。第二个参数是一个数组[count]，指定效果的依赖关系。每当计数发生变化时，效果就会重新运行。
- incrementCount 函数是一个事件处理程序，它通过使用新值调用 setCount 来更新计数状态。
组件的 UI 呈现计数的当前值、用于增加计数的按钮以及组件的标题。
反应特性
尽管“React 概念”和“React 功能”这两个短语的含义略有不同，但它们有时可以互换使用。React 概念是 React 所使用的设计和开发方法的基本概念和原则。另一方面，React 特性是指 React 开箱即用的特定功能和能力。以下是 React 的一些关键特性：
虚拟DOM
React 使用 DOM 的虚拟版本，称为虚拟 DOM。React 的抽象性避免了直接的 DOM 操作，可以快速有效地更新和渲染组件。React 使用的 diffing 算法计算所需的先前状态和当前状态之间的最小变化，从而优化渲染性能。
基于组件的架构
React 是一种基于组件的架构，其中用户界面分为可重用和独立的组件。复杂的用户界面可以更容易地管理和推理，因为组件封装了它们的逻辑、状态和 UI。组件的重用促进了代码的模块化和可维护性。
JSX
JSX 是一种 JavaScript 语法扩展，使您能够在 JavaScript 内构造类似 HTML 的代码。借助 JSX，可以通过将 HTML 和 JavaScript 融合到单个文件中来创建声明式 UI。它提高了可读性，提供了类似于标记的框架，并且可以将 JavaScript 表达式和逻辑无缝合并到 UI 代码中。
单向数据流
React 遵循单向数据流，通常称为单向数据绑定。Props 让数据从父组件传递到子组件。这种设计模式保证了可预测的数据流，并使应用程序状态更改调试变得更加容易。
可重用的 UI 组件
React 支持开发可重用的用户界面元素。可以创建一个可以在项目之间或与 React 社区轻松共享的组件库。可重复使用的部件提高了开发的一致性、可维护性和效率。
性能优化
React 提供了优化方法来增强应用程序的性能。利用 Virtual DOM 并将重要的想法付诸实践，例如 memoization 和 shouldComponentUpdate（或用于功能组件的 React.memo），可以减少不必要的重新渲染次数，从而加快渲染速度并提高整体性能。
ReactJS 入门
到目前为止我们发现的一切都是在测试环境中发生的。我们讨论了在 HTML 文件中编写 React 代码以快速与 React 交互。我们将为这部分中准备投入生产的应用程序设置开发环境。构建并部署它将使我们能够实现这一目标。设置 ReactJS 开发环境有几个关键阶段。以下是为您提供帮助的入门手册：
Node.js 和 npm
确保您的计算机上安装了 Node.js。Node.js 包含 npm（节点包管理器），您将使用它来管理依赖项和运行脚本。可以从官网下载Node.js https://nodejs.org/en
创建新的 React 项目
安装 Create React App 后，您可以通过在终端或命令提示符中运行以下命令来创建新的 React 项目
npx create-react-app my-react-app将 my-react-app 替换为您的项目所需的名称。此命令使用项目结构创建一个新目录并安装必要的依赖项
导航到项目目录
创建项目后，使用以下命令导航到项目目录
cd my-react-app启动开发服务器
要启动开发服务器并运行您的 React 应用程序，请使用以下命令
npm start此命令将启动开发服务器并在浏览器中打开您的 React 应用程序。默认情况下，它在http://localhost:3000上运行。
编辑和实验
开发服务器运行后，您可以开始编辑 React 组件。Create React App 创建的项目结构在 src 文件夹中包含一个示例组件 (App.js)。您可以根据您的要求修改此组件或创建新组件。
这是 React 应用程序基本结构的直观表示
my-react-app
├── README.md
├── node_modules/
├── package.json
├── .gitignore
├── public/
│ ├── index.html
│ └── favicon.ico
└── src/
├── App.js
├── App.css
├── index.js
├── index.css
└── logo.svg反应工具
请记住，我们讨论了使用 React 进行开发之前所需的先决条件，但另一方面，React 工具是使开发变得简单、顺利的工具。我们将研究其中一些对开发至关重要的工具。
包管理器– 您可以使用包管理器安装、管理和更新 React 应用程序的依赖项。Yarn 和 npm（Node Package Manager）是 React 生态系统中使用最广泛的两个包管理器。
代码编辑器– 为了帮助您编写清晰且无错误的代码，一个不错的代码编辑器提供了语法突出显示、代码完成和 linting 等工具。Visual Studio Code、Sublime Text 和 Atom 是开发 React 应用程序的三种常用代码编辑器。我个人使用 Visual Studio Code。
开发者工具– 浏览器插件 React Developer Tools 提供了许多用于研究 React 组件层次结构、跟踪状态变化和性能监控的工具。Chrome 和 Firefox 都有它的扩展。
Bundler – 您的 JavaScript、CSS 和其他组件由捆绑器组合和优化，以创建可用于生产的捆绑包。React 项目中常用的打包器是 Webpack。它使资产优化、热模块替换和代码分割等功能成为可能。
转译器– 转译器使您能够通过将现代 JavaScript 语法 (ES6/ESNext) 转换为可用的形式来创建可在旧版浏览器中运行的向后兼容的代码。Babel 是 React 项目中经常使用的转译器。
Linting – 通过发现代码中的潜在错误、风格违规和最佳实践违规，linter 有助于提高代码质量和一致性。流行的 JavaScript linter ESLint 具有专为 React 开发设计的预设。
测试– 开发可靠的 React 应用程序需要强大的测试策略。为了编写 React 组件的单元测试和集成测试，经常使用 Jest、React Testing Library 和 Enzyme 等软件。
CSS 预处理器– 您可以使用 CSS 预处理器（例如 Sass 或 Less）为您的 React 项目开发模块化、可重用的 CSS 样式。
版本控制– 对于控制和在代码库上协同工作至关重要。最流行的版本控制程序称为 Git。用于版本控制和协作的存储库由 GitHub、GitLab 或 Bitbucket 等托管系统提供。
部署– 有多种常见选项可用于托管 React 应用程序，包括 Netlify、Vercel、Firebase 以及 AWS、Azure 或 Google Cloud 等云计算提供商。
构建一个简单的 React 组件
下面是一个显示“Hello, World!”的基本组件示例。信息
import React from 'react';
const HelloWorld = () => {
return Hello, World!
;
};
export default HelloWorld;代码分解
我们从“react”包中导入 React。这是使用 JSX 和创建 React 组件所必需的。
我们将 HelloWorld 组件定义为返回 JSX 的 JavaScript 函数。该组件由一个带有文本“Hello, World!”的元素组成。
使用导出默认语法导出该组件，以便可以将其导入并在应用程序的其他部分中使用。
渲染组件
现在我们有了 HelloWorld 组件，我们可以通过导入和渲染它来在我们的应用程序中使用它。例如，我们可以转移到 App.js 并使用其中的 HelloWorld 组件
import React from 'react';
import HelloWorld from './HelloWorld';
const App = () => {
return ;
};
export default App;在此示例中，我们从“./HelloWorld”文件导入 HelloWorld 组件，并将其呈现在 App 组件中。现在，如果您在应用程序的入口点 (index.js) 中呈现 App 组件，您应该会看到“Hello, World!” 屏幕上显示消息。
输出
你好，世界！
反应项目
我们可以使用 React 构建一些项目。
初学者项目
- 待办事项列表：创建一个简单的待办事项列表应用程序，用户可以在其中添加、删除任务并将任务标记为已完成。
- 天气应用程序：构建一个天气应用程序，根据用户的位置或搜索输入显示当前的天气状况。
- 食谱查找器：开发一款应用程序，允许用户根据食材或特定菜肴搜索食谱。
- 作品集网站：创建个人作品集网站，展示您的技能、项目和联系信息。
中间项目
- 电子商务商店：构建具有产品列表、购物车功能和用户身份验证等功能的电子商务商店。
- 社交媒体源：开发一个社交媒体源应用程序，显示用户的帖子，允许点赞和评论，并提供实时更新。
- 博客平台：创建一个博客平台，用户可以在其中创建、编辑和发布博客文章，并提供用户身份验证和评论部分。
- 电影推荐应用程序：构建一个电影推荐应用程序，根据用户偏好、类型和评级推荐电影。
高级项目
- 实时聊天应用程序：使用 React、WebSocket 和用于处理消息的后端服务器等技术开发实时聊天应用程序。
- 协作代码编辑器：构建一个允许多个用户实时一起编码的代码编辑器，具有语法高亮、代码共享和协作功能。
- 财务仪表板：创建显示数据可视化、预算跟踪和费用分析的财务仪表板。
- 多用户任务管理：构建具有任务分配、通知和进度跟踪等功能的多用户任务管理系统。
拥抱 React，让自己沉浸在其生态系统中，并踏上构建引人入胜且创新的 Web 应用程序的激动人心的旅程。快乐编码！
服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net
相关推荐: 【ODPS新品发布第2期】实时数仓Hologres：推出计算组实例/支持JSON数据/向量计算+大模型等新能力
数据技术都能四世同堂，凭什么开发 30 岁就要被干掉？ 阿里云ODPS系列产品以MaxCompute、DataWorks、Hologres为核心，致力于解决用户多元化数据的计算需求问题，实现存储、调度、元数据管理上的一体化架构融合，支撑交通、金融、科研、等多场…
