RPC 框架进阶| 青训营笔记

快醒醒鸭今天你编程了吗
40 阅读2分钟

React是什么？

React是用于构建用户界面的JavaScript库，起源于Facebook的内部项目，该公司对市场上所有 JavaScript MVC框架都不满意，决定自行开发一套，用于架设Instagram的网站。于2013年5月开源。

React特点

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

React哲学（Thinking In React）

React是用JavaScript构建快速响应的大型Web应用程序的首选方式之一。

image.png

React _Lazy & Suspense

image.png

等待资源加载时间和大部分情况下浏览器单线程执行是影响性能的两大主要原因。

React _ErrorBoundary

例子如下，首先引入了一个完全不存在的文件，会出现下面这个情况，“抱歉出现错误”

image.png

React _更新流程

image.png

image.png

总结 _优缺点

优点：

  • 快速响应：Fiber
  • 组件化：复用性强
  • 声明式编程
  • 跨平台：只需要修改渲染器 缺点：
  • 大型应用需要配套学习，状态管理、路由工具
  • 不适合小型应用，需要用babel处理

用React开发web应用

以下就是React开发web的流程： image.png

image.png

组件

Class组件

  • 继承 + 构造函数
  • this
  • 生命周期
  • render方法

image.png 函数式组件

  • 没有生命周期
  • 借助Hook
  • return JSX

image.png 函数式相对于Class的优点和组件和HOOK的关系

image.png

HOOK规则 & 原理

image.png

image.png

只能在React函数中调用HOOK

  • 在React函数中调用HOOK
  • 自定义HOOK必须以use开头
  • HOOK中的state是完全隔离的

image.png

HOOK过期闭包问题

image.png

image.png

React常见API及作用

image.png

image.png

组件间共享信息_context & reducer

image.png

组件间共享信息_react-redux

image.png

如何进行逻辑复用_useRequest分析

image.png

课程总结

今天学习了React的一些基本的知识，如React优化资源加载和快速响应，异常处理，HOOK规则等知识，对今后学习React有一定的认知。下面是老师总结的：

image.png

avatar
文章
阅读
粉丝