扩展之 state hook

上节课我们介绍了关于路由组件的懒加载，这节课我们要开始一个新的环节，就是大家可能早已经听说过的react-hooks。

回顾

项目开发中基本都要开启懒加载
使用lazy函数来调入路由组件实现懒加载
注册路由时要用Suspense组件包裹
Suspense标签要指定一个不使用懒加载的组件作为fallback属性

以上便是上节课的内容，接下来我们来介绍一下state hook

什么是`Hooks`

这个其实是react 16.8之后版本新增加的一个新特性，至于这个东西是干什么的呢？还记不记得我们说过，组件分为两种组件：

函数式组件
类组件

这两种组件中函数式组件适合作为简单组件，类组件通常都用来实现复杂组件。而且我们在介绍组建的三大属性的时候说了，这三大属性实际上都是类组件的三大属性，但是呢函数式组件有一个属性就是props，但是现在有了hooks，我们就可以在函数式组件中来使用state以及其他的react特性了。

`state hook`

那么我们知道hooks能干什么用了，那么我们来用一下试试，依然还是之前那个点击加一的案例，那么我们用hooks是不是要用函数式组件啊？那么我们先来把静态页面写好：

import React from 'react';

export default function Demo() {
  return (
    <div>
      <h2>sum is : ???</h2>
      <button >click</button>
    </div>
  );
}

现在我们要这么干我们不知道，就展示一串问号出来。我们来想一想，我们的按钮的onClick属性应该怎么办？我函数里面可以定义函数吗？当然可以，我们来定义一下：

import React from 'react';

export default function Demo() {
  function add(){
    console.log("clicked");
  }
  return (
    <div>
      <h2>sum is : ???</h2>
      <button onClick={add}>click</button>
    </div>
  );
}

我们没有this，那么我们就直接绑定呗，我们看一下点击效果能不能走得通：

没有问题，也就是说我们点击效果已经完全没有问题了。那么我们怎么用state呢？我们函数没有this啊，我们来看下面这段代码：

import React from 'react';

export default function Demo() {
  const a = React.useState();
  console.log(a);
  function add(){
    console.log("clicked");
  }
  return ...
}

我们来看这段代码，我们没有做其他的操作，而是定义了一个常量a，这个a是什么呢？是React.useState方法的返回值，这个返回值是什么我们来打印一下看看：

诶，这个东西好像是一个数组，第一个元素是一个undefined，另一个是一个函数。这两个这是什么啊？其实呢这个数组中两个东西，第一个就是我们要用的state，而那个函数就相当于我们的setState，是我更新state的方法。但是为啥是undefined啊？因为我们没有给他初始化啊，那么怎么做初始化？我们的state是不是一个对象？那么我们把初始化状态的对象传进去不就得了嘛，那么我们来看一下:

这次我们是不是把初始化状态传进去了？那么接下来大家有没有觉得好像知道该怎么写了：

import React from 'react';

export default function Demo() {
  const [ state, setState ] = React.useState({ sum: 0 });
  function add() {
    setState(state => ({ sum: state.sum + 1 }))
  }
  return (
    <div>
      <h2>sum is : {state.sum}</h2>
      <button onClick={add}>click</button>
    </div>
  );
}

我们先是解构赋值，然后改展示的地方展示，改更新的地方更新，然后我们来见一下效果：

iShot2022-01-20 15.25.06

我们这一下是不是函数式组件也能用state了啊？还有一点，大家看我add函数里面是不是用setState的第二种写法啊？我所使用的是函数式的serState，可能有人要问了，你怎么知道这里的这个函数和setState一样呢？实不相瞒，我是猜的，如果不对我们再回来改呗，这就是一个技术提升的必经之路。

那么我们还有一个细节性的问题，这个函数式组件叫Demo，那么Demo被调用几次？是不是1 + n次？因为每点一次按钮是不是要重新调用函数来使得页面更新?那么每次重新调用的时候是不是会重新执行const [ state, setState ] = React.useState({ sum: 0 })？那么理论上来说每次执行这一行代码会将state重新改成{sum: 0}才对啊，但是实际上却并不是，这就是react底层做的一个处理，当第一次执行的时候就把state存下来了，然后每次执行的时候并不会覆盖原来的state。

总结

hooks可以让函数式组件能够使用react的state已经其他的特性
useState方法会返回一个state和一个更新state的方法
更新state的方法和setState的用法完全一致

Copyright statement：The articles of this site are all original if there is no special explanation, indicate the source please when you reprint.

Link of this article：https://work.lynchow.com/article/extend_state_hook/

扩展之 state hook

回顾

什么是Hooks

state hook

总结

什么是`Hooks`

`state hook`