ReactJS 初学者教程

作者： James Hartman James Hartman
小时 - 权威教程 更新于

什么是 ReactJS？

ReactJS 是一个用于构建用户界面的开源前端 JavaScript 库。ReactJS 由 Facebook 以及一个由独立开发者和公司组成的社区共同维护。它被广泛用作构建单页网站和移动应用的基础。它非常易于使用，并允许用户创建可重用的 UI 组件。

ReactJS 的特性

JSX：JSX 是 JavaScript 的一个扩展。虽然在 React 中使用 JSX 不是强制性的，但它是一个很好的特性，并且易于使用。

组件：组件就像纯粹的 JavaScript 函数，通过将逻辑拆分为可重用的独立代码，有助于简化代码。我们可以将组件用作函数和类。组件还有 state 和 props，这使得开发变得容易。在一个类中，每个 props 的 state 都会被维护。

虚拟 DOM：React 创建一个虚拟 DOM，即内存中的数据结构缓存。只有 DOM 的最终更改才会在浏览器的 DOM 中更新。

JavaScript 表达式：JS 表达式可以使用花括号（例如 {}）在 JSX 文件中使用。

ReactJS 的优点

以下是使用 ReactJS 的重要优点/好处：

  • ReactJS 使用虚拟 DOM，它利用内存中的数据结构缓存，只有最终的更改才会在浏览器 DOM 中更新。这使得应用程序更快。
  • 您可以使用 React 的组件功能创建您选择的组件。这些组件可以重用，也有助于代码维护。
  • ReactJS 是一个开源的 JavaScript 库，所以很容易上手。
  • ReactJS 在短时间内变得非常流行，并由 Facebook 和 Instagram 维护。许多著名公司如苹果、Netflix 等都在使用它。
  • Facebook 维护着 ReactJS 这个库，所以它得到了很好的维护并保持更新。
  • ReactJS 可用于为桌面和移动应用开发丰富的用户界面。
  • 易于调试和测试，因为大部分编码是在 JavaScript 中完成的，而不是在 HTML 中。

ReactJS 的缺点

以下是使用 ReactJS 的缺点/弊端：

  • 大部分代码是用 JSX 编写的，即 HTML 和 CSS 是 JavaScript 的一部分，这可能会有些混乱，因为大多数其他框架倾向于将 HTML 与 JavaScript 代码分开。
  • ReactJS 的文件大小较大。

通过 CDN 使用 ReactJS

要开始使用 React，我们首先需要安装 ReactJS。您可以轻松地通过使用 CDN JavaScript 文件来开始使用 ReactJS，如下所示。

访问 ReactJS 的官方网站以获取 CDN 链接，即 https://reactjs.ac.cn/docs/cdn-links.html，您将获得解释下图所需的文件。

Using ReactJS from CDN

用于开发

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

用于生产

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>		
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

将 version 替换为 react-development.js 和 react-dom.development.js 的最新 React 版本。您可以在自己的服务器上托管这些文件以开始使用 ReactJS。

如果您计划使用 CDN 文件，请确保保留 cross-origin 属性，以避免跨域问题。ReactJS 代码不能直接在浏览器中执行，需要使用 Babel 转译为 JavaScript 后才能在浏览器中执行。

这是可以使用的 BabelJS 脚本：

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

这是一个使用 CDN 文件和 BabelJS 脚本的 ReactJS 工作示例。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>   
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body> 
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>   
  </body>
</html>

输出

For prod Output

我们将在下一章详细介绍代码，这里我们先看看使用 CDN 文件的工作方式。据说直接使用 Babel 脚本不是一个好习惯，但新手可以暂时用它来学习 ReactJS。在生产环境中，您需要使用 npm 包来安装 React。

相关文章

使用 NPM 包

