Hook 学习系列（一） —— State Hook

＊且听风吟

已于 2023-04-14 15:15:59 修改

阅读量696

点赞数

分类专栏： # React 文章标签： react.js javascript node.js

于 2021-08-24 20:04:30 首次发布

本文链接：https://blog.csdn.net/HH18700418030/article/details/119774584

版权

本文是关于React Hooks的学习系列第一篇，重点讲解State Hook。State Hook是React引入的新特性，允许函数组件在不使用类组件的情况下管理状态。通过useState，开发者可以在函数组件中添加内部状态并进行更新，无需改变组件结构。useState返回当前状态和更新状态的函数，使用时需要注意其调用位置的限制，例如不能在条件或循环中直接调用。文章还介绍了如何使用多个state变量，并通过实例展示了其在实际应用中的效果。

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

以 use 开头的函数被称为 Hook。

React Hook 是 React 16.8 引入的新特性。它用在函数组件中，允许开发者不使用 class 的情况下，使用状态 state 和其他特性。

Hook，使开发者可以在函数组件中使用状态，在无需修改组件结构的情况下复用状态逻辑。

Hook 是一些可以在函数组件里“钩入” React state 及生命周期等特性的函数，在编写函数组件需要向其添加一些 state 时，就可以使用 Hook。本质上就是一类特殊的函数，为函数型组件（function component）注入一些特殊的功能。
Hook 不能在 class 组件中使用。

最常见的 Hooks，比如 setState 和 useEffect。

State Hook

useState 是 React 提供的一个内置 Hook。在函数组件里调用useState可以给组件添加一些内部 state。

React 在重复渲染时会保留这个 state。

useState 返回一对值：

（1）当前状态
（2）更新它的函数

在事件处理函数中或其他一些地方调用这个函数，类似于 class 类组件的 this.setState，但是这个更新函数不会把新的 state 和旧的 state 进行合并。

useState 唯一的参数就是初始 state。

上面的例子中，计数器从零开始，初始 state 是 0。

这里的 state 不一定是一个对象，它不同于 this.state，这个初始 state 参数只有在第一次渲染时会被用到。

Example.js：

import React, {
    useState } from 'react' // 引入 React 中的 useState Hook,在函数组件中存储内部 state。
function Example () {
   
  // 声明一个叫 “count” 的 state 变量
  const [count, setCount] = useState(0) 
  // 调用 useState Hook 声明一个新的 state 变量,它返回一对值给到我们命名的变量上。变量命名为 count，存储点击次数。传 0 作为 useState 唯一的参数来将其初始化为 0。第二个返回的值是一个函数 setCount，通过它来更新 count 的值。
  return (
    <div>
      <p>You clicked {
   count} times</p>
      <button onClick={
   () => setCount