React【Hook简介、Effect Hook、清除 Effect、跳过 Effect（一）、跳过 Effect（二）、使用多个 Effect 实现关注点分离】(七)

素颜马尾好姑娘i 2024-02-20 08:40 34阅读 0赞

![796df6d17fd644498af79bb6fef3fdaa.gif][]

**目录**

Hook简介

Effect Hook

清除 Effect

跳过 Effect（一）

跳过 Effect（二）

使用多个 Effect 实现关注点分离

Hook使用规则

自定义Hook

useContext

useRef

--------------------

### Hook简介    ###

![344ab39900144854bad0ff0a669d1d46.png][]

Hook 是 React 16.8 的新增特性。  
Hook都是些函数，这些函数能让你不使用class的情况下还能 “钩入” React state 及生命周期等特性。

**class**

import React, { Component } from 'react'
    export default class Counter extends
    Component {
        constructor(props) {
            super(props)
            this.state = { count: 0 }
       }
        render() {
            return (
                <div>
                   我是一个使用class定义的组件<br/>
                    <button onClick={() => this.setState({ count: this.state.count + 1 })}>变数</button>
                    <h3>数量：{this.state.count}</h3>
                </div>
           )
       }
    }

**hook**

import React, { useState } from 'react'
    export default function Counter() {
        // 声明一个叫 “count” 的 state 变量。useState返回一个数组
        const [count, setCount] = useState(0)
        return (
            <div>
               我是使用hook的组件<br />
                <button onClick={()=> setCount(count+1)}>变量</button>
                <h3>数量：{count}</h3>
            </div>
       )
    }

> 提示：  
> React 没有计划移除 class。

**什么时候我会用 Hook？**

如果你在编写函数组件并意识到需要向其添加一些 state，以前的做法是必须将其它转化为 class。现在你可以在现有的函数组件中使用Hook。

**State Hook**

![05b7c77271f549cd919c950e85dc77cc.png][]

**useState**  
**useState** 是一个Hook，它本质上是一个函数，这个函数可以用来定义组件的state变量。  
**useState()** 方法里面唯一的参数就是初始 state。不同于 class 的是，我们可以按照需要使用数字或字符串对其进行赋值，而不一定是对象。  
**useState** 返回值为：当前 state 以及更新 state 的函数。

**多个state变量**

import React, { useState } from 'react'
    export default function Counter() {
        // 声明一个叫 “count” 的 state 变量。useState返回一个数组
        const [count, setCount] = useState(0)
        //声明叫做color的state变量
        const [color, setColor] = useState('red')
        return (
            <div>
               我是使用hook的组件
                <br />
                <button onClick={()=> setCount(count+1)}>变量</button>
                <button onClick={()=> setColor('blue')}>变色</button>
                <h3 style={
       {color}}>数量：{count}</h3>
            </div>
       )
    }

**更改state**  
**useState** 返回值为：当前 state 以及更新 state 的函数。要更改state，则调用更新state的函数就可以。

### Effect Hook ###

###    ![9c38697e0c964d3d924abda006c7b6a7.png][] ###

Effect Hook 可以让你在函数 组件中执行副作用操作。比如：数据获取，设置订阅以及操作 DOM。

**class**

import React, { Component } from 'react'
    export default class Counter extends
    Component {
        constructor(props) {
            super(props)
            this.state = { count: 0 }
            this.inputRef=React.createRef()
       }
    
        componentDidMount(){
            this.inputRef.current.value=`点击了${this.state.count}次`
       }
        componentDidUpdate(){
            this.inputRef.current.value=`点击了${this.state.count}次`
       }
        render() {
            return (
                <div>
                   我是一个使用class定义的组件<br/>
                    <button onClick={() =>this.setState({ count: this.state.count + 1})}>变数</button>
                    <h3>数量：{this.state.count}</h3>
                    <input ref={this.inputRef}/>
                </div>
           )
       }
    }

**useEffect**

可以接收一个参数，是一个回调函数，此函数就是我们的 effect。默认情况下，它在第一次渲染之后和每次更新之后都会执行。

import React, { useState, useEffect } from 'react'
    
    export default function Counter() {
        // 声明一个叫 “count” 的 state 变量。useState返回一个数组
        const [count, setCount] = useState(0)
        //声明叫做color的state变量
        const [color, setColor] = useState('red')
        const inputRef = React.createRef()
        //接收一个函数
        useEffect(() => {
            inputRef.current.value = `点击了 ${count}次`
       })
        return (
            <div>
               我是使用hook的组件
                <br />
                <button onClick={() => setCount(count + 1)}>变量</button>
                <button onClick={() => setColor('blue')}>变色</button>
                <h3 style={
       { color }}>数量： {count}</h3>
                <input ref={inputRef} />
            </div>
       )
    }