确保您已安装 NodeJS。如果尚未安装，请参阅此 NodeJS 教程 (https://guru99.com.cn/node-js-tutorial.html) 进行安装。

安装 NodeJS 后，创建一个文件夹 reactproj/。

要开始项目设置，请运行命令 npm init。

文件夹结构将如下所示：

reactproj\
package.json

现在我们将安装所需的包。

以下是 ReactJS 的包列表：

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

打开命令提示符，并在 reactproj/ 文件夹内运行上述命令。

创建一个文件夹 src/，所有的 JS 代码都将放在该文件夹中。ReactJS 项目的所有代码都将位于 src/ 文件夹中。创建一个文件 index.js 并添加 import react 和 react-dom，如下所示。

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

我们返回了 ReactJS 的基本代码。我们将在下一章详细解释它。我们希望显示 Hello, from Guru99 Tutorials，并将其赋予 ID 为“root”的 DOM 元素。这是从 index.html 文件中获取的，该文件是起始文件，如下所示。

创建一个文件夹 public/ 并在其中添加 index.html，如下所示：

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

react-scripts 包将负责编译代码并启动服务器以显示 HTML 文件，即 index.html。您需要在 package.json 中添加命令，该命令将负责使用 react-scripts 来编译代码并启动服务器，如下所示：

 "scripts": {
    "start": "react-scripts start" 
  }

安装所有包并添加上述命令后，最终的 package.json 如下：

Package.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

要开始测试 ReactJS，请运行命令：

npm run start

C:\reactproj>npm run start		
> reactproj@1.0.0 start C:\reactproj		
> react-scripts start

它将在浏览器中打开 URL https://:3000/，如下所示：

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Using NPM Packages

在接下来的章节中，我们也将使用相同的过程来执行 JavaScript 文件。将您所有的 .js 和 .jsx 文件添加到 src/ 文件夹中。文件结构将如下所示：

reatproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

如何创建您的第一个 React 项目设置

这是本 ReactJS 教程中开始第一个 React 应用程序的逐步指南。

步骤 1) 导入 React 包。
1. 要开始使用 ReactJS，我们首先需要导入 React 包，如下所示。

import React from 'react';	
import ReactDOM from 'react-dom';

2. 将文件保存为 src/ 文件夹中的 index.js

步骤 2) 编写简单代码。
在本 React JS 教程中，我们将编写一个简单的代码，显示消息 “Hello, from Guru99 Tutorials!”

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render 会将 <h1> 标签添加到 ID 为 root 的元素中。这是我们拥有的 HTML 文件：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

步骤 3) 编译代码。

接下来，在本 React.js 教程中，我们需要编译代码以在浏览器中获取输出。

这是文件夹结构：

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

我们已经在 package.json 中添加了编译最终文件的命令，如下所示：

"scripts": {
    "start": "react-scripts start"
  },

要编译最终文件，请运行以下命令：

npm run start

当您运行上述命令时，它将编译文件并在有任何错误时通知您，如果一切正常，它将打开浏览器并在 https://:3000/index.html 运行 index.html 文件。

命令：npm run start

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

步骤 4) 检查输出。
一旦代码编译完成，URL https://:3000 将在浏览器中打开，如下所示：

Output of First React Project

什么是 JSX？

JSX 是 JavaScript 的一个扩展。它是一种模板脚本，您可以在其中同时使用 HTML 和 JavaScript 的强大功能。

这是一个 JSX 代码的简单示例。

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

为什么我们需要在 React 中使用 JSX？

对于一个 UI，我们需要 HTML，并且 DOM 中的每个元素都需要处理事件、状态变化等。

在 React 中，它允许我们在同一个文件中使用 HTML 和 JavaScript，并以高效的方式处理 DOM 中的状态变化。

JSX 中的表达式

这是一个关于如何在 JSX 中使用表达式的简单示例。

在之前的 ReactJS 示例中，我们写过类似这样的代码：

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

我们现在将更改上面的代码以添加表达式。表达式用在花括号 {} 中，并在运行时展开。React 中的表达式与 JavaScript 表达式相同。

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

现在让我们在浏览器中测试一下。

Expressions in JSX Output

您可以看到 {display} 表达式没有被替换。当在 .js 文件中使用表达式时，React 不知道该怎么做。

现在让我们进行更改并创建一个 .jsx 文件，如下所示：

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

我们已经添加了所需的代码，并将在 index.js 中使用 text.jsx 文件。我们希望在 script.js 中使用 h1tag 变量，所以如上所示，在 test.jsx 中将其导出。

这是 index.js 中修改后的代码：

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);


要在 index.js 中使用 test.jsx，我们必须首先像下面这样导入它：

