React 基础与进阶笔记

什么是 React

React 是一个用于构建用户界面的 JavaScript 库。它由 Facebook 开发，并在开源社区中广泛使用。React 的核心思想是组件化，它将用户界面拆分成一个个独立的组件，每个组件都可以管理自己的状态和逻辑。通过组合这些组件，我们可以构建复杂的用户界面。

JSX 语法

JSX 是 React 的核心语法之一，它是一种将 JavaScript 和 HTML 结合的语法。通过 JSX，我们可以在 JavaScript 中编写类似于 HTML 的代码，这使得构建 UI 更加直观和简洁。例如：

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

在 JSX 中，我们可以使用花括号 {} 插入 JavaScript 表达式，这使得动态生成 UI 成为可能。

组件

在 React 中，一切皆为组件。组件是可以重复使用的 UI 单元，它可以接收输入数据（props）并返回一个描述了如何在屏幕上渲染的 React 元素。组件分为两种类型：函数组件和类组件。

函数组件

函数组件是一种定义简单的组件方式，它接收输入的 props 并返回一个 React 元素。示例：

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

类组件

类组件是一种更为强大的组件类型，它可以管理自己的状态（state）和生命周期方法。示例：

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

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

Props 和 State

Props（属性）和 State（状态）是 React 组件中两个重要的概念。

Props

Props 是从父组件传递给子组件的数据，它们是只读的，子组件不能修改自己的 props。通过 props，我们可以将数据在组件树中传递并共享。

// 父组件
<ChildComponent name="Alice" />

// 子组件
function ChildComponent(props) {
  return <p>Hello, {props.name}!</p>;
}

State

State 是组件内部的可变数据，它可以通过 this.state 访问，只能在类组件中使用。通过修改 state，我们可以触发组件的重新渲染，从而更新界面。

生命周期

组件的生命周期是指组件从创建到销毁的整个过程，React 提供了生命周期方法，可以在特定的时刻执行一些操作。然而，从 React 16.3 开始，引入了新的生命周期方法，并推荐使用函数组件和 useEffect 钩子来管理副作用。

Hooks

Hooks 是 React 16.8 引入的特性，它允许我们在函数组件中使用状态和其他 React 特性，避免了类组件的繁琐和复杂性。

useState

useState 是一个用于在函数组件中添加状态的 Hook。

import React, { useState } from 'react';

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

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

组件通信

在 React 应用中，不同组件之间需要进行通信。常见的组件通信方式包括：

父子组件通信

通过 props 将数据从父组件传递给子组件。

子父组件通信

子组件可以通过 props 接收父组件传递的回调函数，以实现子组件向父组件传递数据。

兄弟组件通信

可以将共享的状态提升到父组件中，然后分别传递给兄弟组件。

使用 Context

React 提供了 Context 来实现组件树中跨层级的数据传递。

路由与导航

在单页应用中，路由和导航是重要的部分。React 中可以使用第三方库如 React Router 来管理页面的路由和导航。

组件库与样式

有许多第三方 UI 组件库可以用于构建漂亮的界面，如 Ant Design、Material-UI 等。同时，可以使用 CSS、Sass、CSS-in-JS 等方式来管理样式。

总结

React 是一个强大的库，它通过组件化、虚拟 DOM 等特性使得构建用户界面变得更加简单和高效。掌握 React 的基础概念和常用技巧，可以帮助我们构建出功能强大、可维护的现代 Web 应用程序。无论是初学者还是有经验的开发者，都可以从学习和使用 React 中受益良多。

《React》 笔记 ｜ 青训营