React钩子简介

了解Hooks如何帮助您构建React应用程序

Hooks是一个将在React 16.7中引入的功能,它将在将来改变我们编写React应用程序的方式。

在Hooks出现之前,组件中的某些关键事物只有使用类组件才能实现:拥有其自身的状态以及使用生命周期事件。功能部件更轻巧,更灵活,但功能受到限制。

挂钩允许功能组件具有状态并响应生命周期事件也是如此,并使类组件过时了。它们还允许功能组件具有处理事件的好方法。

访问状态

使用useState()API,您可以创建一个新的状态变量,并有一种方法来对其进行更改。useState()接受状态项的初始值,并返回一个包含状态变量的数组,以及您用来更改状态的函数。由于它返回一个数组,我们使用阵列解构访问每个单独的项目,如下所示:const [count, setCount] = useState(0)

这是一个实际的例子:

import { useState } from 'react'

const Counter = () => { const [count, setCount] = useState(0)

return ( <div> <p>You clicked {count} times</p> <button onClick={() => setCount(count + 1)}>Click me</button> </div> ) }

ReactDOM.render(<Counter />, document.getElementById(‘app’))

您可以添加尽可能多的useState()进行所需的调用,以创建所需数量的状态变量。只要确保您在组件的顶层(而不是在if或在其他任何区块中)。

Codepen上的示例:

看笔React Hooks示例#1计数器由Flavio Copes(@flaviocopes) 在密码笔

Tech Wiki Online!