react 函数的 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函数就相当于是componentDidMount，componentDidUpdate 和 componentWillUnmount 这三个函数的组合

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

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

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

保存的数据在 useRef.current中

【分析比较】useState&&useRef && 定义一个变量 三者的比较

1. 数据的保存和是否引起页面的刷新

• useState 可以触发页面的刷新（render）

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

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

【报错及解决】