React特性与简介
React——用于构建用户界面的JavaScript库
特点
使用 JSX 语法
创建组件，实现组件化开发
性能高
通过 diff 算法 和 虚拟 DOM 实现视图的高效更新。
由 Facebook 专门的团队维护，技术支持可靠。
特性
声明式
高效性
组件化
跨平台编写
优点
· 快速响应的Fiber
· 复用性强
· 声明式编程
· 可跨平台编写：只需修改渲染器
缺点
· 大型应用需要配套学习 状态管理、路由工具
· 不适合小型应用，需要用babel处理
React基础
用React开发web应用
· 架构——打包配置：JSX->babel->JS，加载优化，错误降级。
· 路由：向应用中快速地添加视图和数据流，保持页面与URL之间的同步。
· UI：可复用UI->组件->页面，可复用逻辑抽离成hook。
· 状态：多页面多组件共享信息，redux&context
用React开发web应用——组件
· 数据：通过定义state操作视图，Mount时获取数据更新state，Ref保存与视图无直接关系的值，unMount前清空Ref。
· 通信：props父子组件通信，redux & context组件信息共享。
· UI：数据决定视图，通过Ref获取DOM。
· 性能：函数使用uesCallback，值或者计算使用useMemo，组件包裹memo。
组件
Class组件
· 继承+构造函数
· this
· 生命周期
· render方法
函数式组件
· 没有生命周期
· 借助Hook
· return JSX
函数式相较于Class的优点
· 代码量骤减，组件干净清爽
· 没有复杂的生命周期
· 支持自定义Hook，逻辑复用方便
组件和hook的关系
· UI被拆分多个独立单元，一个独立单元就是一个组件。
· hook贴近组件内部运行的各种概念逻辑，如effect、state等
Hook的规则与原理
· 只能在最顶层使用Hook，React靠Hook调用的顺序确定state与useState之间的对应关系。
· 只能在React函数中调用Hook。在React函数组件中或自定义Hook中调用，自定义Hook必须以use开头。
· Hook中的state是完全隔离的。
总结
通过react组件具体的使用与优化，可以看到这个工具是十分好用，灵活性也非常高，熟练运用有利于提高技术水平，有利于参与潜力大的项目，有利于求职和晋升。
