React从0开始（六）：React Hooks之useState

小阿托
577 阅读2分钟

这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战

一、React Hooks

1、React Hooks是什么

React Hooks是在React 16.8以后新增的钩子API，它可以让函数式组件也能够进行组件的状态管理，还能够利用其在函数式组件中嵌入生命周期

2、类组件

声明方式：

class Hello extends React.Component {}

缺点：

  • 在组件间复用状态较为复杂
  • 要通过this方式进行编程，有繁杂的绑定工作

二、React Hooks解决了哪些问题：

  • 解决了类组件的this绑定、状态逻辑难以复用、复杂结构等问题
  • 能够自定义Hooks，无需修改组件结构即可进行复用状态逻辑
  • 可以将组件部分拆分得更小更精简
  • 副作用分离

三、React Hooks初体验之useState

1、React Hooks useState的导入

导入：

import { useState } from 'react';

2、React Hooks useState的使用

useState 的基本使用：

const [state, setState] = useState(initialState);
//示例
const [number,setNumber] = useState(0)

说明：

  • 参数：初始state，在初次渲染时返回的state就是传入的initialState
  • 返回结果：一个数组，内含两个元素（第一个元素是返回的state值，相当于变量，第二个元素则是可以修改该变量的函数） 
    const [number,setNumber] = useState(0)
render() {
    return (
        <div onClick={ ()=>{ setNumber(number + 1) } }>{ number }</div>
    )
}

useState的函数式更新： 在使用useState时，可能会有连续的修改操作，这时对前一个状态的保存和使用就要十分注意，以下例子是事件对上一状态的使用，这时要将先前的state作为参数传入setNumber中再进行操作

const [count, setCount] = useState(0);
render() {
    return (
        <div>
            <div>count:{count}</div>
            <div onClick={ ()=> setCount(count=>count+1) }>加1<div>
        </div>
    )
}

useState的惰性初始化：

  • initialState仅在组件初始化渲染下起作用，后续渲染会被忽略
  • 若初始的state需要通过复杂的计算才能获得，可以传入一个函数，该函数进行逻辑处理并返回state，但仅在初始化时起作用
//惰性初始化
const [state, setState] = useState(initialState);

3. useState的特点：

  • 在多次调动useState时，每次渲染调用的顺序是不变的，即： 
    //下面是按顺序执行的
const [name1,setName1] = useState("Tony");
const [name2,setName2] = useState("Bob");
  • useState不能在条件判断、循环或者嵌套函数中使用，必须要在函数内部最外层使用（其他Hooks也是如此）
  • Hooks只能在React函数中调用，普通JS函数中不能调用
  • useState的使用相当于this.setState，但是useState的修改是覆盖式修改，而this.setState是合并式修改
  • 每一次渲染都是独立的，状态更新后，函数组件都会被重新调用，因此内部的Props、State均是独立的
avatar
文章
阅读
粉丝