栈内存和堆内存:
- 基础类型: 直接把数据的 值 存到堆内存
- 复杂类型: 把复杂数据类型存到栈内存中 而栈内会返回一个地址 把指针地址存到 堆内存 当我们取出时则是用堆内存中的指针地址 去匹配栈内存中数据 拿出函数等
//这是父组件
function Parents() {
//通过useState声明一个变量和改变变量的方法
const [count, setCount] = useState(0)
const [x, setX] = useState(0)
// 因为 指针会无限变化 props无法拦截复杂类型 所以 子组件会胡乱更新
// const fn = () => {} //解开注释 即可使用
// 当我们用useCallback 如果第二个参数为空或依赖值没有发生变化 会缓存上一次的指针 指针没变 从内存取出的函数也就不会变
// 所以 props会认为 没有发生更新 也就不会 胡乱更新
const fn = useCallback(() => { }, [x])
// 点击count累加 并重新执行整个父组件 fn依赖没有监听到 所以会使用缓存 结果就是不会打印 '我执行了'
const onClick = () => {
setCount(count + 1)
}
// 点击x累加 并重新执行整个父组件 fn依赖监听到了 所以不会使用缓存的指针 结果就是打印 '我执行了'
//点击
const onClick2 = () => {
setX(x + 1)
}
return (
<div>
<Child fn={fn} />
<Button onClick={onClick}>点击</Button>
<Button onClick={onClick2}>点击</Button>
</div>
)
}
export default Parents
memo:
（搭配useCallback使用） 16.6版本的 第一个参数是放组件的 返回一个新组件
- 作用：防止在父组件更新时 子组件进行胡乱更新
- 原理：是判断父组件传过来的props更没更新 如果更新了 就重新渲染子组件 没更新则不渲染
- 弊端：只能判断props里的基本类型 复杂类型判断不了（劫持不了）
import React, { memo } from 'react'//引用memo方法
//这是子组件
function Child(props) {
console.log("我执行了");
return (
<div>Child</div>
)
}
export default memo(Child)
