React Hooks 一步到位_综合

useState

用来声明状态变量。

import React, { useState } from 'react';
// ...
const [ count , setCount ] = useState(0);
// ...

count 声明的变量
setCount 设用来更新变量的函数
0 初始值
多个状态声明不能出现在条件判断语句中

useEffect

用来代替生命周期函数。

import React, { useEffect } from 'react';useEffect(()=>{// some code
})

第一次组件渲染和每次组件更新都会执行这个函数
useEffect中的函数的执行不会阻碍浏览器更新视图，这些函数是异步的

使用 useEffect 实现类似 componentWillUnmount

useEffect(()=>{return () => { // some code}
})

返回一个函数实现解绑
但是这样会导致每次状态发生变化，useEffect 都进行解绑

useEffect(()=>{return () => { // some code}
}, [])

使用第二个参数，制定哪些状态发生变化时再解绑

useContext

跨越组件层级直接传递变量，实现状态共享。

useContext 解决的是组件之间值传递的问题
redux 解决的是应用中统一管理状态的问题
useContext 通过和 useReducer 的配合使用，可以实现类似 Redux 的作用

Outer 组件

import React, { createContext } from 'react'
const ValueContext = createContext()
function Outer(){return (<><ValueContext.Provider value={'我是传向 Inner 组件的值'}><Inner /></ValueContext.Provider></>)
}
export default Outer;

使用 createContext 创建 context
使用 createContext 同时生成组件
闭合标签将组件包裹

Inner 组件

import React, { useContext  } from 'react'
const value = useContext(CountContext)
function Inner(){return (<><p>{value}</p></>)
}
export default Inner;

使用 useContext 来使用上下文

useReducer

用来实现类似 redux 功能

import React, { useReducer } from 'react';function Demo(){const [ count, dispatch ] = useReducer((state,action)=>{switch(action){case 'add':return state+1case 'sub':return state-1default:return state}},0)return (<><h2>分数：{count}</h2><button onClick={()=>dispatch('add')}>加</button><button onClick={()=>dispatch('sub')}>减</button></>)
}export default Demo

state 第一个参数状态
action 控制业务逻辑的判断参数

模拟 Redux

useContext：可访问全局状态，避免一层层的传递状态
useReducer：通过action的传递，更新复杂逻辑的状态

颜色共享组件 color.js

import React, { createContext,useReducer } from 'react';export const ColorContext = createContext({})
export const UPDATE_COLOR = 'UPDATE_COLOR'const reducer = (state, action) => {switch(action.type){case UPDATE_COLOR:return action.colordefault:return state}
}export const Color = props => {const [color, dispatch] = useReducer(reducer, 'blue')return (<ColorContext.Provider value = {{color,dispatch}}>{props.children}</ColorContext.Provider>)
}

用 {props.children} 来显示子组件
将 color 和 dispatch 共享出去

showArea.js

import React , { useContext } from 'react';
import { ColorContext } from './color';function ShowArea(){const { color } = useContext(ColorContext)return (<div style={{ color:color }}>字体颜色为{ color }</div>)
}export default ShowArea

注意引入 ColorContext 使用了大括号

Buttons.js

import React , { useContext } from 'react';
import { ColorContext, UPDATE_COLOR } from './color'function Buttons(){const { dispatch } = useContext(ColorContext)return (<div><button onClick={()=>{dispatch({type:UPDATE_COLOR,color:"red"})}}>红色</button><button onClick={()=>{dispatch({type:UPDATE_COLOR,color:"yellow"})}}>黄色</button></div>)
}export default Buttons

Demo.js

import React, { useReducer } from 'react';
import ShowArea from './ShowArea';
import Buttons from './Buttons';
import { Color } from './color';   //引入Color组件function Demo(){return (<><Color><ShowArea /><Buttons /></Color></>)
}export default Demo

useMemo

用来解决使用 React hooks 产生的无用渲染的性能问题。

import React , {useState,useMemo} from 'react';function Demo(){const [xiaohong , setXiaohong] = useState('小红待客状态')const [zhiling , setZhiling] = useState('志玲待客状态')return (<><button onClick={()=>{setXiaohong(new Date().getTime())}}>小红</button><button onClick={()=>{setZhiling(new Date().getTime()+',志玲向我们走来了')}}>志玲</button><ChildComponent name={xiaohong}>{zhiling}</ChildComponent></>)
}function ChildComponent({name,children}){function changeXiaohong(name){console.log('她来了，她来了。小红向我们走来了')return name+',小红向我们走来了'}const actionXiaohong = changeXiaohong(name)return (<><div>{actionXiaohong}</div><div>{children}</div></>)
}export default Demo

点击志玲按钮，小红对应的方法执行，虽然结果没变，但是每次都执行，损耗性能。

function ChildComponent({name,children}){function changeXiaohong(name){console.log('她来了，她来了。小红向我们走来了')return name+',小红向我们走来了'}const actionXiaohong = useMemo(()=>changeXiaohong(name),[name]) return (<><div>{actionXiaohong}</div><div>{children}</div></>)
}

第二个参数 [name] 匹配成功，才会执行。

useRef

用来获取React JSX中的DOM元素
用来保存变量

import React, { useRef} from 'react';
function Demo(){const inputEl = useRef(null)inputEl.current.value = "给 input value属性 赋值"return (<><input ref={inputEl} type="text"/></>)
}export default Demo

import React, { useRef, useState, useEffect } from 'react'function Demo(){const inputEl = useRef(null)inputEl.current.value="给 input value属性 赋值"const [text, setText] = useState('默认值')const textRef = useRef()useEffect(()=>{textRef.current = text})return (<><input ref={inputEl} type="text"/><input value={text} onChange={(e)=>{setText(e.target.value)}} /></>)
}export default Demo

text 每次发生变化，将值保存到 useRef 中
使用 useEffect 实现每次状态变化都进行变量重新赋值
很少用到这个功能（保存变量）

自定义 Hooks

编写自定义函数实现获取浏览器窗口

import React, { useState, useEffect, useCallback } from 'react';function useWinSize(){const [ size , setSize] = useState({width:document.documentElement.clientWidth,height:document.documentElement.clientHeight})const onResize = useCallback(()=>{setSize({width: document.documentElement.clientWidth,height: document.documentElement.clientHeight})},[])useEffect(()=>{window.addEventListener('resize',onResize)return ()=>{window.removeEventListener('resize',onResize)}},[])return size;
}function Demo(){const size = useWinSize()return (<div>页面Size:{size.width} x {size.height}</div>)
}export default Demo

命名要使用 use 开头以确认该函数是自定义 Hook 而不是组件
useCallback 用来缓存方法（ useMemo 是为了缓存变量）
第一次进入方法时用 useEffect 来注册 resize 监听事件
防止一直监听所以在方法移除时，使用return的方式移除监听
最后在 Demo 组件中使用

文章参考

官方文档

哔哩哔哩up主技术胖的视频