提示：  
你可以把 **useEffect** Hook 看做 **componentDidMount** ， **componentDidUpdate** 函数的组合。

### 清除 Effect    ###

![9aa9d053dfb44b389a19bbc612086dea.png][]

每个 effect 都可以返回一个清除函数。它们都属于 effect 的一部分，我们期望这个清除函数在组件被卸载的时候被调用。

//App.js
    import React, { useState } from 'react';
    import Counter1 from './classes/Counter';
    import Counter2 from './hooks/Counter';
    export default function App(){
      const[showCounter1,setShowCounter1]=useState(true)
      const[showCounter2,setShowCounter2]=useState(true)
      return <div>
        
        <button onClick={()=>setShowCounter1(false)}>卸载Couter1</button>
    
        <button onClick={()=>setShowCounter2(false)}>卸载Couter2</button>
       {showCounter1&&<Counter1/>}
       {showCounter2&&<Counter2/>}
      </div>
    }

//classes/Counter.js
    import React, { Component } from 'react'
    export default class Counter extends
    Component {
        constructor(props) {
            super(props)
            this.state = { count: 0 ,time:new Date().toLocaleTimeString()}
            this.inputRef=React.createRef()
       }
        componentDidMount(){
            this.inputRef.current.value=`点击了${this.state.count}次`
            this.timer=setInterval(()=>{
                console.log(new Date().toLocaleTimeString())
                this.setState({time:new Date().toLocaleTimeString()})
           },1000)
       }
        componentDidUpdate(){
            this.inputRef.current.value=`点击了 ${this.state.count}次`
       }
        componentWillUnmount(){
            //组件卸载的时候清除定时器
            clearInterval(this.timer)
       }
        render() {
            return (
                <div>
                   我是一个使用class定义的组件<br/>
                    <button onClick={() => this.setState({ count: this.state.count + 1 })}>变数</button>
                    <h3>数量：{this.state.count}</h3>
                    <input ref={this.inputRef}/>
                    <h3>现在是：{this.state.time}</h3>
                    
                </div>
           )
       }
    }

//hooks/Counter.js
    import React, { useState, useEffect } from 'react'
    export default function Counter() {
        // 声明一个叫 “count” 的 state 变量。useState返回一个数组
        const [count, setCount] = useState(0)
        //声明叫做color的state变量
        const [color, setColor] = useState('red')
        const [time, setTime] = useState(new Date().toLocaleTimeString())
        const inputRef = React.createRef()
        //接收一个函数
        useEffect(() => {
            console.log('effect')
            inputRef.current.value = `点击了${count}次`
            const timer = setInterval(() => {
                console.log(new Date().toLocaleTimeString())
                setTime(new Date().toLocaleTimeString() )
           }, 1000)
            //通过return 返回的回调函数会在组件卸载时调用
            return () => {
                clearInterval(timer)
           }
       })
        return (
            <div>
               我是使用hook的组件
                <br />
                <button onClick={() =>setCount(count + 1)}>变量</button>
                <button onClick={() =>setColor('blue')}>变色</button>
                <h3 style={
       { color }}>数量：{count}</h3>
                <input ref={inputRef} />
                <h3>现在的时间是：{time}</h3>
            </div>
       )
    }

> 提示：  
> 你可以把 useEffect Hook 看做 **componentDidMount** ，**componentDidUpdate**,**componentWillUnmount** 三个函数的组合。

###  **跳过 Effect（一）** ###

![f3479f1f48b847a0bfdae31145238d0d.png][]

在某些情况下，每次渲染后都执行或者清理 effect 可能会导致性能问题。

只运行一次 effect  
如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组 **\[\]** 作为第二个参数。

//接收一个函数
        useEffect(() => {
            inputRef.current.value = `点击了${count}次`
       })
        //接收一个函数
        useEffect(()=>{
            console.log('effect')
            const timer = setInterval(() => {
                console.log(new Date().toLocaleTimeString())
                setTime(new Date().toLocaleTimeString() )
           }, 1000)
            //通过return 返回的回调函数会在组件卸载时调用
            return () => {
                console.log('clear')
                clearInterval(timer)
           }
       },[])

### **跳过 Effect（二）**    ###

![6b2a0ebcb327474fa956b0fe83dc6952.png][]

根据依赖数据的变化调用effect  
传递数组作为 useEffect 的第二个可选参数，数组中可以设置要监听发生变化的数据，可以是一个也可以是多个，只要有一个元素发生变化，React 就会执行 effect。  
useEffect(()=>\{\},\[被监听的数据1,被监听的数据2\])

