image.png

React 通过 JSX 提供灵活的组件化开发，将 HTML 与 JavaScript 逻辑结合，使开发更直观。其虚拟 DOM 和 Fiber 架构提升性能，通过高效的差异对比和异步渲染，使复杂应用更流畅。
React 拥有庞大的生态系统和社区支持，丰富的第三方库和工具（如 Redux、React Router）以及广泛的企业采用（如 Facebook、Netflix）推动其发展。Create React App 简化项目初始化，内置现代开发配置。React Developer Tools 提供强大调试功能，React Native 扩展技术栈到移动端，Hooks API 推动函数式编程，使代码更简洁和可重用。

---

React系列系列：
前端React系列一: React简介
前端React系列二: create-react-app简介
前端React系列三: TypeScript简介
前端React系列四：Ant Design简介
前端React系列五：React+CRA+TS+Ant Design高效开发前端
前端React系列六：ant-design-pro简介
前端React系列七：ant-design-pro架构
前端React系列八：ant-design-pro辅助开发命令
前端React系列九：Umi简介
前端React系列十：Umi环境变量

---

前言

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 于 2013 年发布。它的主要特点是高效、灵活和可复用，特别适合构建单页面应用（SPA）。以下是 React 的一些基本概念和特点：

1. 组件 (Components)

React 的核心概念是组件。组件是独立、可复用的代码块，它们可以接受输入（称为 "props"）并返回 React 元素描述页面的一部分。组件可以是类组件或函数组件。

类组件

import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <div>Hello, {this.props.name}!</div>;
  }
}

函数组件

import React from 'react';

function MyComponent(props) {
  return <div>Hello, {props.name}!</div>;
}

2. JSX (JavaScript XML)

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

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

3. Props (Properties)

Props 是组件的输入，类似于函数的参数。它们是只读的，用于传递数据和事件处理器。

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

4. State

State 是组件内部的数据存储，可以改变。State 的改变会触发组件的重新渲染。类组件和函数组件的 state 管理方式有所不同。

类组件中的 State

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

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

函数组件中的 State (使用 Hook)

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

5. Lifecycle Methods (生命周期方法)

类组件有一系列生命周期方法，可以在组件的不同阶段执行代码，如挂载、更新和卸载。

主要生命周期方法
componentDidMount()
componentDidUpdate(prevProps, prevState)
componentWillUnmount()

6. Hooks

Hooks 是 React 16.8 引入的一种新特性，允许在不编写类组件的情况下使用 state 和其他 React 特性。

常用 Hook
useState：状态钩子
useEffect：副作用钩子
useContext：上下文钩子
useReducer：类似于 Redux 的状态管理钩子
useRef：引用钩子

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  }, [count]);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

7. Context

Context 提供了一种在组件树中共享数据的方法，而不必显式地通过每层组件传递 props。

const MyContext = React.createContext();

function MyProvider({ children }) {
  const value = { name: 'John' };
  return (
    <MyContext.Provider value={value}>
      {children}
    </MyContext.Provider>
  );
}

function MyComponent() {
  const context = React.useContext(MyContext);
  return <div>Hello, {context.name}!</div>;
}

8. React Router

React Router 是一个用于在 React 应用中实现路由的库。

import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';

function App() {
  return (
    <Router>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

9. Redux

Redux 是一种用于管理应用状态的库，常与 React 一起使用。它提供了一个集中式的存储，使状态管理更加可预测。

import { createStore } from 'redux';

const initialState = { count: 0 };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);

store.dispatch({ type: 'INCREMENT' });
console.log(store.getState()); // { count: 1 }

10. 性能优化

React 提供了多种性能优化方法，如避免不必要的渲染、使用 React.memo、代码拆分等。

避免不必要的渲染

function MyComponent({ value }) {
  console.log('Rendered');
  return <div>{value}</div>;
}

export default React.memo(MyComponent);

代码拆分

import React, { lazy, Suspense } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <OtherComponent />
    </Suspense>
  );
}

通过理解和掌握以上知识点，可以有效地使用 React 构建高性能、可维护的用户界面。