1.1React 简介

1.1React 简介

React 简介：构建用户界面的声明式利器

React 是一个用于构建用户界面的 JavaScript 库。它由 Facebook 开发并维护，并被广泛应用于构建单页应用程序（SPA）和移动应用程序。React 的核心理念是组件化、声明式和高效。

1. 核心概念

• 组件 (Components): React 应用是由一个个独立、可复用的组件构成的。每个组件负责渲染页面的一部分，并管理自己的状态。

• JSX: JSX 是 JavaScript 的语法扩展，允许你在 JavaScript 代码中编写类似 HTML 的结构。React 使用 JSX 来描述组件的 UI。

• 虚拟 DOM (Virtual DOM): React 使用虚拟 DOM 来提高性能。虚拟 DOM 是真实 DOM 的一个轻量级表示。当组件的状态发生变化时，React 会先在虚拟 DOM 上进行更新，然后将虚拟 DOM 与真实 DOM 进行比较，找出需要更新的部分，并只更新这些部分，从而减少了对真实 DOM 的操作，提高了性能。

• 状态 (State): 组件的本地数据存储。当状态改变时，组件会重新渲染。

• 属性 (Props): 父组件传递给子组件的数据。属性是只读的，子组件不能修改父组件传递给它的属性。

• 生命周期 (Lifecycle): 组件在创建、更新和销毁过程中会经历一系列的生命周期阶段。React 提供了生命周期方法，允许你在这些阶段执行特定的操作。

• 单向数据流 (Unidirectional Data Flow): 数据从父组件流向子组件，子组件不能直接修改父组件的状态。

2. 为什么选择 React?

• 组件化: 组件化开发可以提高代码的可维护性和可复用性。

• 声明式: 声明式编程可以让你专注于描述 UI 的状态，而不需要关心如何更新 DOM。

• 高效: 虚拟 DOM 可以减少对真实 DOM 的操作，提高性能。

• 跨平台: React 可以与 React Native 结合使用，构建跨平台的移动应用程序。

• 庞大的社区: React 拥有一个庞大的社区，可以提供丰富的资源和支持。

3. 第一个 React 应用

让我们创建一个简单的 React 应用，显示 "Hello, React!"。

3.1 环境配置

首先，你需要安装 Node.js 和 npm (或 yarn)。 然后，可以使用 Create React App 来快速创建一个 React 项目。

npx create-react-app my-app
cd my-app
npm start
​

3.2 代码示例 (src/App.js)

import React from 'react';
import './App.css';
function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
    </div>
  );
}
export default App;
​

3.3 代码详解

• import React from 'react';: 导入 React 库。

• import './App.css';: 导入 CSS 样式表。

• function App() { ... }: 定义一个名为 App 的函数组件。

• return ( ... );: 函数组件必须返回一个 JSX 元素，描述了组件的 UI。

• <div className="App"> ... </div>: JSX 元素，类似于 HTML。

• <h1>Hello, React!</h1>: JSX 元素，显示 "Hello, React!"。

• export default App;: 导出 App 组件，使其可以在其他文件中使用。

4. 组件详解

React 组件是构建 React 应用的基本单元。组件可以是函数组件或类组件。

4.1 函数组件

函数组件是一个简单的 JavaScript 函数，它接收 props 作为参数，并返回一个 JSX 元素。

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}
function App() {
  return <Greeting name="World" />;
}
​

4.2 类组件

类组件是一个 ES6 类，它继承自 React.Component。类组件必须定义一个 render() 方法，该方法返回一个 JSX 元素。 类组件可以拥有状态 (state) 和生命周期方法。

import React from 'react';
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };
  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}
function App() {
  return <Counter />;
}
​

4.3 Props

Props 是父组件传递给子组件的数据。Props 是只读的，子组件不能修改父组件传递给它的 Props。

function Profile(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Age: {props.age}</p>
    </div>
  );
}
function App() {
  return <Profile name="John Doe" age={30} />;
}
​

4.4 State

State 是组件的本地数据存储。当 State 改变时，组件会重新渲染。在类组件中，可以使用 this.setState() 方法来更新 State。在函数组件中，可以使用 useState Hook 来管理 State。

