【前端】深入浅出的React.js详解

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。随着 React 的不断演进，官方文档也在不断更新和完善。本文将详细解读最新的 React 官方文档，涵盖核心概念、新特性、最佳实践等内容，帮助开发者更好地理解和使用 React。

1. React 核心概念

1.1 组件

组件是 React 应用的基本构建块。组件可以是类组件或函数组件，每个组件负责渲染一部分用户界面。

1.1.1 函数组件

函数组件是最简单的组件形式，接受输入（props）并返回 JSX。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

1.1.2 类组件

类组件是通过继承 React.Component 类来定义的，可以包含状态和生命周期方法。

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

1.2 JSX

JSX 是一种在 JavaScript 中编写类似 HTML 代码的语法扩展。React 使用 JSX 来描述 UI 的结构。

const element = <h1>Hello, world!</h1>;

1.3 Props

Props 是组件之间传递数据的方式。父组件通过 props 将数据传递给子组件。

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;

1.4 State

State 是组件内部的数据存储，用于跟踪组件的状态变化。状态的变化会触发组件的重新渲染。

1.4.1 类组件中的状态

在类组件中，状态通过 state 属性来管理。

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState(prevState => ({ count: prevState.count + 1 }));
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

1.4.2 函数组件中的状态

在函数组件中，使用 useState 钩子来管理状态。

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

2. 新特性

2.1 Concurrent Mode

Concurrent Mode 是 React 的一个实验性功能，旨在提高应用的响应性和性能。Concurrent Mode 允许 React 在后台执行工作，并在必要时中断和恢复这些工作。

2.1.1 Suspense

Suspense 是 Concurrent Mode 的一个重要特性，用于处理异步数据加载。通过 Suspense 组件，可以在数据加载完成之前显示一个加载指示器。

import React, { Suspense } from 'react';
import { fetchData } from './api';

function DataFetcher() {
  const data = useDataLoader();

  return <p>Data: {data}</p>;
}

function App()