react状态管理|青训营笔记

hook怎么使用呢？ hook的规则 和 原理 react怎么知道哪个state 对应哪个 usestate？ 答案： react 靠的是hook 调用的顺序。

注意！！ 只能在react函数中调用hook

• 在react函数组件中或自定义hook中调用；
• 自定义hook必须以use开头；
• hook中的state是完全隔离的；

注意！ hook过期闭包问题：

怎么产生的呢？ 在js中，函数运行的上下文是由定义的位置决定的，当函数的闭包包住了旧的变量值时，就出现了过期闭包问题。

一些常见的api和作用：

react.component : 类组件基类 extends
react.purComponnet: 未实现 shouldComponentUpdate(),内置了props和state渐层对比.
react.memo 高阶组件，仅比较props变更

如何划分组件？ 1：layout

• navbar
• main content
• footer
• floating button

2：page

• banner
• cardGroup
• slider group
• help docs
• footer banner

3：component

• BlockHeader
• BlockWrapper
• SlideButton
• SizeText
• AnimationWrapper

父组件如何给子组件通信呢？

知道子组件的表现，直接通过props传递即可 具体的子组件通过什么来表现呢？ 答案：props.children

子组件如何给父组件通信呢？

传递信息~ 比如对象文本：通过callback

组件间共享信息 context和reducer

步骤：

• set loginUser

• get loginUser

• 传递context

• 定义reducer

如果state.name发生变化会导致什么？

1. 重新渲染Wrapper；
2. 重新渲染counter；
3. 重新渲染calcValue；

可以优化的方向有哪些？ 1：count不变的场景下，counter不重新渲染 2：count不变的场景下，不重新计算calValue

组件挂载位置 冒泡

如果通过createPotral 改变了组件的真实渲染位置，那么点击blue按钮 会发生冒泡，会冒泡到蓝色容器；

一个从potral内部触发的事件会一直冒泡至包含react树的祖先，即便这些元素并不是dom树中的祖先。

什么是状态管理？ 就是解决这种‘嵌套’地狱的问题，解决的是跨层级组件之间的数据通信和状态共享。

管理工具的本质就是： 管理共享内存中的状态

1. 共享内存
2. 管理状态
3. 页面通信
4. 组件通信
5. 刷新失效

单页应用的各个组件本身是共享内存的，如果状态保存在内存中，就可以读写统一内存中的变量，从而达到状态共享的目的。