import React, { useState, useMemo, memo, useCallback } from "react";
// useMemo的写法与useState相同,但是调用时机不同,useState执行的是副作用,在组件渲染完成后执行,useMemo参与渲染,是在渲染的时候执行
const Foo = memo(function Foo(props) {
// 配合memo使用
console.log("Foo render");
return <h1 onClick={props.goClick}>{props.count}</h1>;
});
// hooks组件
function App() {
const [count, setCount] = useState(0); // useState 默认值 0 返回一个数组,第一个是变量,第二个修改变量的方法
const [num, setNum] = useState(0);
const double = useMemo(() => {
return count * 2;
}, [count === 3]); //[]为计算的条件,条件越精确,计算就越少
// 第一种传递函数,未经优化处理直接渲染
// const goClick = () => {
// console.log('====================================');
// console.log('Foo render');
// console.log('====================================');
// }
// 第二种通过useMemo传递函数, 优化渲染性能
// const goClick = useMemo( () => {
// return () => {
// console.log('====================================');
// console.log('goClick render');
// console.log('====================================');
// }
// },[])
// 第三种通过useCallback函数,优化渲染性能,useCallback(()=>{},[]) 等价于 useMemo(()=>{return fn},[]),前提条件是useMemo返回的是一个函数才等价于useCallback
// 不依赖变量
// const goClick = useCallback(()=>{
// console.log('====================================');
// console.log('goClick render');
// console.log('====================================');
// }, [])
// 依赖变量的
// const goClick = useCallback(() => {
// console.log('====================================');
// console.log('goClick render');
// console.log('====================================');
// setNum(num+1)
// }, [num])
// 省略依赖变量的
const goClick = useCallback(() => {
console.log("====================================");
console.log("goClick render");
console.log("====================================");
setNum(num => num + 1); // 默认参数是 num
}, []);
return (
<div>
<button
onClick={() => {
setCount(count + 1);
}}
>
点击{double}
</button>
<Foo count={double} goClick={goClick}></Foo>
</div>
);
}
export default App;