React基础笔记（三）：深入理解Hooks与Context

2024-01-09 09:03:30

正文

Hooks简介

Hooks是React 16.8版本中引入的一个重要特性，它允许我们在函数组件中使用状态和生命周期方法。Hooks的出现极大地简化了函数组件的编写，使其与类组件的功能几乎相同。

Hooks的使用非常简单，我们只需要在函数组件中调用useState或useEffect等Hooks函数，就可以实现相应的功能。例如，我们可以使用useState函数来定义组件的状态，使用useEffect函数来处理组件的生命周期。

Context简介

Context是React中另一个重要的概念，它允许我们在组件树中传递数据，而无需使用props逐层传递。Context的本质是一个全局变量，我们可以通过createContext函数创建一个Context，然后通过useContext函数来访问这个Context。

Context的使用也非常简单，我们只需要在根组件中创建一个Context，然后在子组件中使用useContext函数来访问这个Context。这样，子组件就可以直接访问到根组件中定义的数据，而无需使用props逐层传递。

Redux简介

Redux是一个流行的状态管理工具，它可以帮助我们管理应用程序中的状态。Redux遵循单向数据流原则，即所有的状态更新都必须通过一个中央store来进行。这使得应用程序的状态更易于管理和理解。

Redux的使用相对复杂一些，但它非常适合大型应用程序的状态管理。如果你的应用程序需要管理大量复杂的状态，那么使用Redux是一个不错的选择。

setState简介

setState是React组件的一个方法，它可以更新组件的状态。setState方法接收一个函数作为参数，该函数接收上一个状态和当前的props作为参数，并返回一个新的状态。

setState方法的使用非常简单，我们只需要在组件中调用setState方法，然后传入一个函数即可。例如，我们可以使用setState方法来更新组件中的计数器状态。

class Counter extends React.Component {
  state = {
    count: 0,
  };

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

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

lazyLoad路由懒加载简介

lazyLoad路由懒加载是一种React路由优化技术，它可以帮助我们延迟加载组件。使用lazyLoad路由懒加载，我们可以只加载当前页面所需的组件，从而减少应用程序的初始加载时间。

lazyLoad路由懒加载的使用非常简单，我们只需要在路由组件中使用lazy函数即可。例如，我们可以使用lazy函数来延迟加载Home组件。

import React, { lazy } from "react";
import { Route, Switch } from "react-router-dom";

const Home = lazy(() => import("./Home"));

const App = () => {
  return (
    <Switch>
      <Route path="/" exact component={Home} />
    </Switch>
  );
};

export default App;

Fragment简介

Fragment是一个React组件，它可以让我们在组件中渲染多个子组件，而不会创建额外的DOM节点。这使得我们可以更轻松地编写代码，并提高应用程序的性能。

Fragment的使用非常简单，我们只需要在组件中使用<Fragment>和</Fragment>标签即可。例如，我们可以使用Fragment来渲染一个列表。

import React from "react";

const List = () => {
  return (
    <Fragment>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </Fragment>
  );
};

export default List;