一、为什么会有Hooks
介绍Hooks之前,首先要说一下React的组件创建方式,一种是类组件,一种是纯函数组件。
并且React团队希望,组件不要变成复杂的容器,最好只是数据流的管道。开发者根据需要,组合管道即可。
也就是说组件的最佳写法应该是函数,而不是类。 但是我们知道,在以往开发中类组件和纯函数组件的区别是很大的,纯函数组件有着类组件不具备的多种特点:
- 纯函数组件没有状态
- 纯函数组件没有生命周期
- 纯函数组件没有this
这就注定,我们所推崇的函数组件,只能做UI展示的功能,涉及到状态的管理与切换,我们不得不用类组件。为了解决类组件功能齐全却很重,纯函数很轻便却有上文几点重大限制,React团队设计了React Hooks。React Hooks就是加强版的函数组件,我们可以完全不使用class,就能写出一个全功能的组件。
二、Hooks的含义
Hooks的单词意思为“钩子”。
React Hooks 的意思是,组件尽量写成纯函数,如果需要外部功能和副作用,就用钩子把外部代码"钩"进来。而React Hooks 就是我们所说的“钩子”。
下面是React Hooks为我们提供的默认的四种最常用钩子:
- useState()
- useContext()
- useReducer()
- useEffect()
- useRef()
三、React Hooks用法
1、useState()
纯函数组件没有状态,useState()用于为函数组件引入状态。 在useState()中,它接受状态的初始值作为参数,其中数组第一项为一个变量,指向状态的当前值,类似this.state;第二项是一个函数,用来更新状态,类似setState。该函数的命名,约定为set前缀加状态的变量名。
示例—计数器:
import React,{
useState } from "react";
const NewCount = ()=> {
const [ count,setCount ] = useState(0)
const addCount= ()=> {
let newCount = count;
setCount(newCount +=1)
}
return (
<>
<p> {
count }</p>
<button onClick={
addCount }>Count++</button>
</>
)
}
export default NewCount;
通过 setXxx 设置新值,但是如果新值和当前值完全一样,那么会引发React重新渲染吗?
通过React官方文档可以知道,当使用 setXxx,赋值时,Hook会使用Object.is()来对比当前值和新值,结果为true则不渲染,结果为false就会重新渲染。
2、useContext()
共享状态钩子作用就是可以做状态的分发,在React16.X以后支持,避免了react逐层通过Props传递数据。
示例—共享状态:
import React, {
useContext } from "react";
const HookTest = ()=> {
const AppContext = React.createContext({
});
const A = ()=> {
const {
name } = useContext(AppContext)
return (
<p>
我是A组件,名字是:{
name };
</