0
点赞
收藏
分享

微信扫一扫

函数的 hook 钩子函数

【引入】‘状态’这回事?

特点:不会随着组件的创建而重新赋值给变量的叫有状态的组件
函数组件——无状态组件

类组件

  • constructor只有在这个组件构造器新建的时候调用,即只有在这个类第一次创建时调用。
  • 而且自带了一个state 变量,所有在state中 或者 在 constructor 中的变量都是“状态”。

而函数每次调用,所有变量会重新赋值
为了解决这个问题:

函数可以引入了以use开头的、可以保存状态的 hook钩子函数

  • useState
  • useRef
  • useEffect

【基础知识】hook 钩子函数

全部以 use 开头,只能在函数组件中使用,并且类组件中不能使用
最重要的两个hook函数:useSate && useEffect 可以注入函数组件中,充当状态和生命周期

1.useState:定义 && 保存 状态

State Hook是一个在函数组件中使用的函数, 该函数名字是useState, 用于在函数组件中提供状态,让React的函数组件能够像类组件一样拥有state

2.useEffect:模拟生命周期

useEffect这个hooks函数就相当于是componentDidMountcomponentDidUpdatecomponentWillUnmount 这三个函数的组合

在render执行完毕之后执行,既会执行 挂载结束的生命周期,也会执行每次更新的生命周期

而取消挂载的方式是通过返回值,清除销毁后必须清除的事件

3.useRef: 可以保存dom元素 / 保存一个数据

保存的数据在 useRef.current

【分析比较】useState&&useRef && 定义一个变量 三者的比较
  1. 数据的保存和是否引起页面的刷新
  • useState 可以触发页面的刷新(render)

  • useRef 保存了一个不会触发render 更新的数据而且是同步的,但是可以保存dom元素

  • 如果只是定义一个变量,不能触发render,数据也不能保留(引入hook 钩子函数的主要原因)

【报错及解决】

举报

相关推荐

0 条评论