文章目录
上一章传送门
一、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