前端训练营 React基础与实践

Yehong
210 阅读1分钟

React特性与简介

特点：声明式，组件化，跨平台编写

image.png 上手成本大，需要学习较多配套知识

用 JavaScript 构建 快速响应 的 大型 Web 应用程序

解决等待资源加载

react.lazy 和 react.suspense image.png

ErrorBoundary↓

image.png image.png

react:FIBER

js加载会阻塞浏览器渲染； 空闲时间调用虚拟DOM，通过虚拟DOM树生成真实DOM

image.png

构建fiber数再交给渲染器，保证不会只渲染一半

image.png

构建 workInProgress Tree，然后覆盖 current tree完成更新；双缓存结构，递归遍历

React基础

image.png

组件堆铸页面，用class or function 组件

组件

image.png

声明式编程：数据决定视图；全局通信要用到context & redux

image.png

生命周期

作为组件使用必须要render方法 image.png

class & function compare

image.png 现在推荐 函数式组件+hook

HOOK

image.png

image.png

image.png

常见API及作用

image.png

常见HOOK及作用

image.png

具体案例

通过三维度分解页面

layout布局 image.png page页面 image.png component组件 image.png

1，相同动画

父组件跟子组件

image.png

image.png

image.png

image.png

组件间共享

image.png

image.png

image.png

image.png

image.png

组件性能优化

image.png

image.png

image.png 代码

image.png

挂载位置

image.png

image.png

image.png

image.png

image.png

逻辑复用

image.png

image.png

image.png

avatar
文章
阅读
粉丝