React学习笔记(一)

[jappp]

一、React简述

View = fn(props, state, context)

1. React 是一个网页 UI 框架，通过组件化的方式解决视图层开发复用的问题，本质是一个组件化框架。
2. React核心思路有三点，分别是声明式，组件化（组件化可以降低系统间功能的耦合性，提高功能内部的聚合性）和通用性。
3. 但作为一个视图层的框架，React 的劣势也十分明显。它并没有提供完整的一揽子解决方案，在开发大型前端应用时，需要向社区寻找并整合解决方案。虽然一定程度上促进了社区的繁荣，但也为开发者在技术选型和学习适用上造成了一定的成本

二、JSX（语法糖

1. React 需要将组件转化为虚拟 DOM 树，所以我们在编写代码时，实际上是在手写一棵结构树。而XML 在树结构的描述上天生具有可读性强的优势
2. JSX 是一个 JavaScript 的语法扩展，结构类似 XML。JSX 主要用于声明 React 元素，但 React 中并不强制使用 JSX。即使使用了 JSX，也会在构建过程中，通过 Babel 插件编译为 React.createElement。所以 JSX 更像是 React.createElement 的一种语法糖。
3. React 团队并不想引入 JavaScript 本身以外的开发体系。而是希望通过合理的关注点分离保持组件开发的纯粹性
4. JSX 以外的三种技术方案进行对比：
   （1）模板：引入了模板语法、模板指令等概念，是一种不佳的实现方案
   （2）模板字符串： 模板字符串编写的结构会造成多次内部嵌套，使整个结构变得复杂，并且语法提示差
   （3）JXON：代码提示困难

三、生命周期

四、类组件和函数组件

相同点：
组件是 React 可复用的最小代码片段，它们会返回要在页面中渲染的 React 元素。无论是函数组件还是类组件，在使用方式和最终呈现效果上都是完全一致的

不同点：

1. 类组件与函数组件本质上代表了两种不同的设计思想与心智模式。它们在开发时的心智模型上却存在巨大的差异。类组件是基于面向对象编程的，它主打的是继承、生命周期等核心概念；而函数组件内核是函数式编程，主打的是 immutable、没有副作用、引用透明等特点。
2. 在使用场景上，如果存在需要使用生命周期的组件，那么主推类组件；设计模式上，如果需要使用继承，那么主推类组件。
3. 性能优化上，类组件主要依靠 shouldComponentUpdate 阻断渲染来提升性能，而函数组件依靠 React.memo 缓存渲染结果来提升性能
4. 类组件在未来时间切片与并发模式中，由于生命周期带来的复杂度，并不易于优化。而函数组件本身轻量简单，且在 Hooks 的基础上提供了比原先更细粒度的逻辑组织与复用，更能适应 React 的未来发展。

五、setState

1. setState 并非真异步，只是看上去像异步。在源码中，通过 isBatchingUpdates 来判断setState 是先存进 state 队列还是直接更新，如果值为 true 则执行异步操作，为 false 则直接更新。
2. 在 React 可以控制的地方，就为 true，比如在 React 生命周期事件和合成事件中，都会走合并操作，延迟更新的策略。但在 React 无法控制的地方，比如原生事件，具体就是在 addEventListener 、setTimeout、setInterval 等事件中，就只能同步更新。
3. 一般认为，做异步设计是为了性能优化、减少渲染次数，React 团队还补充了两点。
   (1)保持内部一致性。如果将 state 改为同步更新，那尽管 state 的更新是同步的，但是 props不是。
   (2)启用并发更新，完成异步渲染。