reack hook使用详解
1.为什么使用hook
我们经常维护一些组件，组件起初很简单，但是逐渐会被状态逻辑和副作用充斥。每个生命周期常常包含一些不相关的逻辑。例如，组件常常在 componentDidMount 和 componentDidUpdate 中获取数据。但是，同一个 componentDidMount 中可能也包含很多其它的逻辑，如设置事件监听，而之后需在 componentWillUnmount 中清除。相互关联且需要对照修改的代码被进行了拆分，而完全不相关的代码却在同一个方法中组合在一起。如此很容易产生 bug，并且导致逻辑不一致。
为了解决这个问题，Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据），而并非强制按照生命周期划分。你还可以使用 reducer 来管理组件的内部状态，使其更加可预测。
2.hook使用规则
- 只能在react的函数组件使用调用hook
- 需要在组件顶层调用，不能在判断啊，循环里调用，因为hook是按顺序执行的，加入放在判断里，第一个调用了，第二次没调用，后面的hook调用提前执行，会导致bug。
3.useState（修改state）
import react,{useState, useEffect} from 'react' export default function() { const [count,setCount] = useState(0) const [arr,setArr] = useState([]) const [obj,setObj] = useState({name:'a'}) const [func,setFunc] = useState(()=>{ return 1//函数类型接受的是这个函数的返回值 }) useEffect(()=>{ document.title = `${count}times` }) return ( <> <div>{count}</div> <button onClick={()=>{ setCount(count+1) }}>click</button> <div>{arr.length}</div> <button onClick={()=>{ setArr(()=>{ arr.push(a) return [...arr]//必须返回新数组，否则没变化 }) }}>clickArr</button> <div>{obj.name}</div> <button onClick={()=>{ setObj({ ...obj, age:18 }) // setObj(Object.assign(obj,{name:'b'}))//此方法不可以，必须是返回一个新对象 }}>clickObj</button> <div>{func}</div>
</> ); }
5.useEffect（componentDidMount，componentDidUpdate和componentWIllUnmount）
useEffect取代了class组件中的componentDidMount，componentDidUpdate和componentWIllUnmount。可以在useEffect里执行一些副作用（Dom操作、数据请求、组件更新）。useEffect是无阻塞的更新，比如请求数据我们可以放在componentDidMount和componentDidUpdate中，即组件挂载之后或更新之后，而不是挂载之前，如果在挂载之前，数据请求失败会导致组件无法挂载，影响视图渲染，界面无法正常显示。
useEffect是个方法，有两个参数，第一个参数是回调函数，第二个参数是数组，
- 第二个参数如果不写，只要状态改变都会执行。
- 第二个参数是个空数组时，不管哪个状态改变都不执行，只在组件初始时执行一次。
- 当第一个回调函数中有return返回值时，表示componentWIllUnmount时执行
import styles from './index.css'; import react,{useState, useEffect} from 'react' export default function() { const [count,setCount] = useState(0) useEffect(()=>{ console.log(11) return ()=>{ console.log('componentWillUnmount')//组件componentWillUnmount时执行 } }) useEffect(()=>{ console.log(22) },[])//只有组件初始时执行 useEffect(()=>{ console.log(count) },[count])//只有count改变时执行 return ( <> <div>useEffect</div> </> ); }
4.自定义hook
通过自定义 Hook，可以将组件逻辑提取到可重用的函数中。
注：
- 自定义 Hook 必须以 “
use” 开头 - 可以使用hook（useState）
5.useRef（ref）
useRef 返回一个可变的 ref 对象，其 .current 属性被初始化为传入的参数（initialValue）。返回的 ref 对象在组件的整个生命周期内保持不变。
用途：（1）获取某个dom元素，或者dom元素（如input）的值
（2）保存变量
import styles from './index.css'; import react,{useState, useEffect, useRef} from 'react' export default function() { const inputEl = useRef(null) const save = useRef({value:'123'}) return ( <> <input ref = {inputEl} type='text'/> <br/> <button onClick={()=>{ console.log(inputEl.current)//获取了input框这个dom元素 console.log(inputEl.current.value)//获取这个dom元素的值 console.log(save) inputEl.current.focus();//聚焦input框 }}>click</button> </> ); }
6.useContext（父组件给子组件传值或方法）
使用：首先通过createContext创建一个父组件容器，在子组件通过useContext接收父组件传过来的值
import styles from './index.css'; import react,{useState, useEffect, useRef,createContext, useContext} from 'react' const MyContext = createContext()//创建一个容器组件（第一步） const ChildContext = () => { let count = useContext(MyContext)//接受不了父组件传的值（第三步） return ( <h3>我是子组件{count}</h3> ) } export default function() { const [count,setCount] = useState(0) const inputEl = useRef(null) return ( <> <MyContext.Provider value={count}>{/* （第二步）建立一个容器组件 ,通过value传需要给子虚=组件传的值*/} <ChildContext></ChildContext>{/* 子组件放在容器组件里 */} </MyContext.Provider> <input ref = {inputEl} type='text'/> <br/> <button onClick={()=>{ inputEl.current.focus();//聚焦input框 setCount(inputEl.current.value) }}>click</button> </> ); }
7.useMemo（shouldComponentUpdate）
作用：与shouldComponentUpdate类似作用，在渲染过程中避免重复渲染的问题。控制组件是否更新
返回值：返回更新的内容
原理：底层用的是memoization（js的一种缓存技术）来提高性能，用到了缓存技术
用法：其是一个函数，有两个参数，第一个参数是回调函数，第二个是数组。第二个参数用法同useEffect
区别：与useEffect执行的时间不同，useEffect是在componentDidMount以后(即组件挂载之后)执行，而useMemo是在渲染过程中执行。useEffect是控制函数是否更新执行，而useMemo是控制组件是否更新执行。
import styles from './index.css'; import react,{useState, useMemo, useEffect} from 'react' export default function() { let [count ,setCount] = useState(0) let [num ,setNum ] = useState(0) let res = useMemo(()=>{ return count //retutn {count,num} },[]) return ( <> <div>{count}----</div> {/* <div>{res.count}----</div> */} <button onClick={()=>{ setCount(count+1) }}>countClick</button> <button onClick={()=>{ setNum(num+1) }}>numClick</button> </> ); }
8.useCallback（控制组件什么时候更新）
作用：避免组件重复渲染，提高性能，可以控制组件什么时候需要更新
返回：返回一个函数callback，可以直接callback()执行
参数：第一个参数是一个回调函数，第二个参数同useEffect的第二个参数
import styles from './index.css'; import react,{useContext,useState, useCallback} from 'react' export default function() { let [count ,setCount] = useState(0) let callback = useCallback(()=>{ console.log(count) return count },[])//当写空数组时，是由第一次会执行更新，之后更新组件的时候也会执行该函数，但执行的是缓存中的，即count的值永远打印的是第一次的 return ( <> <div>{count}----</div> <div>{callback()}callback----</div> <button onClick={()=>{ setCount(count+1) }}>countClick</button> </> ); }
复杂版：
import styles from './index.css'; import react,{useContext,useState, useCallback} from 'react' export default function() { let [count ,setCount] = useState(0) let [num ,setNum] = useState(0) let callback = useCallback(()=>{ console.log(count) return `count:${count}---num:${num}` },[count])//当写空数组时，是由第一次会执行更新，之后更新组件的时候也会执行该函数，但执行的是缓存中的，即count的值永远打印的是第一次的 return ( <> <div>{count}----</div> <div>{callback()}callback----</div> <button onClick={()=>{ setCount(count+1) }}>countClick</button> <button onClick={()=>{ setNum(num+1) }}>countNum</button> </> ); }
9.useImperativeHandle（自定义暴露给父组件的实力值）
作用：可以让你在使用ref时自定义暴露给父组件的实例值。在大多数情况下，应当避免使用ref这样的命令式代码。useImperativeHandle应当与forwardRef一起。
格式：useImperativeHandle（ref(传递来的),()=>{},[])
参数：3个。第一个是父组件传过来的ref的名字。第二个参数：函数，第三个参数：数组（用于监控hook，同useEffect）
forward使用（配合useRef使用）：
用于封装组件，从父组件传过来的ref，传到某个元素身上，父组件就能拿到子组件某个dom
import styles from './index.css'; import react,{forwardRef} from 'react' const Forward = forwardRef((props,ref)=>{ return ( <> <h3 ref={ref}>h3</h3> <h4>h4</h4> </> ) }) export default () => { const el = useRef(null) return ( <> <Forward ref={el}/> <button onClick={()=>{ console.log(el.current) }}>获取子组件ref</button> </> ) }
简易版案例：
import {forwardRef, useImperativeHandle,useRef} from 'react'
//子组件
const Imperative = forwardRef((props,refa)=>{
const inputRef = useRef(null)
useImperativeHandle(refa,()=>{
return {
name:'zkq',//自定义暴露属性
focus:()=>{
inputRef.current.focus()//把子组件的input的焦点暴露给父组件
},
}
})
return (
<>
<input type="text" ref={inputRef}/>
</>
)
})
//父组件
export default () =>{
const el = useRef()
return (
<>
<Imperative ref={el}/>
<button onClick={()=>{
console.log(el)
el.current.focus()
}}>获取子组件的自定义方法或者属性</button>
</>
)
}
复杂版案例：
import {forwardRef, useImperativeHandle,useRef,useState} from 'react'
//子组件
const Imperative = forwardRef((props,refa)=>{
const [count,setCount] = useState(0)
const [num,setNUm] = useState(0)
const inputRef = useRef(null)
useImperativeHandle(refa,()=>{
return {
name:'zkq',//自定义暴露属性
focus:()=>{
inputRef.current.focus()//把子组件的input的焦点暴露给父组件
},
count,
num
}
},[count])
return (
<>
<h3>count:{count}</h3>
<h3>num:{num}</h3>
<input type="text" ref={inputRef}/>
<button onClick={()=>{
setCount(count+1)
}}>setCount</button>
<button onClick={()=>{
setNUm(num+1)
}}>setCount</button>
</>
)
})
//父组件
export default () =>{
const el = useRef()
return (
<>
<Imperative ref={el}/>
<button onClick={()=>{
console.log(el)
el.current.focus()
}}>获取子组件的自定义方法或者属性</button>
</>
)
}
10.useLayoutEffect
与useEffect作用一样，在组件生成过程中，可以做一些操作
不同：
- 执行的时间不同，useEffect是在componentDIdMount以后执行，useLayoutEffect在浏览器执行绘制之前执行（会阻塞组件挂载，慎用）
import React,{useLayoutEffect,useEffect} from 'react'
export default ()=>{
useEffect(()=>{
console.log('useEffect')
return ()=>{
console.log('useEffect-return')
}
})
useLayoutEffect(()=>{
console.log('useLayoutEffect')
return ()=>{
console.log('useLayoutEffect-return')
}
})
return (
<>
<h1>useLayoutEffect</h1>
</>
)
}
11.useReducer （reducer）
useReducer和redux的Reducer是一样的，说白了Reducer就是个函数。
参数：useReducer（）是个函数，有三个参数，第一个：reducer，第二个：初始值，第三个：init。
返回值：返回数组，第一个是state，第二个是dispatch
用法：const [state,dispatch] = useReducer(reducer,初始值)
基本用法：
import React,{useReducer,useEffect, useRef} from 'react'
export default ()=>{
const [state,dispatch] = useReducer((state,action)=>{
switch(action.type){
case 'setName':
return {
...state,
name:action.name
}
case 'setAge':
return {
...state,
age:action.age
}
default:
return state
}
},{name:'abc',age:18})
return (
<>
<h1>{state.name}-----{state.age}</h1>
<button onClick={()=>{
dispatch({
type:'setName',
name:'123'
})
}}>setName</button>
<button onClick={()=>{
dispatch({
type:'setAge',
age:'23'
})
}}>setAge</button>
</>
)
}
与useContext结合使用，效果和redux相同
下面我们简单模拟下redux：需要四个文件（index.js,text1.js,text2.js,reducer.js）
reducer.js:
import React,{createContext,useReducer} from 'react'
export const MyContext = createContext()
const reducer = (state,action)=>{
switch(action.type){
case 'setName':
return{
...state,
name:action.name
}
case 'setAge':
return {
...state,
age:action.age
}
default:
return state
}
}
const data = {
name:'zhangsan',
age:18
}
export const Reducer = (props)=>{
let [state,dispatch] = useReducer(reducer,data)
return (
<MyContext.Provider value={{state,dispatch}}>
{props.children}
</MyContext.Provider>
)
}
text1.js
import React,{useContext} from 'react'
import {MyContext} from './reducer'
export default ()=>{
let {state,dispatch} = useContext(MyContext)
return (
<>
<h1>text1:名字{state.name},年龄{state.age}</h1>
<button onClick={()=>{
dispatch({
type:'setName',
name:'Text1'
})
}}>setName</button>
<button onClick={()=>{
dispatch({
type:'setAge',
age:10
})
}}>setAge</button>
</>
)
}
text2.js:
import React,{useContext} from 'react'
import {MyContext} from './reducer'
export default ()=>{
let {state,dispatch} = useContext(MyContext)
return (
<>
<h1>text2:名字{state.name},年龄{state.age}</h1>
<button onClick={()=>{
dispatch({
type:'setName',
name:'Text2'
})
}}>setName</button>
<button onClick={()=>{
dispatch({
type:'setAge',
age:20
})
}}>setAge</button>
</>
)
}
index.js:
import { Reducer } from './reducer';
import Text1 from './test1'
import Text2 from './test2'
export default () => {
return (
<>
<Reducer>//必须这么包裹写。
<Text1/>
<Text2/>
</Reducer>
</>
)
}
效果如图：点击text1的setName，text1和text2名字都会改成相同的值，实现了数据共享。
