-
useMemo 接受两个参数，第一个参数是一个函数，返回值用于产生保存值。 第二个参数是一个数组，作为 dep 依赖项，数组里面的依赖项发生变化，重新执行第一个函数，产生新的值。
import React, { useMemo, useState } from "react";
import './App.css';
function App() {
let [num1, setNum1] = useState(0);
const add1 = () =>{
setNum1(num1+1);
}
let newNum: any = useMemo(()=>{
/** 逻辑运算 **/
return num1 * 10;
},[ num1 ]) // 只有 num1 改变的时候，重新计算newNum的值。
return (
<div className="App">
<h1 onClick={add1}>num1：{num1}</h1>
<h1>num1 * 10 = {newNum}</h1>
</div>
);
}
export default App;
import React, { useMemo, useState, useRef} from "react";
import './App.css';
function App() {
let [items, setItems] = useState(['张三','李四','王五']);
const inputRef = useRef<any>(null);
const add = () =>{
console.log()
let value = inputRef.current.value;
if(value){
items.push(value);
setItems(Object.assign([], items));
}
}
return (
/* 用 useMemo 包裹的items可以限定当且仅当items改变的时候才更新此items，这样就可以避免items重新循环 */
<div className="App">
<input type="text" ref={inputRef}/>
<button onClick={add}> 加一个 </button>
{useMemo(() => (
<div>{
items?.map((v, i) => (
<p key={i} > {v} </p>
))}
</div>
), [items])}
</div>
);
}
export default App;
/* 只有当props中，list列表改变的时候，子组件才渲染 */
const goodListChild = useMemo(()=> <GoodList list={ props.list } /> ,[ props.list ])
