react
简介
react文档说react是一个渲染用户界面的库，是以组件化的方式来解决视图层复用的问题，本质上是一个组件开发框架；其核心分别为声明式、组件化和通用性；声明式的优势在于直观和组合，组件化能更好的实现视图的拆分和复用，更容易实现高内聚，低耦合；通过虚拟dom，react实现了一次学习，随处编写，利用react-dom和react-native能够实现跨平台开发；但作为一个专注于视图层的框架，react并没有提供完整的解决方案，在构建大型项目时需要利用社区提供的解决方案，带来了一定的学习成本。
react与jsx
jsx是js的扩展语法，在react中jsx是createElement的语法糖，通过babel进行转译。相比于jsx，模板语法会引入许多概念和模板语法，也不是一个好的代码结构，不利于后期的组件维护
类组件和函数组件的区别
在函数组件能够使用hooks的情况下，两者的使用方式和表达效果都能达到一致，但两者在设计模式上有着明显的区别，类组件是面向对象开发的，函数组件是面向函数式编程；类组件可以实现继承，函数组件没有继承能力；在性能优化方面，类组件依靠shouldComponentUpdate来阻断更新来实现性能优化，而函数组件依靠React.memo方法来实现性能优化；在发展趋势上react更推崇使用函数式组件，hooks提供了复用组件状态逻辑的能力，业务逻辑也不用分散于各个生命周期中。
生命周期相关
生命周期渲染流程
在组件挂载阶段首先执行的是construct该方法并非是生命周期方法，执行类组件的一些初始化操作，第二个是getDerivedStateFromProps，该方法返回一个对象来更新state返回null则不做任何处理，第三个是render方法，返回用于渲染的数据类型，render必须是纯函数，否则会导致死循环，最后是componentDidMount，该方法会在组件挂载后立即调用适合做实例化请求；当父组件传入新的props或setState方法以及forceUpdate方法执行时，第一个是UNSAFE_componentWillReciveProps,该方法是之前在props更新时，不进行额外render并修改state的唯一方法，该方法被被getDerivedStateFromProps替代且getDerivedStateFromProps方法存在时，该该方法不会执行；第二个就是getDerivedStateFromProps，第三个是shouldComponentUpdate,该方法是类组件进行性能优化的方法之一，第四个是UNSAFE_componentWillUpdate，在组件更新前触发；第四个是render方法；第五个是getSnapshotBeforeUpdate方法在最近一次渲染输出到DOM节点之前调用。它使得组件能在发生更改之前从DOM中捕获一些信息，此生命周期方法的任何返回值将作为参数传递给 componentDidUpdate()；第六个方法是componentDidUpdate，在组件更新后会被立即调用；在组件卸载阶段会执行componentWillUnMount，在这个生命周期里需要清理timmer和卸载绑定的事件
错误边界
为防止React错误导致的白屏，通过getDerivedStateFromProps来捕获错误，使用componentDidCatch来打印错误并渲染备用UI
生命周期中的易错点
- 业务逻辑未选择合适的生命周期函数，render中修改状态和注册事件
- 未使用该使用的生命周期，组件卸载未使用componentWillUnMount清理timer和注册的事件
- 没有错误边界导致白屏
组件通讯
- 父子 props
- 子父 回调函数
- 兄弟节点 利用父组件进行中转
- 无直接关系节点 context window 事件 redux mobx
setState是同步更新还是异步更新
setState并非是异步，只是看上去像异步，在源代码中通过isBatchUpdates来判断setState是先存进队列还是直接执行，在合成事件和生命周期函数中isBatchUpdates是true，所以setState看起来是异步的，在原生事件和定时器中isBatchUpdates为false，所以是同步的，setState之所以设计为异步是为了保持内部代码的一致性，同时为并发更新做准备
性能判断个性能优化
性能判断
- chorme 调试的 Performance
- react的Profiler组件
- react-devtools插件