import React, { useState } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
function App() {
  return <Example />;
}
​

5. 生命周期

React 组件在创建、更新和销毁过程中会经历一系列的生命周期阶段。类组件提供了一些生命周期方法，允许你在这些阶段执行特定的操作。

• constructor(): 组件创建时调用，用于初始化 state。

• render(): 必须实现的方法，用于渲染组件的 UI。

• componentDidMount(): 组件挂载到 DOM 后调用，通常用于发送网络请求或设置定时器。

• componentDidUpdate(): 组件更新后调用，可以访问之前的 props 和 state。

• componentWillUnmount(): 组件卸载前调用，通常用于清理资源，如取消定时器或移除事件监听器。

6. Hooks

Hooks 是 React 16.8 引入的新特性，允许你在函数组件中使用 state 和其他 React 特性。常用的 Hooks 包括：

• useState: 用于在函数组件中管理 state。

• useEffect: 用于在函数组件中执行副作用操作，如发送网络请求或设置定时器。

• useContext: 用于在函数组件中访问 context。

• useReducer: 用于管理复杂 state 的另一种方式。

• useCallback: 用于缓存函数，避免不必要的重新渲染。

• useMemo: 用于缓存计算结果，避免不必要的重复计算。

• useRef: 用于在组件的生命周期中保持对某个值的引用。

• useImperativeHandle: 允许你自定义组件实例暴露给父组件的值。

• useLayoutEffect: 类似于 useEffect，但在 DOM 更新后同步执行。

• useDebugValue: 用于在 React DevTools 中显示自定义的调试信息。

7. 事件处理

React 使用合成事件系统来处理 DOM 事件。合成事件是浏览器原生事件的跨浏览器包装器。

function MyButton() {
  const handleClick = (event) => {
    alert('Button clicked!');
    console.log(event);
  };
  return <button onClick={handleClick}>Click me</button>;
}
function App() {
  return <MyButton />;
}
​

8. 条件渲染

React 提供了多种条件渲染的方式：

• if/else 语句:

  function Greeting(props) {
    if (props.isLoggedIn) {
      return <h1>Welcome back!</h1>;
    } else {
      return <h1>Please sign up.</h1>;
    }
  }
  ​

• 三元运算符:

  function Greeting(props) {
    return props.isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign up.</h1>;
  }
  ​

• 逻辑与运算符 (&&):

  function Mailbox(props) {
    const unreadMessages = props.unreadMessages;
    return (
      <div>
        <h1>Hello!</h1>
        {unreadMessages.length > 0 && (
          <h2>You have {unreadMessages.length} unread messages.</h2>
        )}
      </div>
    );
  }
  ​

9. 列表渲染

可以使用 map() 方法来渲染列表。

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) => (
    <li key={number.toString()}>{number}</li>
  ));
  return <ul>{listItems}</ul>;
}
function App() {
  const numbers = [1, 2, 3, 4, 5];
  return <NumberList numbers={numbers} />;
}
​

10. 表单处理

React 使用受控组件来处理表单。在受控组件中，表单元素的值由 React state 控制。

import React, { useState } from 'react';
function NameForm() {
  const [name, setName] = useState('');
  const handleChange = (event) => {
    setName(event.target.value);
  };
  const handleSubmit = (event) => {
    alert('A name was submitted: ' + name);
    event.preventDefault();
  };
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input type="text" value={name} onChange={handleChange} />
      </label>
      <input type="submit" value="Submit" />
    </form>
  );
}
function App() {
  return <NameForm />;
}
​

11. Mermaid 图表示例

12. 总结

React 是一个强大而灵活的 JavaScript 库，可以用于构建各种用户界面。 通过学习 React 的核心概念、组件、JSX、虚拟 DOM、状态、属性、生命周期和 Hooks，你可以构建出高性能、可维护和可复用的 React 应用。 希望本文能够帮助你入门 React，并为你的 React 开发之旅打下坚实的基础。 继续探索 React 的更多特性和生态系统，如 Redux、React Router 等，你将能够构建出更加复杂和强大的应用程序。