React JW

如何理解 react 组件状态？

什么是状态？

• 把状态理解成为一种“快照”

  • web 是一个状态机

• React：useState / this.setState 函数

  • 源码里，有一个 createUpdate 的函数要执行

  • shared.pending = update

  • processUpdateQueue 中去消费这个 update

• react 靠状态进行视图更新的，状态的变化 => 视图迭代到下一个状态

• 开发时：react 事件发生后，界面状态变化

如何在异步情况，批量更新？

• unstable_batchedupdates()

让某个更新优先级高一些

react 的事件创建以及合成事件方式

React 事件系统可分为三个部分

初始化注册

事件收集，注册事件

事件触发

• onClick 是 push，onClickCapture 是 unshift 处理

  • unshift() ：向数组最前方添加一个或者多个元素，并且会返回新的[数组长度]
  • push():  向数组末尾添加一个或者多个元素，并返回新的长度

• [handle2,handle1]

• [handle4,handle2,handle1,handle3]

• 冒泡到根节点执行上述数组

react 为什么要做一套自己的事件系统？

为什么 V17 版本之后，事件会放到 app 上，而不是 document 上？

• 在微前端中不好处理

什么是 HOC？以及高阶组件的传参和事件

• HOC：高阶组件
• 高阶函数就是一个将函数作为参数并且返回值也是函数的函数
• 高阶组件是以组件作为参数，返回组件的函数。返回的组件把传进去的组件进行功能强化

HOC 的分类与应用场景有哪些？

属性代理

反向继承

• 会有很多副作用

react 的 hook 的理解，它在做什么？

• 值

• useState

• useRef

• hook

• props

• 类组件都有特定的状态，但是不能复用，是面向对象的思想，会随着业务、状态和功能的增多，代码量越来越大

• 函数组件会把复杂的业务拆分成一个个的函数，做一些更加轻量的工作

• hook更新的时候会做串联的引用

Hooks 出现本质上原因是？

为什么 useAPI 前面不能加判断

useEffect 和 useLayoutEffect 的区别

• 修改 DOM ，改变布局就用 useLayoutEffect ，其他情况就用 useEffect
• 执行时机
  • useLayoutEffect
    • dom更新之后，浏览器绘制之前
    • 便于获取 dom 信息
    • 在浏览器里只会获得一次
  • useEffect
    • 异步处理

React.useEffect 回调函数 和 componentDidMount / componentDidUpdate 执行时机有什么区别 ？

你听说过 useInsertionEffect 吗？

redux 遵循的三原则

redux 中的发布订阅和中间件思想

中间件 compose 实现 编排生成的函数用以下函数来遍历

React-Redux,Redux,React 三者关系

如何理解单一事件来源