React 学习
2022-10-01 本文已影响0人
行走的蛋白质
1. React 是什么 ？
- React 是一个网页 UI 框架，通过组件化的方式解决视图层开发复用的问题，本质是一个组件化框架。
- 它的核心设计思路有三点，分别是声明式、组件化与通用性。
- 声明式的优势在于直观与组合。
- 组件化的优势在于视图的拆分与模块复用，可以更容易做到高内聚低耦合。
- 通用性在于一次学习，随处编写。比如 React Native、React 360 等，这里主要靠虚拟 DOM 来保证实现。
- 这使得 React 的应用范围变得足够广，无论是 Web、Native、VR，甚至 Shell 应用都可以进行开发，这也是 React 的优势。
- 但作为一个视图层的框架，React 的劣势也同样明显。它并没有提供一揽子的解决方案，在开发大型前端应用时，需要向社区寻找并整合解决方案。虽然在一定程度上促进了社区的繁荣，也为开发者在技术选型和学习适用上造成了一定的成本。
2. 为什么 React 要用 JSX ？
- 什么是 JSX：它是一个 Javascript 的语法拓展，结构类似于 XML，它主要用于声明 React 元素，在 React 中并不强制使用 JSX，使用 JSX 会在编译用通过 babel 插件转译为 React.createElement，所以 JSX 更像是 React.createElement 的一个语法糖，所以可以看出 React 团队并不想引入 Javascript 以外的语法体系。
- 引入其它的模板或者模板字符串等会造成像 Angular 一样的复杂的学习成本，结构描述变得复杂而且语法提示较差。
3. bable 插件如何实现 JSX 到 JS 的编译 ？
- babel 读取代码并解析生成 AST 语法树，然后再转换成 React.createElement 函数。
4. 类组件与函数组件的区别 ？
- 共同点：实际用途一样，都可以用作基础组件来展示 UI。
- 不同点：
- 相较于类组件，函数组件更纯粹、简单、易测试。
- 类组件通过生命周期来包装业务逻辑，函数组件提供新的开发模式让组件渲染与业务逻辑分离。
- 类组件可以继承，函数组件缺少继承的能力，组合优于继承的思想，可以让我们的代码高内聚低耦合。
- 类组件依靠 shouldComponentUpdate 函数来阻断渲染，函数组件一般来依靠 React.meomo 来进行优化，它会返回一个类似于类组件 PureComponent 的纯组件，它会将组件现在的 state 和 props 和其下一个 state 和 props 进行浅比较，如果它们的值没有变化，就不会进行更新。
5. 合成事件的问题 ？
- React 合成事件是 React 模拟原生 DOM 事件所有能力的一个事件对象。
- 合成事件的优点：
- 浏览器兼容，实现更好的跨平台：顶层事件代理机制，保证冒泡一致性，可以跨浏览器执行。将不同平台事件模拟成合成事件。
- 避免垃圾回收：React引入事件池，在事件池中获取或释放事件对象；React事件对象不会被释放掉，而是存入一个数组中；当事件触发，就从这个数组中弹出，避免频繁地创建和销毁（垃圾回收）。
- 方便事件统一管理和事务机制
- React 事件和原生事件执行顺序：
- 在React 中，“合成事件” 会以事件委托的方式绑定到组件最上层，并在组件卸载阶段自动销毁绑定的事件。
- React 所有事件都挂载在 document 对象上；React 17 后将事件监听放到了 ReactDom.render 所调用的节点上。
- 当真实 DOM 元素触发事件，会冒泡到 document 对象后，React 找到对应的组件造出一个合成事件出来，并按组件树模拟一遍事件冒泡，再处理 React 事件；
- 所以会先执行原生事件，然后处理 React 事件；
- 最后真正执行 document 上挂载的事件。
6. setState 同异步的问题 ？
- setState 用于变更状态、触发组件渲染、更新视图 UI。
- 通常情况下是异步的，在 React 生命周期函数和合成事件中是异步的。addEventListener、setTimeout 等中是同步更新的。
- 它不是真正的异步处理函数而是通过队列延迟操作来模拟实现的，内部根据 isBatchingUpdates 来控制更新时机，是先存进队列还是直接更新。
- 异步处理的原因：
- 保持内部的一致性，props 也是异步的；为后续的架构升级启用并发更新，React 内部可以根据不同的数据来源启用不同的优先级，比如一般的事件以及动画效果等，主要用于提升性能。
- 为了优化，通过异步的操作方式累计更新后批量合并处理减少渲染次数，提升性能。
7. React 组件间如何跨层级通讯 ？
- 父子组件通讯：props、回调函数
- 兄弟组件通讯：通过父组件进行中转
- 无直接关系组件通讯：
- 通过 Context 进行通讯，通过 i18n，首先 React.createContext 创建 Context，通过高阶组件封装消费者的逻辑来减少代码。。。（不太理解）
- 不太推荐的全局变量，主要用于临时存储的变量；注意修改 window 上的变量并不会引起 React 组件的重新渲染。
- 不太推荐的全局事件，需要触发和接收双方都同时存在于页面上，而且需要在组件加载的时候进行事件绑定组件卸载的时候进行事件移除。
- 浏览器缓存存储等。
- 常见的状态管理框架：redux、flux、mobx 等。
- 层级较深的向下传递 props 较为麻烦采用 Provider、Consumer。
