react中常见hook的使用方式

这篇文章主要介绍了react中常见hook的使用方式与区别，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下

这篇文章主要介绍了react中常见hook的使用方式与区别，帮助大家更好的理解和学习使用react，感兴趣的朋友可以了解下

1、什么是hook？

react hook是react 16.8推出的方法，能够让函数式组件像类式组件一样拥有state、ref、生命周期等属性。

2、为什么要出现hook？

函数式组件是全局当中一个普通函数，在非严格模式下this指向window，但是react内部开启了严格模式，此时this指向undefined，无法像类式组件一样使用state、ref，函数式组件定义的变量都是局部的，当组件进行更新时会重新定义，也无法存储，所以在hook出现之前，函数式组件有很大的局限性，通常情况下都会使用类式组件来进行代码的编写。

3、有哪些常用的hook？

(1) useState

使函数式组件也能保存状态的一个hook，这个hook的入参是状态的初始值，返回值是一个数组，数组里第一个参数为状态的值，第二个参数为修改状态的方法。

				?

									// 初始化

									const [ count,  setCount ] = useState(0)

									// 更新

									setCount(count+1)

(2) useEffect

函数式组件用来模拟生命周期的hook，可以模拟组件挂载完成、更新完成、即将卸载三个阶段，即componentDidMount、componentDidUpdate、componentWillUnmount。

useEffect的一个参数为函数，表示组件挂载、更新时执行的内容，在函数里再返回一个函数，表示组件即将卸载时调用的函数。

第二个参数为可选项，可传入数组，数组里可以为空，表示不依赖任何状态的变化，即只在组件即将挂载时执行，后续任何状态发生了变化，都不调用此hook。数组里也可以定义一或多个状态，表示每次该状态变化时，都会执行此hook。

				?

									useEffect(()=>{

									  // 这样模拟的是 componentDidMount

									}, [])

									useEffect(()=>{

									  // 这样模拟的是componentDidMount 以及当count发生变化时执行componentDidUpdate

									}, [count])

									useEffect(()=>{

									  return ()=>{

									  // 这样模拟的是 componentWillUnmount

									  }

									}, [])

(3) useContext

在没有hook之前，我们通常都会通过 xxxContext.Provider 和 xxxContext.Consumer 的方式来传递和获取context的值，使用hook之后，传递context的方式不变，但子元素获取context的方式变得更加的简洁。

				?

									// 以前的定义方式

									const CountContext = React.createContext()

									 <CountContext.Provider value={{ count: 10 }}>

									     <...自定义的组件>

									 </CountContext.Provider>

									// 子元素

									<CountContext.Consumer>

									    { value => { console.log(value.count) }} //10

									</CountContext.Consumer>

									//使用context的获取方式

									const countObj = useContext(CountContext)

									console.log(countObj.count) // 10

(4) useRef

useRef和类式组件中createRef用法比较类似，返回一个ref对象，这个对象在函数的整个生命周期都不变，根据这个特性，有两种比较常见的用法。

① 用于dom元素或者组件上，通过current属性可以获取到dom元素或者类式组件的实例对象。需要注意的是，无论是useRef还是createRef或者是回调形式、字符串形式的ref，都是不能直接给函数式组件定义的，因为函数式组件的this指向undefined，没有实例对象，只能通过forwardRef定义到函数式组件中的某个dom元素。

				?

									// 这样就将传递给函数式组件的ref绑定在了函数式组件内部的input标签上

									import React, { useRef, forwardRef } from 'react'

									// 使用函数表达式的方式定义了一个函数式组件

									const InputCom = forwardRef((props, ref) => {  

									  return <input ref={ref}/> 

									})

									export default function refDemo(){

									    const comRef = useRef()

									    return(<div>

									       <InputCom ref={comRef}/>     

									    </div>) 

									 }

② 保存一个数据，该数据如果不手动修改，它在整个生命周期中都不变

				?

									const [ count, setCount ] = useState(0)

									const prevCount = useState(count)

									// 当count发生变化时，组件更新，对count的前一次数据进行保存

									useEffect(()=>{

									  prevCount.current = count

									}, [count])

(5) useReducer

