本文是【React基础】系列的第五篇文章,这篇文章中我们介绍一下在react的函数组件中如何使用类组件中的state和生命周期之类的东西。
hook是react 16.8版本才增加的知识,它出现的目的就是让我们可以在函数组件中使用很多类组件中才有的特性,例如state、生命周期等。
hook说白了其实就是一些react中特殊的函数,只不过这些函数允许我们通过钩子的形式钩入一些react的特性,例如我们想要在函数组件中使用state的话就不用将其转为类组件,直接使用useState()
这个hook函数即可;如果想要在函数组件中使用类似于类组件的生命周期这些函数的话,直接使用useEffect()
这个hook函数……
useState()
这个hook函数允许我们在函数组件中使用state。
它的使用方法如下:
import React, { useState } from "react"; //对应第一步
const StateHook = () => {
const [count, setCount] = useState(0); //对应第二步
return (
<div>
<p>you click {count} times.</p> //对应第三步,使用变量
<button onClick={() => setCount(count + 1)}>click</button> //对应第三步,修改、更新变量
</div>
)
}
export default StateHook;
useState()函数详解:
由上可看出useState Hook跟类组件中定义state、读取state、更新state的区别如下:
useState Hook:
const [count, setCount] = useState(0);
类组件:
constructor(props) {
super(props);
this.state = {
count: 0
};
}
useState Hook:
<p>you click {count} times.</p>
类组件:
<p>you click {this.state.count} times.</p>
useState Hook:
<button onClick={() => setCount(count + 1)}>click</button>
类组件:
<button onClick={() => this.setState({ count: this.state.count + 1 })}>click</button>
useEffect()
这个hook允许我们在函数组件中使用类似于生命周期这种特性,准确来说,它允许我们在函数组件中执行副作用操作。
它的使用方法如下:
import React, { useState, useEffect } from "react"; //对应第一步
const EffectHook = () => {
const [count, setCount] = useState(0);
useEffect(() => { //对应第二步
document.title = `click ${count} times`;
})
return (
<div>
<p>you click {count} times.</p>
<button onClick={() => setCount(count + 1)}>click</button>
</div>
)
}
export default EffectHook;
useEffect()函数详解:
useEffect(() => {
//执行副作用
document.title = `click ${count} times`;
return () => {
//消除副作用
//此处的方法会在组件卸载时执行
//some code...
}
})
1、只在最顶层使用hook
2、只在react函数中调用hook
自定义hook其实就是一个实现了组件逻辑可重用的函数,只不过这个函数名称必须是以“use”开头而已。
自定义hook一般与我们项目的业务需求关联度比较高,我们可以将组件中可复用的一些逻辑抽离出来,实现一些自定义的hook。
下面是一些在平时开发中使用率较低的hook:
名称 | 作用 |
---|---|
useState | 在函数组件中可以使用state。 |
useEffect | 在函数组件中可以使用副作用。 |
useContext | 读取context的值,订阅context的变化。 |
useReducer | useState的替代方案,跟redux中的reducer类似。 |
useCallback | 缓存函数的引用。 |
useMemo | 缓存函数的值。 |
useRef | 每次渲染时返回同一个ref对象。 |
useImperativeHandle | 可以在使用ref时自定义暴漏给父组件的实例值。 |
useLayoutEffect | 可以用它来获取DOM布局,并同步触发重渲染。 |
useDebugValue | react开发者工具中显示自定义hook标签。 |