1、介绍
为什么需要Hooks?
①组件的最佳写法是函数，而不是类，函数组件官方更加推荐。
②Hooks 就是解决函数组件的 状态，生命周期问题的。
③函数组件+Hooks 完胜于 类组件（class）
| # | 函数组件+hooks | 类组件（class） |
|---|---|---|
| 难易程度 | 简单 | 复杂（需要操作this） |
| 性能 | 占内存小 | 占内存大 |
| 功能 | 灵活 | 不太灵活 |
2、5大钩子简单使用
①useState （状态钩子）
Ⅰ、创建一个属性，和一个修改该属性的方法
Ⅱ、该方法的第一个形参，是该属性改后的值
import React,{
useState} from 'react'
function Index() {
const [count ,setCount] = useState(10);
return (
<div>
<p>数字为：{
count}</p>
<button onClick = {
()=> setCount(count + 1)}> 增加1 </button>
</div>
)
}
②useReducer（Action钩子）
Ⅰ、useReducer和上面的useState 功能相同
Ⅱ、当逻辑比较复杂，多种情况判断下 ， useReducer 比 useState 更方便
import React,{
useReducer} from 'react'
function Index2() {
const [state, changeState] = useReducer(aaa,0)
function aaa(state,action){
switch (action.type) {
case 'add': return state+1
case 'pop': return state-1
default: break;
}
}
return (
<div>
<p>{
state}</p>
<button onClick={
()=>changeState({
type:'add'})}>增加1 </button>
<button onClick={
()=>changeState({
type:'pop'})}>减去1 </button>
</div>
)
}
③useEffect（周期钩子）
Ⅰ、 useEffect(函数,[ ])，第二个参数, 数组中未绑定对象，则该组件“渲染”、“卸载”会触发，
渲染触发函数内的逻辑，卸载触发return 返回的函数。
Ⅱ、useEffect(函数,[参数1,参数2])，第二个参数, 数组中绑定对象，则该组件“渲染”、“卸载”、绑定对象“更新”都会触发，
同理渲染触发函数内的逻辑，卸载触发return 返回的函数，但更新是先触发上一次的return返回的函数，在执行这一次的函数内的逻辑。
import React,{
useEffect} from 'react'
function IndexA() {
useEffect(()=>{
console.log('Mount会触发')
return ()=>{
console.log('unMount触发 ，卸载了')}
},[])
}
function IndexB() {
useEffect(()=>{
console.log('Mount或Update 会触发',count)
return ()=>{
console.log('unMount或Update触发 ，卸载了')}
},[count])
}
④useRef（获取元素钩子）
Ⅰ、绑定dom节点，获取dom元素属性
function Index4() {
const inputA = useRef();
const fun = ()=>{
console.log(inputA.current.type) }
return (
<div>
<input type="text" ref = {
inputA } />
<button onClick = {
fun} >获取输入的值</button>
</div>
)
}
⑤useContext（共享状态钩子）
Ⅰ、实现组件间的属性共享
Ⅰ、通过将需要的共享的属性写在中间配置中，使得这些组件的子及一下的后代都可以获取到共享属性
import React,{
useContext} from 'react'
import {
MyProvider } from "./myContext";
function Index() {
return (
<MyProvider>
<Son1/>
<Son2/>
</MyProvider>
)
}
function Son1() {
const {
count, add } = useContext(myContext);
return ({
count} <button onClick={
add}>增加1</button>)
}
function Son2() {
const {
count, pop } = useContext(myContext);
return ({
count} <button onClick={
pop}>减去1</button>)
}
中间配置MyProvider
const myContext = React.createContext();
export const MyProvider = ({
children})=>{
const [count,setCount] = useState(0);
const value = {
count,
add:()=>{
setCount(count + 1 )},
pop:()=>{
setCount(count - 1 )}
}
return (
<myContext.Provider value = {
value}>
{
children}
</myContext.Provider>
)
}
