React Hooks 快速入门（完）（useMemo、useRef、）含项目地址

上一章传送门

上一章传送门：React Hooks 快速入门（二）(useContext、useReducer)

一、useMemo的介绍和使用

1.useMemo的介绍

useMemo主要用来解决React hooks 产生的副作用无用渲染问题，当我们使用function 来声明组件的时候，已经没有类继承于Component的shouldComponentUpdate组件更新之前这个生命周期，而且也不再区分mount以及update两个状态，这就意味着每次使用function组件都会重新执行所有逻辑，造成极大的性能损耗

useMemo的使用

创建一个 HooksUseMemo.js,代码如下

import React ,{useState}from 'react'
import HooksUseMemoChildren from './HooksUseMemoChildren' //引入子组件
export default function HooksUseMemo() {
    const [addMoney, setAddMoney] = useState(0)
    const [expendMonery, setexpendMonery] = useState(0)
    return (
        <div>
            <button onClick={()=>{setAddMoney(addMoney+1)}} >挣钱</button>
            <button onClick={()=>{setexpendMonery(expendMonery-1)}}>消费</button>
            {/* 对子组件进行传参 */}
            <HooksUseMemoChildren addMoney={addMoney} >{expendMonery}</HooksUseMemoChildren> 
        </div>
    )
}

创建新的HooksUseMemoChildren.js

import React from 'react'

export default function HooksUseMemoChildren({addMoney,children}) {
    //我们需要在子组件改变addMoney的值
    const changeAddMoney = (args)=>{
        console.log(`父组件传过来的addMoney：${args}`)
        //下面我要更换addMoney 的值
        return args + 1;
    }
    const childAddMoney = changeAddMoney(addMoney)
    return (
        <div>
            {/* childAddMoney为子组件接收到父组件的addMoney之后执行changeAddMoney来改变其值 */}
            <p>这是子组件修改过的打工钱：{childAddMoney}</p>
            {/* children 是子组件标签中传回的值*/}
            <p>这个是消费的钱：{children}</p> 
        </div>
    )
}

导致的结果：每次我们只点击消费按钮的时候，changeAddMoney事件照样触发了；这就导致了不必要的性能消耗，所以我们要使用useMemo进行优化性能

2.useMemo优化性能使用

我们只需要在HooksUseMemoChildren.js中修改为如下代码

import React ,{useMemo}from 'react'

export default function HooksUseMemoChildren({addMoney,children}) {
    //我们需要在子组件改变addMoney的值
    const changeAddMoney = (args)=>{
        console.log(`父组件传过来的addMoney：${args}`)
        //下面我要更换addMoney 的值
        return args + 1;
    }
    //---------------------关键代码start------------------------------
    const childAddMoney = useMemo(()=>changeAddMoney(addMoney),[addMoney])
    //---------------------关键代码end------------------------------
    return (
        <div>
            {/* childAddMoney为子组件接收到父组件的addMoney之后执行changeAddMoney来改变其值 */}
            <p>这是子组件修改过的打工钱：{childAddMoney}</p>
            {/* children 是子组件标签中传回的值*/}
            <p>这个是消费的钱：{children}</p> 
        </div>
    )
}

这样当我们点击消费按钮的同时，changeAddMoney事件是不执行的，这样就做到简单的性能优化

二、useRef获取DOM元素和保存变量

1.获取DOM元素

虽然useRef可以获取到DOM元素，获取之后就可以随便操作DOM，但是在React 中不建议，因为React是通过数据动态渲染来控制的；

import React ,{useRef}from 'react'

export default function HooksUseRef() {
    //声明一个存放DOM元素的常量
    const inputDom = useRef(null)
    const ShowInputText = ()=>{
        console.log(inputDom) //打印DOM节点
        inputDom.current.value = "点击后修改的"
    }
    return (
        <div>
            <input ref={inputDom} type="text" />
            <button onClick={ShowInputText}>获取inputDOM后改变其文字</button>
        </div>
    )
}

2.使用useRef存储变量

import React ,{useRef,useEffect,useState}from 'react'

export default function HooksUseRef() {
    

    
    //---------------保存变量代码start-------------
    const [text, setText] = useState("初始化input文字");
    //声明一个空Ref
    const textDom = useRef();
    useEffect(() => {
        textDom.current = text;
        console.log(`textDom.current的值为：${textDom.current}`)
    })
    //---------------保存变量代码end-------------
    return (
        <div>
            
            {/* 使用useRef 来保存变量 */}
            <input value={text} onChange={(e)=>{setText(e.target.value)}}></input>
        </div>
    )
}

执行结果：可以看到我们使用useRef存储了input中的value

总结：React Hooks 的学习基本用法已经完成

项目地址：ReactHooksDemo项目码云开源地址