//只要组件需要更新，则下面的effect就会执行，大可不必
    useEffect(() => {
            inputRef.current.value = `点击了${count}次`
    })

useEffect(()=>{
         //在effect中可以获取到最新的count
         inputRef.current.value = `点击了${count}次`
       },[count])//当count发生变化时，才调用effect

监听props传递的数据的变化

//CounterParent.js
    import React, { useEffect, useState } from 'react'
    import Counter from './Counter'
    export default function CounterParent() {
        const [id, setId] = useState()
        
        return (
            <div>
                <button onClick= {()=>setId('100')}>获取Id </button>
                <Counter id={id}/>
            </div>
       )
    }

useEffect(()=>{
            console.log(props.id)
            if(props.id){
                //使用id，比如发起网络请求等
           }
    },[props.id])

### 使用多个 Effect 实现关注点分离    ###

![234d7b97fd5e49d58ae4cee61e1dd18f.png][]

使用 Hook 其中一个目的就是要解决 class 中生命周期函数经常包含不相关的逻辑，但又把相关逻辑分离到了几个不同方法中的问题。  
可以使用多个 effect。这会将不相关逻辑分离到不同的 effect 中。

useEffect(() => {
        // 执行一些副作用操作
        // console.log(count)
        inputRef.current.value = `点击了${count}次 `
     }, [count])
      // 传递第二个参数为[],代表effect只有在组件挂载的时候调用一次，
      //effect返回的函数会在组件卸载的时候调用一次
      useEffect(() => {
        // console.log('effct')
        const timer = setInterval(() => {
          // console.log(new Date().toLocaleTimeString())
          setTime(new Date().toLocaleTimeString())
       }, 1000)
        return () => {
          // console.log('clear')
          clearInterval(timer)
       }
     }, [])
      useEffect(() => {
        console.log(props.id)
        // 发送网络请求
     }, [props.id])

> 提示：  
> 使用Hook与使用生命周期相比较，业务逻辑更分明。

### Hook使用规则 ###

![1343cc8e29d1401bb26d09ad10835386.png][]

只在组件最顶层调用Hook  
**不要在循环，条件或嵌套函数中调用 Hook**， 确保总是在你的  
React 函数的最顶层调用Hook。

> 提示：  
> 这么做的目的是保证组件在初次渲染或者重新渲染的时候调用Hook的顺序保持一致。

const [count, setCount] = useState(0);
        const [color, setColor] = useState('red');
        if (props.name) {
          //在条件语句中调用Hook不能确保每次渲染都调用该hook或者不调用该hook,所以没法保证整个组件所有hook的调用顺序每次都一致
            const [name, setName] = useState(props.name)
       }

![fec6027790fb430cbe3369c80ff629db.png][]

if (props.name) {
            // const [name, setName] = useState(props.name)
            useEffect(()=>{
                const name=props.name;
           })
       }

![e7109bac2f684bcbbf0986db78a28213.png][]

const onClick=()=>{
      //在函数当中也不能调用hook
         const [name, setName] = useState(props.name) }
    return (
            <div>
                <button onClick={onClick}>点击</button>
            </div>
       );

> 提示：  
> **eslint-plugin-react-hooks** 的 ESLint 插件会检测hook的使用规则。  
> 此插件默认已添加到Create React App工具包中。

### 自定义Hook ###

![d8400a72bede42da8c78793214219b7f.png][]

**什么情况下自定义Hook:**

当我们想在两个或者多个函数之间共享逻辑时，我们会把它提取到第三个函数中。这实现共享逻辑的第三个函数就是Hook。

规则  
1、自定义 Hook 是一个函数。  
2、其名称以 **use** 开头。  
3、函数内部可以调用其他的 Hook。  
4、在两个组件中使用相同的 Hook 不会共享 state 。

//自定义的hook
    import { useEffect, useState } from "react";
    export default function useUserInfo(){
        const [userInfo,setUserInfo]=useState({})
        useEffect(()=>{
            const info=JSON.parse(localStorage.getItem('userInfo'))
            setUserInfo(info)
       },[])
        return [userInfo,setUserInfo]
    }

使用自定义的Hook

//User.js
    import React from 'react';
    import useUserInfo from '../components/useUserInfo'
    export default function User() {
        const [userInfo,setUserInfo]=useUserInfo()
        
      return (
        <div>
            <h3>我是第一个使用自定义Hook的组件</h3>
           {userInfo.name}
    
            <button onClick= {()=>setUserInfo({name:'111'})}>更改用户信息</button>
          
        </div>
     );
    }

//User1.js
    import React from 'react';
    import useUserInfo from '../components/useUserInfo';
    export default function User1() {
        const [user,setUser]=useUserInfo()
      return (
        <div>
            <h3>我是第二个调用自定义hook的组件</h3>
           {user.name}
            <button onClick= {()=>setUser({name:'222'})}>更改用户</button>
          
        </div>
     );
    }