import h1tag from './test.jsx';

我们现在可以在 ReactDOM.render 中使用 h1tag，如下所示：

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

这是我们在浏览器中检查时的输出：

Output

ReactJS 中的组件是什么？

组件就像纯粹的 JavaScript 函数，通过将逻辑拆分为可重用的独立代码，有助于简化代码。

作为函数的组件

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
} 
const Hello_comp = <Hello />;
export default Hello_comp;


我们创建了一个名为 Hello 的函数，它返回了一个 h1 标签，如上所示。函数名充当一个元素，如下所示：

const Hello_comp = <Hello />;
export default Hello_comp;

组件Hello被用作一个 HTML 标签，即 <Hello />，并赋值给Hello_comp变量，然后使用 export 导出。

现在让我们在 index.js 文件中使用这个组件，如下所示：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

这是在浏览器中的输出：

Output of Components in ReactJS

作为组件的类

这是一个使用类作为组件的 ReactJS 示例。

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React. Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

我们可以在 index.js 文件中如下使用 Hello 组件：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

组件 Hello 被用作一个 HTML 标签，即 <Hello />。

这是它的输出。

Class as Component Output

ReactJS 中的 State 是什么？

State 是一个类似于 props 的 JavaScript 对象，它包含与 ReactJS render 一起使用的数据。State 数据是一个私有对象，在类内部的组件中使用。

State 示例

这是一个关于如何在类内部使用 state 的工作示例。

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

当我们在浏览器中测试它时，我们会得到这个：

State in ReactJS Output

ReactJS 中的 Props 是什么？

Props 是在组件内部使用的属性。它们就像全局对象或变量，可以在组件内部使用。

Props 到函数组件

这是一个将 props 传递给函数组件的示例。

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

如上所示，我们向 <Hello /> 组件添加了 msg 属性。这可以在 Hello 函数内部作为 props 访问，它是一个包含 msg 属性详细信息的对象，并被用作表达式。

该组件在 index.js 中使用如下：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

这是在浏览器中的输出：

Props to Function Component Output

Props 到类组件

要在类中访问 props，我们可以这样做：

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

msg 属性在 index.js 中传递给组件，如下所示：

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

这是在浏览器中的输出：

Props to Class Component Output

另请查看：- AngularJS 初学者教程：一步步学习 AngularJS

组件的生命周期

一个组件的生命周期分为初始化、挂载、更新和卸载阶段。

以下是关于每个组件的详细解释。

一个 ReactJS 组件有以下几个阶段：

初始化：这是组件生命周期的第一阶段。

在这里，它将具有初始级别的默认 props 和 state。

挂载：在这个阶段，组件被渲染到 DOM 中。在挂载状态下，我们可以使用以下方法。

  • componentDidMount()：当组件刚刚添加到 DOM 中时也会调用此方法。
  • render()：您为所有创建的组件都拥有此方法。它返回 HTML 节点。

更新：在此状态下，DOM 会被用户交互并更新。例如，您在文本框中输入一些内容，state 属性就会更新。

以下是更新状态中可用的方法：

  • shouldComponentUpdate()：在组件更新时调用。
  • componentDidUpdate()：在组件更新后调用。

卸载：当组件不再需要或被移除时，就会进入此状态。

以下是卸载状态下可用的方法：

componentWillUnmount()：当组件被移除或销毁时调用。

工作示例

这是一个工作示例，显示了在每个状态下调用的方法。

示例：complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }
  
  componentDidMount() {  
    console.log('Mounting State : calling method componentDidMount');
  }   
 
  shouldComponentUpdate() {  
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }  

  componentDidUpdate() {  
    console.log('Update  State : calling method componentDidUpdate')  
  }  
  componentWillUnmount() {  
    console.log('UnMounting State : calling method componentWillUnmount');
  }  

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

当您在浏览器中查看输出时

Output

在浏览器控制台中您会得到

Browser Console Output

当用户在文本框中输入时

User Values Output

控制台中显示以下消息

Console Output

处理表单

在 ReactJS 中，HTML 输入元素如 <input />、<textarea /> 和 <select /> 有它们自己的状态，当用户交互时需要使用 setState() 方法来更新。

