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