hooks 中在也不需要this的概念了，并且必须放到函数组件内部最外层 最上面
引入 useMemo 和 useCallback
import React, { useMemo, useCallback } from "react";
useMemo
先看一个例子：
useMemo(() => {
return count;
},[count]);
useMemo(params) 设置 第一个参数是函数
count是第二个参数 是 追踪变化的值
正常情况下 只要在当前组件组件 数据状态发生变化 当前的内部所有的逻辑 都会重新计算 并且 render一遍
比如:
const [value,setValue] = useState(''");
const [value2,setValue2] = useState(''");
const handleChange = (e) => {
setValue（e.target.value）
}
const c= () => {
return 456;
}
<div>{c()} </div>
<input type="text" value={value} onChange={(e) => handleChange(e)} />
<button onClick={() => setValue2(math.random())}></button>
一般setValue和setValue2 只要有一方点击 c函数 都会执行
这样就浪费了性能 我们只想在input值改变的时候 执行c函数 所以我们可以使用useMemo
hook
const [value,setValue] = useState(''");
const [value2,setValue2] = useState(''");
const handleChange = (e) => {
setValue（e.target.value）
}
const c= useMemo （() => {
return 456;
}，[value]）
<div>{c()} </div>
<input type="text" value={value} onChange={(e) => handleChange(e)} />
<button onClick={() => setValue2(math.random())}></button>
这样 是有value值改变的时候 才会执行 c函数
useCallback
useMemo和useCallback 唯一区别是
useMemo 是 内部返回的是一个值
useCallback 是 内部返回的是一个当前函数
例如:
useMemo(() => {
return '2'
})
useMemo 返回的是 2；
useCallback 返回的是 () => {
return '2'
}
所以一般时候 useCallback 可以当做是class组件的shouldComponentUpdate
以下是我的demo
父组件
子组件
有写错的地方，欢迎指正，不胜感激！
笔者QQ群：148042812
