React基础与实践|青训营笔记

React特性与简介

React——用于构建用户界面的JavaScript库

特性

• 声明式
• 组件化
• 跨平台编写

优点

• 快速响应：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的规则与原理

• 只能在最顶层使用Hook，React靠Hook调用的顺序确定state与useState之间的对应关系。
• 只能在React函数中调用Hook。在React函数组件中或自定义Hook中调用，自定义Hook必须以use开头，Hook中的state是完全隔离的。

个人心得体会

老师后面通过举出一些实例讲述react组件具体的使用与优化，我们可以直观地看到这个工具是十分好用，灵活性也非常高，熟练运用一定可以给自己项目的前端的开发添砖加瓦。