一、Memo Hook
Memo Hook是用来减少没必要的重复渲染,从而提高执行效率
二、使用
例如:
import React, { useState } from "react";
export default function App() {
const [len] = useState(10);
const [num, setNum] = useState(0);
const list = [];
for (let i = 0; i < len; i++) {
console.log(1234);
list.push(<li>{i}</li>);
}
return (
<div>
<ul>{list}</ul>
<input
type="text"
value={num}
onChange={(e) => {
setNum(e.target.value);
}}
/>
</div>
);
}
页面刚加载的时候会根据len的长度来遍历li,但是如果页面中的input框的数值改变了,就会导致页面的重新渲染,这时候页面也会重新去遍历li,这就造成了没必要的重复渲染,这时候可以通过Memo Hook来解决这个问题
import React, { useState, useMemo } from "react";
export default function App() {
const [len] = useState(10);
const [num, setNum] = useState(0);
const list = useMemo(() => {
const list = [];
for (let i = 0; i < len; i++) {
console.log(1234);
list.push(<li>{i}</li>);
}
return list;
}, [len]);
return (
<div>
<ul>{list}</ul>
<input
type="text"
value={num}
onChange={(e) => {
setNum(e.target.value);
}}
/>
</div>
);
}
useMeno的第二个参数传入一个数组,数组中的每个值为该函数的依赖项,只要数组中的值没有改变,函数就不会重新运行,这样即使页面中input的数值改变了,因为改变的不是len,就不会重新遍历li