react Hook详解

最新推荐文章于 2024-05-06 15:36:20 发布

Gavell

最新推荐文章于 2024-05-06 15:36:20 发布

阅读量679

点赞数

分类专栏： react 文章标签： react js 前端

本文链接：https://blog.csdn.net/qq_41056833/article/details/105817061

版权

本文介绍了React Hooks的两大核心概念：State Hook和Effect Hook。State Hook允许函数组件使用state和其他React特性，无需转化为类组件。文章详细阐述了useState的基本用法，包括单一state变量的声明和多个state变量的管理。Effect Hook则提供了处理副作用的能力，类似于class组件的生命周期方法。文章通过实例解释了如何在组件中恰当使用和优化Effect Hook，以提高应用性能。

摘要由CSDN通过智能技术生成

今天抽空学习了react Hook的相关知识，于是整理成博客记录一下相关比较重要的知识点，如果有什么不对的地方欢迎指正，废话不多说，我们马上进入正题。

1.什么是Hook

官网上的解释是：Hook是React16.8的新增特性，它可以让你在不编写class的情况下使用state以及其他的React特性。我们知道在函数式声明的组件中是没有类声明组件中所用到的state和生命周期等等特性的，Hook帮助我们解决了这样一个问题，在函数式声明的组件中也可以使用state以及其他的React特性（如useEffect，useReducer，useContext等，具体用法可参阅官方文档）。

2.State Hook

2.1基本用法

如果你在编写函数组件的时候需要向其添加一些state，以前的做法是必须将其转化为class，现在你可以在现有的函数组件中使用Hook。我们看下面这个例子：

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 "count" 的 state 变量
  const [count, setCount] = useState(0);

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

这个段代码与下面的类组件写法类似：

class Example 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>
    );
  }
}

这里我们声明了一个count的state变量，并把它初始化为0；useState方法用来定义state变量，它接收唯一的参数，也就是初试的state，接收的参数形式可以是对象、数字、字符串、数组等，useState方法返回当前的state以及更新state的函数，这就是我们写