在本章中，我们将学习如何在 ReactJS 中处理表单。

这是一个工作示例

form.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

对于输入字段，我们需要维护状态，为此 React 提供了一个特殊的方法叫做 setState，它有助于在发生变化时维护状态。

我们在文本框和提交按钮上使用了 onChange 和 onClick 事件。当用户在文本框中输入时，onChange 事件被调用，并且 state 对象中的 name 字段被更新，如下所示：

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

在浏览器中的输出如下：

Working with Forms Output

步骤 1) 在文本框中输入您的姓名

Working with Forms Output

  1. 点击提交按钮

Working with Forms Output

在 ReactJS 中处理事件

在 ReactJS 中处理事件与您在 JavaScript 中的做法相同。您可以使用 JavaScript 中使用的所有事件处理程序。当用户与任何 HTML 元素交互时，使用 setState() 方法来更新状态。

这是一个关于如何在 ReactJS 中使用事件的工作示例。

events.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

对于输入字段，我们需要维护状态，为此 React 提供了一个特殊的方法叫做 setState，它有助于在发生变化时维护状态。

我们在文本框和按钮上使用了 onChange 和 onClick 事件。当用户在文本框中输入时，onChange 事件被调用，并且 state 对象中的 name 字段被更新，如下所示：

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

这是在浏览器中的输出：

Working with Events Output

当用户输入姓名时

Working with Events Output

当用户点击“Click Here”按钮时

Working with Events Output

在 ReactJS 中使用内联 CSS

我们将看一个工作示例来理解在 ReactJS 中内联 CSS 的工作原理。

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};
  
function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

我为 h1 标签添加了 color: ‘red’ 样式。

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

在浏览器中的输出如下：

Working with Inline CSS Output

您可以创建一个您想要应用在元素上的样式对象，并使用表达式来添加样式，如上例所示。

在 ReactJS 中使用外部 CSS

让我们创建一个外部 CSS，为此创建一个文件夹 css/ 并在其中添加 style.css。

style.css

.h1tag {
color:red;
}

将 style.css 添加到您的 index.html 文件中

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head> 
  <body>
    <div id = "root"></div>
    <script src = "out/script.min.js"></script>
  </body>
</html>

现在让我们在 .jsx 文件中为 h1 标签添加类

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';
  
function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

className 属性被赋予了类名详情。现在让我们在浏览器中测试一下。

Working with External CSS Output

当您在浏览器中检查 h1 标签时，您会看到这个

Working with External CSS Output

您可以看到 class=” h1tag” 已成功添加到 h1 标签中。

摘要

  • ReactJS 是一个用于构建用户界面的开源前端 JavaScript 库。它由 Facebook 维护，并被当今许多公司用于 UI 开发。
  • ReactJS 的核心特性包括 JSX、组件（函数式组件和基于类的组件）、组件的生命周期、组件的 props 和 state 支持、以及使用 JavaScript 表达式。
  • ReactJS 的项目设置解释了如何使用 CDN 文件以及如何使用 npm 包来构建项目。
  • JSX 是 JavaScript 的一个扩展。它是一种模板脚本，您可以在其中同时使用 HTML 和 JavaScript 的强大功能。
  • 组件就像纯粹的 JavaScript 函数，通过将逻辑拆分为可重用的独立代码，有助于简化代码。
  • State 是一个类似于 props 的 JavaScript 对象，它包含与 ReactJS render 一起使用的数据。State 数据是一个私有对象，在类内部的组件中使用。
  • Props 是在组件内部使用的属性。
  • 一个组件的生命周期分为初始化、挂载、更新和卸载阶段。
  • 在 ReactJS 中，HTML 输入元素如 <input />、<textarea /> 和 <select /> 有它们自己的状态，当用户交互时需要使用 setState() 方法来更新。
  • 在 ReactJS 中处理事件与您在 JavaScript 中的做法相同。您可以使用 JavaScript 中使用的所有事件处理程序。当用户与任何 HTML 元素交互时，使用 setState() 方法来更新状态。
  • ReactJS 允许您使用 JavaScript 表达式来处理外部 CSS 以及内联 CSS。

另请查看：- 70 个热门 React 面试问题与答案（更新版）