useReducer相当于是useState的升级版，作用与useState类似，都是用来保存状态，但它的不同点在于可以定义一个reducer的纯函数，来处理复杂数据。

				?

									// 定义一个处理数据的reducer纯函数

									function reducer(prevState, action){

									  switch(action.type){

									    case 'increment':

									      return {...prevState, count: prevState.count + 1 }

									    case 'decrement':

									      return {...prevState, count: prevState.count - 1 }

									    default:

									      return prevState

									  }

									}

									// 初始化状态

									const [ count, dispatch ] = useReducer(reducer, { count: 0 })

									// 修改状态，此时的修改需要派发一个action，让传入的reducer函数进行处理

									dispatch({ type: 'increment' })

(6) useCallback

函数式组件中，每一次更新状态，自定义的函数都要进行重新的声明和定义，如果函数作为props传递给子组件，会造成子组件不必要的重新渲染，有时候子组件并没有使用到父组件发生变化的状态，此时可以使用useCallback来进行性能优化，它会为函数返回一个记忆的值，如果依赖的状态没有发生变化，那么则不会重新创建该函数，也就不会造成子组件不必要的重新渲染。

				?

									import React, { useState, useCallback, memo } from 'react'

									const AddBtn = memo((props)=>{ // 使用函数表达式的方式定义了一个函数式组件

									    return<button onClick={props.increment}>+1</button>

									})

									export default function CallBackPerformance(){

									    const [ count, setCount ] = useState(0)

									    const [ show, setShow ] = useState(true)

									    const increment1 = () => {

									        console.log('increment1被调用了')

									        setCount(count+1)

									    }

									   const increment2 = useCallback(()=>{  // 使用了useCallback来优化的函数

									         console.log('increment2被调用了')

									         setCount(count+1)

									    },[count])

									    return(<div>

									            <div>当前计数：{count}</div>

									            <AddBtn increment={increment1} name="1"/>

									            <AddBtn increment={increment2} name="2"/>

									            <button onClick={e => setShow(!show)}>切换show</button>

									        </div>)

									}

									// 当show这个状态发生变化时，子组件increment1会重新渲染，increment2不会重新渲染

(7) useMemo

useMemo也是返回一个记忆的值，如果依赖的内容没有发生改变的话，这个值也不会发生变化，useMemo与useCallback的不同点在于useMemo需要在传入的函数里需要return 一个值，这个值可以是对象、函数，格式如下。

				?

									useMemo(()=>{

									   return { count }

									}, [count])

									// 使用useCallback时   

									const increment2 = useCallback(()=>{

									    setCount(count+1)

									},[count])

									// 使用useMemo模拟useCallback

									const increment2 = useCallback(()=>{

									    return ()=>{

									        setCount(count+1)

									    }

									},[count])

									// useMemo的应用场景，当要进行一些复杂的计算时，

									//计算的值没有发生变化，并不需要每一次更新都重新计算

									import React, { useState, useMemo } from 'react'

									const calculateNum = (count) => {

									    console.log('total重新计算了')

									    let total = 0

									    for(let i = 0; i <= count; i++){

									        total += i

									    }

									    return total

									}

									export default function ComplexUseMemo(){

									    const [ count, setCount ] = useState(10)

									    const [ show, setShow ] = useState(true)

									    const total = useMemo(()=>{

									        return calculateNum(count)

									    }, [count])

									    return(<div>

									        <div>{total}</div>

									        <button onClick={e=>setCount(count+1)}>+1</button>

									        <button onClick={e=>setShow(!show)}>切换show</button>

									    </div>)

									}

(8) useImperativeHandle

这个是与forwardRef配合来使用的，当我们对函数式组件使用forwardRef将ref指定了dom元素之后，那就父组件就可以任意的操作指定的dom元素，使用useImperativeHandle就是为了控制这样的一种行为，指定父元素可操作的子元素的方法。

				?

									import React, {  useRef, useImperativeHandle, forwardRef } from 'react'

									const InputComp = forwardRef((props, ref)=>{

									  const childInputRef = useRef()

									  useImperativeHandle(ref, ()=>({

									    focus: ()=>{

									      childInputRef.current.focus()

									    }

									  }), [childInputRef.current])

									  return<input ref={childInputRef}></input>

									})

									export default function ImperativeHookDemo() {

									  const inputRef = useRef()

									  return(<div>

									      <InputComp ref={inputRef}/>

									      <button onClick={e=>inputRef.current.focus()}>聚焦</button>

									    </div>)

									}