什么是 Hook ?
官方介绍:Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
为什么要用hook?
改变了原始的React类的开发方式,改用了函数形式;它改变了复杂的状态操作形式,让程序员用起来更轻松;它改变了一个状态组件的复用性,让组件的复用性大大增加 。它可以说是react 2019年最最火的新特征了。
所有的hook
useState
useEffect
useContext
useReducer
useCallback
useMemo
useRef
useImperativeHandle
useLayoutEffect
useDebugValue
useState 和 useEffect
useState这个函数接收的参数是状态的初始值(Initial state),它返回一个数组,这个数组的第0位是当前的状态值,第1位是可以改变状态值的方法函数。 所以上面的代码的意思就是声明了一个状态变量为count,并把它的初始值设为0,同时提供了一个可以改变count的状态值的方法函数。
useEffect这个函数接收两个参数,第一个参数是一个匿名函数,相当于生命周期函数中的componentWillUnmount 函数的返回值也是一个匿名函数则相当于生命周期函数的 componentDidUnmount ,第二个值是一个数组可以传入很多状态对应的变量,意思是当状态值发生变化时,我们才进行解绑
引入
import React,{useState,useEffect} from 'react';
使用
function App(){
const [count,setCount]=useState(0)//将useState进行解构
useEffect(()=>{
console.log('======App Enter======')//组件创建后执行
return ()=>{
console.log('======App End======')//组件销毁后执行
}
},[count])//组件负影响
return(
<div>
<h1>{count}</h1>
<button onClick={()=>{setCount(count+1)}}>click</button>
</div>
)
}