### useContext ###

###     ###

![8c88ec3311784b1eb992836be782e614.png][]

**useContext(MyContext)**

参数为 **React.createContext** 的返回值。  
**useContext(MyContext)** 用来读取 context 的值以及订阅 context 的变化。  
我们仍然需要在上层组件树中使用 **<MyContext.Provider>** 来为下层组件提供 context。

> 提示：  
> **useContext(MyContext)** 相当于 class 组件中的 **myClass.contextType = MyContext**  
> 或者 **<MyContext.Consumer>** 。

//Mycontext.js
    import React from 'react'
    export default React.createContext({})

//App.js
    <MyContext.Provider value={
       {name:'小童',account:'xiaotong'}}>
         <UseContextTest/>
    </MyContext.Provider>

//UseContextTest.js
    import React ,{useContext}from 'react';
    import MyContext from '../MyContext';
    export default function UseContextTest() {
        const context = useContext(MyContext);
      return (
        <div>
         通过context传递的用户名是：{context.name}
        </div>
     );
    }

### useRef    ###

![bca73d81413e4239a4be4b059832ec76.png][]

**useRef(initialValue)**

**useRef** 返回一个可变的 ref 对象。  
参数为其 **.current** 属性的初始值。  
返回的 ref 对象在组件的整个生命周期内保持不变。

import React,{useRef} from 'react';
    export default function UseRefTest() {
        const inputRef = useRef(null);
        //访问inputRef的current属性就可以访问到inputDOM
      return (
        <div>
            <input ref={inputRef}/>
            <button onClick= {()=>inputRef.current.focus()}>获得焦点</button>
          
        </div>
     );
    }

> 提示：  
> 使用useRef可以代替React.createRef()

import React, { useState } from 'react'
    export default function UseRefTest() {
        let count = 0
        const [time,setTime]=useState()
        const changeCount=()=>{
            count++
            setTime(new Date().toLocaleTimeString())
       }
        const showCount = () => {
            //引用调用了changeCount，组件会重新渲染，则组件的代码会重新执行，那么count就一直被重为0，所以永远拿不到count更改后的值
            console.log(count)
       }
        return (
            <div>
                <button onClick={changeCount}>更改count</button>
                <button onClick={showCount}>查看count</button>
                <h3>当前时间是：{time}</h3>
            </div>
       )
    }

import React, { useRef, useState } from 'react'
    export default function UseRefTest() {
        //使用ref保存的数据，即使组件重新渲染，它也不会被重置
        const count = useRef(0)
        const [time,setTime]=useState()
        const changeCount=()=>{
            count.current++
            setTime(new Date().toLocaleTimeString())
       }
        const showCount = () => {
            console.log(count)
       }
        return (
            <div>
                <button onClick={changeCount}>更改count</button>
                <button onClick={showCount}>查看count</button>
                <h3>当前时间是：{time}</h3>
            </div>
       )
    }

[796df6d17fd644498af79bb6fef3fdaa.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/ff0e184e0bb648488f81f9e5397e2213.png
[344ab39900144854bad0ff0a669d1d46.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/5ce4d4508c914e5b9e76f41270d90ec4.png
[05b7c77271f549cd919c950e85dc77cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/6151513bb6b14d0c87d32fe41a4cb0bc.png
[9c38697e0c964d3d924abda006c7b6a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/de954ee5475e438d9991e04460854e31.png
[9aa9d053dfb44b389a19bbc612086dea.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/38e387645d64424d899641f5850a0eca.png
[f3479f1f48b847a0bfdae31145238d0d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/0c823a13899543528d0829f24636e5ff.png
[6b2a0ebcb327474fa956b0fe83dc6952.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/7d9eb53881ad4e79b94411a0be3a25ae.png
[234d7b97fd5e49d58ae4cee61e1dd18f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/88906f7568f94ca0965d79e43d78417b.png
[1343cc8e29d1401bb26d09ad10835386.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/766f9a4bbb964442b324594ea5167aa5.png
[fec6027790fb430cbe3369c80ff629db.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/6b3936a18ba448fbb6f516173bc51ceb.png
[e7109bac2f684bcbbf0986db78a28213.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/6c21e38a7c914deab10da1b53edf8179.png
[d8400a72bede42da8c78793214219b7f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/734ffcd194514d48b6518144219ee6f7.png
[8c88ec3311784b1eb992836be782e614.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/02dfe1ae67a94865a3be18f854672d4d.png
[bca73d81413e4239a4be4b059832ec76.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/20/89760a9fedc24e7e84b54ad3fe0f5b8c.png