React Hook
以
use
开头的函数被称为
Hook
。
React Hook
是React 16.8
引入的新特性。它用在函数组件中,允许开发者不使用class
的情况下,使用状态state
和其他特性。
Hook
,使开发者可以在函数组件中使用状态,在无需修改组件结构的情况下复用状态逻辑。
Hook
是一些可以在函数组件里“钩入” React state
及生命周期等特性的函数,在编写函数组件需要向其添加一些 state
时,就可以使用 Hook
。本质上就是一类特殊的函数,为函数型组件(function component)
注入一些特殊的功能。
Hook 不能在 class 组件中使用。
最常见的 Hooks
,比如 setState
和 useEffect
。
State Hook
useState
是 React
提供的一个内置 Hook
。在函数组件里调用useState
可以给组件添加一些内部 state
。
React
在重复渲染时会保留这个 state
。
useState
返回一对值:
(1)当前状态
(2)更新它的函数
在事件处理函数中或其他一些地方调用这个函数,类似于 class
类组件的 this.setState
,但是这个更新函数不会把新的 state
和旧的 state
进行合并。
useState
唯一的参数就是初始 state
。
上面的例子中,计数器从零开始,初始 state
是 0
。
这里的 state
不一定是一个对象,它不同于 this.state
,这个初始 state
参数只有在第一次渲染时会被用到。
Example.js
:
import React, {
useState } from 'react' // 引入 React 中的 useState Hook,在函数组件中存储内部 state。
function Example () {
// 声明一个叫 “count” 的 state 变量
const [count, setCount] = useState(0)
// 调用 useState Hook 声明一个新的 state 变量,它返回一对值给到我们命名的变量上。变量命名为 count,存储点击次数。传 0 作为 useState 唯一的参数来将其初始化为 0。第二个返回的值是一个函数 setCount,通过它来更新 count 的值。
return (
<div>
<p>You clicked {
count} times</p>
<button onClick={
() => setCount