react面试2

纯函数 + 不可变值

 

JSX的本质等同vue的模板

createElement 等同 h 函数

第一个参数可能是组件 也可能是 tag，根据首字母大小写来区分是否是组件

第二个参数是 null 或者 { }

 

合成事件

 

为什么要这样使用？

更好的兼容性和跨平台，尽量摆脱了DOM事件的逻辑，然后自己去实现一套

逻辑。例如可以移植到 移动端上

挂载到root 上，减少内存消耗，避免频繁解绑

方便事件的统一管理（如事务机制）

 

react的patch被拆分为2个阶段

reconciliation 阶段 执行diff算法，纯JS计算

commit阶段，将diff结果渲染到DOM

 

JS是单线程，且和DOM渲染共用一个线程

当组件复杂时，组件更新时计算和渲染都压力大

如果同时在有DOM操作，比如动画将比较卡顿

 

解决方案 fiber

1.将reconciliation阶段进行任务拆分(commit 无法拆分，因为是DOM渲染无法拆分)

2.如果DOM需要渲染时暂停，空闲时恢复

window.requestIdleCallback 在空闲时被调用。  知道DOM需要渲染

如果不支持这个API 那么就是原来的逻辑

 

react性能优化

1.增加 key

2.自定义事件，DOM销毁

3.合理使用异步组件

4.减少函数 bind 次数

5.合理使用 SCU Pure 和 memo

6.合理使用 不可变库

7.使用SSR

 

前端通用优化，如 图片懒加载 / webpack优化

 

react和vue的区别

都支持组件化 / 数据修改视图 / 使用diff算法，操作vdom

react使用JSX拥抱JS，vue使用模板 拥抱html

对于修改数据时候：react是函数编程， vue是声明是编程

react需要 自力更生，vue 很多已有功能

 

 

class组件问题

1.不易拆分和重构 测试，不容易复用逻辑

2.相同业务逻辑比较分散

 

自定义 hook：解耦代码，独立封装功能（是一个个函数）

只能用于 函数组件和 自定义 hook中

只能用于顶层代码，不能在 if 和 for中，因为函数组件执行完了，就销毁了，重新渲染之后

函数会重新执行，这和 class 不一样 有 new 出来的实例

re-render的时候 会读取 state的值，严格按照这个顺序来读取值的

useEffect中的函数 也是一样，re-render的时候

 

注意事项

useState 初始化值只有 第一次 有效

useEffect内部不能修改 state， 没有依赖每次都会执行

依赖为空的话，re-reder不会重新执行 useEffect，只会执行一次

useEffect可能出现死循环

当依赖中有 数据 对象这种引用类型 就有可能出现这种问题

一般是 传入的 每次都会改变了的值 Object.is() 来判断传入值的相等

 

函数更加容易拆分，测试更加灵活

view = fn(props)

函数组件，执行完即销毁，无法 存储 state

 

useReducer是单组件状态管理，组件通讯还是要使用 redux

只是借鉴了 redux的思想