React是一种用于开发交互式用户界面的JavaScript库。React还可用于开发单页应用程序(SPA)，从而提高应用程序性能。
最初作为前端JavaScript库开发，随着时间的推移，React已经发展成可以用于开发服务器端渲染以及移动应用程序。例如，React
Native用于开发iOS和Android移动应用。
React的发展
React由Facebook(现在称为Meta)的软件工程师Jordan Walke开发。Jordan Walke最初创建了一个名为'FaxJS'的原型。'FaxJS'首次部署在2011年的Facebook新闻动态中。2012年，Facebook收购了Instagram，并将'FaxJS'部署到了Instagram上。
2013年5月，React在美国的JSConf上正式发布，并成为开源项目。React由Facebook(现在称为Meta)维护，用于创建交互式的Web界面。
2015年2月，在React大会上，Facebook宣布了React Native的创建，后来在2015年3月成为开源项目。React Native用于开发iOS和Android应用程序。
2017年4月18日，Facebook宣布了一组名为React Fiber的新渲染算法。这种创新改进了以前被称为“Stack”的算法。'Stack'在渲染动态变化时速度较慢。与此同时，使用Fibers，页面的结构被分割成片段，这样就可以方便地独立维护和更新。
React的结构
在本节中，我们将介绍React的结构组成。我们将按照官方推荐的流程创建适用于开发的React应用程序。让我们开始吧。
官方文档建议在学习React或创建新的单页应用程序时使用Create React App。示例：
C:\Users\Username\Desktop\project_folder>npx create-react-app my-app创建了React应用程序之后，您的项目应该如下所示的文件结构。
my-app/
node_modules/
public/
favicon.ico
index.html
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
.gitignore
package.json
README.md现在，让我们探索上述文件和文件夹，并了解它们的用途。
node_modules文件夹
此文件夹包含项目所需的所有软件包和依赖项。当您安装这些依赖项和软件包时，它们会被下载并复制到node_modules文件夹中。请注意，由于该文件夹太大，建议不要将此文件夹提交到您的版本控制存储库中。
public文件夹
public文件夹包含index.html文件，您可以在其中设置页面标题和元标记。您可以在public文件夹中添加其他资产，例如样式表、脚本、图像和字体。
请注意以下几点：
Webpack不会处理public文件夹。
使用名为PUBLIC_URL的环境变量来引用public文件夹中的资产。例如，在index.html文件中使用它：
<link rel="icon" href="%PUBLIC_URL%/favicon.ico />src文件夹
src文件夹包含Webpack处理的文件——Webpack是React常用的JavaScript工具，用于打包和管理依赖项。所有的JavaScript文件和CSS文件必须位于src文件夹中，以便Webpack能够识别和处理它们。
src文件夹中的默认文件包括App.js、App.css、App.test.js、index.js、index.css等。在这个文件夹中，您也可以创建组件。让我们探索一下一些默认文件。
- App.js——根组件，包含要渲染的内容。虽然可以替换或重命名App.js。
- App.css——包含App.js组件的样式文件。
- App.test.js——默认的文件，您可以在其中进行基本测试。
- index.js——一个JavaScript文件，用于渲染我们的主要组件。
- index.css——包含项目的通用样式的文件。
请注意，public文件夹中的index.html和src文件夹中的index.js不能更改，以便项目可以构建。它们必须存在，并且文件名必须完全相同。
- gitignore文件
- gitignore文件指定Git应忽略和保持未跟踪的文件和文件夹。
package.json
此文件以JSON格式包含有关您的项目的重要信息。以下是package.json文件中的一些重要信息列表：
name——您的项目名称。它必须少于或等于214个字符
version——您的应用程序的当前版本
dependencies——软件包及其版本的集合
scripts——我们可以运行的一组节点命令。
Readme.md
这是一个包含项目摘要和说明的Markdown文件。
React的特点
React由许多令人惊叹且独特的特性组成。这些特性使React受欢迎，易于阅读和维护。让我们看一下React的一些主要特点。
组件
组件是独立且可重用的代码片段，用于创建用户界面。组件是JavaScript函数，返回HTML元素。组件使得React代码易于阅读和维护。它们还能够减少编写的代码量，因为它们是可重用的，即可以在应用程序的多个部分中使用。App.js是组件的一个例子。
JavaScript语法扩展
JavaScript语法扩展(JSX)也称为JavaScript XML，是一种JavaScript功能，允许我们在JavaScript代码中编写HTML元素。以下代码是JSX的一个示例。
const listItems = {
<ul className="listItems">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
}Babel库——JavaScript编译器——将HTML元素转换为纯JavaScript。JSX的重要性在于它简化了JavaScript代码，使其易于阅读，特别是对于熟悉HTML的人来说。
Props
React中的Props代表属性。它们是传递给React组件的参数，就像HTML属性一样。
<img src="./image.jpg" width="100" height="150">上面的代码是一个包含一些属性（src、width和height）的HTML图像标签。这些属性决定了图像的呈现方式。Props也是如此。它们是传递给组件的函数参数。Props是只读的，因此不能修改。让我们看一个关于props的简单示例。
<Car brand="Toyota">在上面的代码中，Car元素具有一个属性–brand。
函数Car(props){
return(
<h1>The Car brand is {props.name}</h1>
)
}
export default Car;接下来，为了渲染我们的属性，Car组件接收一个参数–props–可以是您选择的任何名称，如上面的代码所示。
简而言之，props存储了由React组件的子组件访问的数据。
React中的状态(States)是存储组件数据或信息的对象。与Props不同，状态是可变的，可以根据用户请求进行修改。当状态被修改时，React会重新渲染浏览器上的组件。让我们看一个状态的例子。
javascript
import React from "react";
class Car extends React.Component {
constructor(props) {
super(props);
this.state = {
brand: "Toyota",
model: "Mustang",
color: "Red",
year: "1964"
};
}
changeBrand = () => {
this.setState({ brand: "Honda" });
};
render() {
return (
The Car brand is {this.state.brand}
Click
);
}
}
export default Car;上面的代码显示了如下的屏幕截图：
state
当用户点击按钮时，根据代码中指定的内容，Toyota会更新为Honda。
请注意以下几点：
- 状态对象可以存储任意数量的属性。
- 状态对象是可变的，即可以根据用户请求进行修改。
- 使用setState方法来改变状态对象。
React Hooks
Hooks是一些函数，提供对状态和其他React功能的访问。借助React Hooks，不再需要使用类组件。
Hooks是在React版本16.8中引入的新功能。让我们来看一些这些React Hooks。
useState Hook
useState是一种用于跟踪状态的函数式Hook。useState接受一个初始值，并在用户请求时进行更新。
javascript
import { useState } from 'react';
function App() {
const [count, setCount] = useState(0);
const handleClick = () => {
setCount(count + 1);
};
return (
<>
You clicked me {count} times
Click me
);
}
export default App;上面的代码显示了如下的屏幕截图：
useState hook
上面的示例使用useState钩子接受一个初始值0，并在用户点击按钮时增加该值。
useEffect Hook
useEffect是一种执行副作用的钩子，例如从后端服务器获取数据、更新DOM、定时器等。useEffect接受两个参数：一个函数和一个依赖项(可选)。
javascript
import { useEffect } from 'react';
useEffect(() => {
// 每次渲染之后执行
}, []);上面是一个带有依赖项为空数组的useEffect钩子结构的示例。
其他React Hooks包括：
- useContext
- useRef
- useReducer
- useCallback
- useMemo
- 自定义Hooks
React的好处
React具有广泛的好处，可以用于多种目的。让我们来看一些好处。
- Web应用程序开发：React可以用于开发具有后端服务器的网站，使用React框架。其中一些框架包括Next.js、Gatsby、Remix等。
- 移动应用程序开发：React可以用于开发移动应用程序(iOS和Android)，使用React Native。
- 单页应用程序：React可以用于创建单页应用程序(SPA)。SPA在单个页面上呈现动态内容，减少加载时间并提高性能。
- 需求量大：React是最广泛使用的JavaScript库，用于开发交互式用户界面，因此对React开发人员的需求量很高。
- 易于维护：React应用程序使用独立组件开发。这些组件类似于JavaScript函数，但在独立模块中工作并返回HTML元素。因此，使得React易于阅读和维护。
可重用性：React组件是可重用的。换句话说，React组件可以在应用程序的多个部分中重复使用，从而减少需要编写的代码量，实现快速开发。
总结
本文帮助我们了解了React的基础知识。了解React的基本原理对于成为专业的React开发人员来说至关重要。本文中，我们学习了React的概述、历史、结构、特点以及React的好处。还有更多深入的React内容等待您去探索和实践，让您不断提升React的专业技能和经验。
