React 入门指南：基本概念与实例解析

ゝ一世哀愁。 2023-09-27 17:38 19阅读 0赞

## React 简介及实例分析 ##

### 什么是 React？ ###

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发。React 以其组件化的思想，强大的性能优化能力以及简洁明了的语法结构而受到广泛欢迎。

### React 的核心概念 ###

React 的核心概念包括组件、状态（State）和属性（Props）。组件是 React 应用程序的基本构建块，用于构建可复用的 UI 元素。状态是组件内部的数据，可以根据用户交互或其他事件发生改变，从而触发组件的重新渲染。属性则是从父组件向子组件传递数据的一种方式。

### React 示例：一个简单的计数器应用 ###

下面的示例演示了如何使用 React 创建一个简单的计数器应用。

首先，我们创建一个名为 Counter 的组件。组件的代码如下：

import React, {
         useState } from 'react';
    
    function Counter() {
        
      const [count, setCount] = useState(0);
    
      return (
        <div>
          <h2>计数器：{
        count}</h2>
          <button onClick={
        () => setCount(count + 1)}>增加</button>
          <button onClick={
        () => setCount(count - 1)}>减少</button>
        </div>
      );
    }
    
    export default Counter;

为了在页面中显示这个计数器组件，我们需要将它添加到根组件中。以下是 App.js 文件的内容

import React from 'react';
    import Counter from './Counter';
    
    function App() {
        
      return (
        <div>
          <h1>React 示例：计数器应用</h1>
          <Counter />
        </div>
      );
    }
    
    export default App;

### 示例讲解 ###

在此示例中，我们首先从 React 库中导入 useState Hook。useState 用于在函数组件中创建状态。接下来，我们定义了一个名为 Counter 的函数组件。组件内部，我们使用 useState 创建了一个名为 count 的状态变量，以及一个名为 setCount 的函数，用于更新 count 的值。

在组件的返回值中，我们使用 JSX 语法创建了一个包含标题和两个按钮的 div。标题显示当前的计数值，而按钮分别用于增加和减少计数值。当按钮被点击时，我们调用 setCount 函数，将计数值加一或减一。

最后，我们导出 Counter 组件，以便在其他地方使用。在 App.js 文件中，我们导入 Counter 组件并将其添加到应用的根组件中。

这个简单的计数器应用展示了 React 的基本概念，如组件、状态和事件处理。通过学习和实践这些概念，你可以开始构建更复杂的 React 应用

### React 中的生命周期方法和 Hooks ###

在 React 中，我们有时需要在组件的不同阶段执行特定的操作。为了实现这一目的，React 提供了生命周期方法和 Hooks。

在类组件中，常见的生命周期方法有：

1.  componentDidMount()：组件挂载后执行的方法。
2.  componentDidUpdate()：组件更新后执行的方法。
3.  componentWillUnmount()：组件卸载前执行的方法。  
    在函数组件中，我们可以使用 Hooks（如 useEffect）来实现类似的功能。useEffect 可以在组件挂载、更新和卸载时执行特定的操作。以下是一个简单的示例，展示了如何使用

在此示例中，我们创建了一个名为 Timer 的函数组件，用于显示页面加载后经过的秒数。我们使用 useState 创建了一个名为 seconds 的状态变量，以及一个名为 setSeconds 的函数，用于更新 seconds 的值。

我们还使用了 useEffect Hook，该 Hook 在组件挂载时创建一个定时器，每隔 1000 毫秒（1 秒）更新 seconds 的值。同时，在组件卸载时，useEffect 的返回函数将清除定时器，防止内存泄漏。

要在应用程序中使用这个 Timer 组件，我们可以将它添加到根组件中。以下是更新后的 App.js 文件内容：

import React from 'react';
    import Counter from './Counter';
    import Timer from './Timer';
    
    function App() {
        
      return (
        <div>
          <h1>React 示例</h1>
          <Counter />
          <Timer />
        </div>
      );
    }
    
    export default App;

通过将 Timer 组件添加到 App.js 文件中，我们现在可以在页面上同时显示计数器应用和计时器。

本示例展示了 React 生命周期方法和 Hooks 的基本用法。掌握这些概念有助于你在不同阶段管理组件的行为，优化性能并提高代码的可读性。