hooks知识点积累

hooks 解释=>钩子,钩住,钓钩,是React v16.8 新增的功能

hooks 作用=>

①为函数组件提供状态、生命周期等原本 class 组件中提供的 React 功能

②可以理解为通过 Hooks 为函数组件钩入 class 组件的特性

③注意：Hooks 只能在函数组件中使用

React v16.8 版本前后，组件开发模式的对比：

• React v16.8 以前： class 组件(提供状态) + 函数组件(展示内容)
• React v16.8 及其以后：
  1. class 组件(提供状态) + 函数组件(展示内容)
  2. Hooks(提供状态) + 函数组件(展示内容)
  3. 混用以上两种方式：部分功能用 class 组件，部分功能用 Hooks+函数组件

hooks-渐进策略

什么是hooks渐进式策略

①不推荐直接使用 Hooks 大规模重构现有组件

②推荐：新功能用 Hooks，复杂功能实现不了的，也可以继续用class

③找一个功能简单、非核心功能的组件开始使用hooks

useState-基本使用

useState作用=>为组件提供状态,是一个 hook，就是一个特殊的函数，让你在函数组件中获取状态等 React 特性;名称上看 hook 都以use开头的

语法

const stateArray = useState(0);
// 索引 0 表示：状态值（state）
const state = stateArray[0];
// 索引 1 表示：修改状态的函数（setState）
const setState = stateArray[1];

使用的步骤

1. 导入 useState hook
2. 调用 useState 函数，传入初始值
3. 从 useState 函数的返回值中，得到状态和修改状态的函数
4. 在 JSX 中展示状态
5. 在按钮的点击事件中调用修改状态的函数，来更新状态

 

import { useState } from 'react';

const Count = () => {
  // 解构：
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>计数器：{state}</h1>
      <button onClick={() => setState(state + 1)}>+1</button>
    </div>
  );
};