概述
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
这里有关于hooks的优缺点讨论:谈谈react hooks的优缺点
useState
一个简单的点击按钮,数字增加的案例
代码:
import React, { useState } from 'react'
export default () => {
const [count, setcount] = useState(0)
const [num, setnum] = useState(5)
return (
<div>
<p>{count}</p>
<p>{num}</p>
<button onClick={() => {setcount(count+1);setnum(num+2)}} >click me to add</button>
</div>
)
}
useState方法调用后会返回一个长度为2数组,第一个值是我们定义的变量,第二个值是更新这个变量的方法,括号里的值就是初始化这个变量的值。我们通过解构赋值的方式获得他们。不用class,直接函数式实现。
useEffect
import React, { useState, useEffect } from 'react'
export default () => {
const [count, setcount] = useState(0)
useEffect(() => {
console.log('组件被渲染');
return () => {
console.log('组件卸载');
}
}, [Math.min(count,5)]) //数组内是effect执行的条件,如果数组内的值发生变化,effect才会执行
return (
<div>
<div>you have click {count} times </div>
<button onClick = {()=> setcount(count+1) } >click me to add </button>
</div>
)
}
可以看到,我们页面加载完成时,就已经输出了组件被渲染,这是因为输出‘组件被渲染’的区域其实是 componentDidMount , componentDidUpdate 的区域,return 中的区域是 componentWillUnmount ,而我们的useEffect只执行了5次,是因为后面的数组中的结果。但是当我们切换页面时,还会触发一次卸载的过程。