react 开发技术提领

最新推荐文章于 2024-07-15 16:32:36 发布
最新推荐文章于 2024-07-15 16:32:36 发布
阅读量344 收藏
点赞数
分类专栏： 前端 react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32719215/article/details/100541331
版权
1、背景及特性
UI问题 ----组件处理

传统是局部刷新处理，react整体进行刷新，不管数据具体是那个发生变化，只关心发生变化与否

1个概念4api 单项数据流 完善的错误提示

数据模型问题

针对传统mvc 提出flux架构：单项数据流
在这里插入图片描述

基于衍生出 redux 和 Mobx 状态管理框架

2、组件方式考虑UI的构建

传统模式的是html+js 数据 +form
在这里插入图片描述
react 方式 commentBox + CommentList + CommentForm

c02 CommentBox

https://codesandbox.io/s/6n20nrzlxz

创建一个简单的组件步骤
  1. 创建静态UI ->原生Html标签
  2. 考虑组件的状态组成 ->状态来自外部还是需要内部维护
  3. 考虑组件的交互方式-> 组件内部进行的一些操作如何暴露给外部使用
创建组件的原则：

  • 单一职责原则

    1. 每个组件只做一件事
    2. 如果组件变得复杂，那么应该拆分成小组件

  • 数据状态管理原则 ：DRY原则

    1. 能计算得到的状态就不要单独存储
    2. 组件尽量无状态，所需数据通过props获取
3、JSX的本质

jsx本质是动态创建组件的语法糖

优点：声明式创建界面的直观 代码动态创建界面的灵活 无需学习新的模板语言

4、react组件的生命周期及其使用场景
  • constructor
    1. 用于初始化内部状态，很少使用
    2. 唯一可以直接修改state的地方

  • getDerivedStateFromProps

    1. 典型场景：表单控件获取默认值
    2. 每次render都会调用，尽量不要使用

  • componentDidMount

    1. ui渲染完成后调用
    2. 只执行一次
    3. 典型场景：获取外部资源,页面初始化

  • componentWillUnmount

    1. 组件移除时调用
    2. 典型场景：资源释放

  • getSnapshotBeforeUpdate

    1. 在页面render之前调用，state已更新
    2. 典型场景：获取render之前的DOM状态

  • componentDidUpdate

    1. 每次UI更新时被调用
    2. 典型场景：页面需要根据props变化重新获取数据，获取分页页面切换后的数据

  • shouldComponentUpdate

    1. 决定virtual DOM 是否要重绘
    2. 一般可以由PureComponent自动实现，自动判断 当前props和state与之前的props和state是否发生变化，如果没有变化自动阻止更新
    3. 典型场景：性能优化
5、virtual DOM 及key 属性作用

  • diff

    广度优先分层比较

  • 虚拟DOM的两个假设

    1. 组件的DOM节点是相对稳定的
    2. 类型相同的兄弟节点可以被唯一标识

    https://supnate.github.io/react-dom-diff/index.html 可一看到dom节点被更新卸载

整体删除节点，在添加创建节点

6、高阶组件和函数作为子组件

  • 组件复用两种形式：高阶组件和函数作为子组件

    https://codesandbox.io/s/react-geek-time-cjyp8 c06

函数作为子组件关键是 props.children()的使用 显示按钮下对应图片、颜色块

https://www.bilibili.com/video/av37159071/?p=12

7、context API及其使用场景

context api 解决组件通信问题，redux 重度依赖它

8、脚手架工具创建项目
  1. react React App,rekit
    在这里插入图片描述
    2.Condesandbox 在线前端开发工具ide
9、打包注意事项
  1. 设置nodejs环境为 production
  2. 禁用开发时的专用代码，比如 logger
  3. 设置应用根路径
10、状态管理

状态管理框架redux

redux 让组件的通信更加容易，

redux特性：

  1. Single Source of Truth
  2. 可预测性：state + action = new state
  3. 纯函数更新store —reducer
11、深入理解store,Action,reducer
  • store
    • getState()
    • dispatch(action)
    • subscribe(listener)
react中redux使用组件

combineReducer

bindActionCreators({type:’’,palyload:’’},store.dispatch)

connect组件

​ store绑定到组件的state应该更加精细，需要哪些绑定那些，否则其他参数的变化会导致组件的无效更新渲染

理解异步action 、redux中间件
在这里插入图片描述
异步action不是真正的action而是几个同步action的组合的使用

中间件在dispatch中截获action做特殊处理

如何组织action和reducer
  1. 所有action放在一个文件，会无线扩展
  2. action / reducer 分开，实现业务逻辑时需要来回切换
  3. 系统中有哪些Action不够直观

新的方式：

单个action和reducer放在同一个文件内
在这里插入图片描述
优点：

  • 易于开发：不用在action和reducer之间来回切换
  • 易于维护：每个action文件都很小，容易理解
  • 易于测试：每个业务逻辑只需对应一个测试文件
  • 易于理解：文件名就是action名字，文件列表就是action的列表
不可变数据

原因：性能优化 易于调试和追踪 易于推测

判断引用是否相等来判断store有没有发生变化，通过引用比较

如何操作不可编数据
  1. 原生写法：{…},Object.assign 性能最高的写法，es6的原生写法，大部分情况都可以使用这种
    在这里插入图片描述
  2. immutability-helper 主要用于层次比较深的节点更新，复杂场景更新的节点比较深
    在这里插入图片描述
  3. immer 性能不如前两种，写法上就像是修改原来的state一样。为state的属性创建代理实现，在应用程序比较小的，节点不多时，性能还行
    在这里插入图片描述
12、react router路由不只是页面切换，更是代码组织【代码分割的一种】
  1. 为什么需要路由
    • 单页应用需要进行页面切换
    • 通过URL可以定位到页面
    • 更有语义的组织资源

路由是一个后端的概念
在这里插入图片描述
在这里插入图片描述
特性：声明式路由定义 动态路由

三种路由实现方式：

  1. url路径 标准的URL路径

  2. hash路由 不是通过斜杠/方式，而是通过#方式

    与url的区别：大部分情况都可以使用url方式进行路由，如果支持一些低版本浏览器时，用斜杠方式浏览器会页面不刷新，这时就需要使用hash路由【HashRouter】

  3. 内存路由【MemoryRouter】，路由不会反应到url上，服务器段渲染时会用但是前端也可以用

    import {MemoryRouter} from 'react-router'

在这里插入图片描述
基于路由配置进行资源组织

  1. 实现业务逻辑的松耦合
  2. 易于扩展重构和维护
  3. 路由层面实现 lazy load

react router 核心api

1.<Link> :普通链接，不会触发浏览器刷新
	<Link to="/about"></Link>
2.<NavLink>:类似link但是会添加一个当前选中状态
	<Link to="/about" activeClassName="selected"></Link>
3.<Prompt>:满足条件时提示用户是否离开当前页面
	<Prompt when={formIsHalfFilledOut}
			message="Are you sure you want to leave"/> 
   场景：用户切换页面的确认操作，当用户正在填写一个表单，这时用户点了一个链接，其实用户还没有填完，这时就要提醒用户是否真实要离开当前页面，使用此标签进行提示。
4.<Redirect>:重定向当前页面，例如登录时
   <Route exact path='/' render={()=>(
   	loggedIn ? (
   		<Redirect to='/dashboard'>
   	):(
   		<PublicHomePage>
   	)
   )>
5.<Route>:路由配置的核心标记，路径匹配时显示对应组件
	关键字 exact 代表是否精确匹配路径
	匹配多个路由，多个组件都会显示，
	场景：列表界面，点击删除按钮，在原界面上层显示弹出删除提示框
6.<Switch>:只显示第一个匹配的路由
	只会匹配第一个符合的路径。
参数定义，嵌套路由的使用场景
通过url 传递参数
1.如何通过url 传递参数：<Route path="/topic/:id">
	何时需要URL传参：页面状态尽量通过Url参数定义
 
2.如何获取参数： this.props.match.params
3.https://github.com/pillarjs/path-to-regexp
嵌套路由

  1. 每个react组件都可以是路由容器

  2. React Router的声明式语法可以方便的定义嵌套路由

    相对路径必须一致

13、UI组件库对比和介绍

​ ant Design,Material UI, Semantic UI

  • ant Design 服务于企业级产品的设计体系 https://ant.design/docs/react/introduce-cn

  • Material UI 主要在于UI设计风格更为花哨，时尚，面向最终消费者使用，

    提供更好看的支持 https://material-ui.com/zh/

  • Semantic UI 把UI作为language 描述，定义了很多样式class来描述uI https://semantic-ui.com/introduction/getting-started.html

选择UI库的考虑因素
  1. 组件库是否齐全
  2. 样式风格是否符合业务需求
  3. API 设计是否便携和灵活
  4. 技术支持是否完善
  5. 开发是否活跃
14、Jest /Enzyme等工具进行单元测试

react让前端测试变得容易

  1. react应用很少需要访问浏览器api
  2. 虚拟DOM可以在Nodejs环境运行和测试
  3. Redux隔离了状态管理，纯数据层单元测试

单元测试涉及的工具

  • Jest:Facebook开源的js单元测试框架
  • JS DOM：浏览器环境的NodeJS模拟环境
  • Enzyme: React 组件渲染和测试
  • nock：模拟Http请求
  • sinon：函数模拟和调试追踪
  • Istanbul ：单元测试覆盖率
15、开发调试工具

ESLint/prettier/React DevTool/Redux DevTool

16、前端项目的理想架构

可维护 可扩展 可测试 易开发 易构建
在这里插入图片描述
五个方面相互制约协调

  • 易开发

    1. 开发工具是否完善
    2. 生态圈是否繁荣
    3. 社区是否活跃

  • 易于扩展

    1. 增加新功能是否容易
    2. 新功能是否显著增加系统复杂度

  • 易于维护

    1. 代码是否容易理解
    2. 文档是否健全

  • 易于测试

    1. ​ 功能的分层是否清晰
    2. 副作用少
    3. 尽量使用纯函数

  • 易于构建

    1. 使用通用的技术和架构，打包通常使用webpack

    2. 构建工具的选择

17、拆分复杂度
按领域模型（feature）组织代码，降低耦合度

功能技术上进行拆分，将业务逻辑拆分为高内聚低耦合的模块
在这里插入图片描述

如何组织Component、action和reducer

文件夹结构

  • 按feature组织源文件
  • 组件和样式文件同一级
  • redux单独文件夹
  • 单元测试保持同样的结构目录放在tests文件夹

样式文件进行单独的打包流程

常量放在自己的每个feature中

使用 root loader加载feature下的各个资源

如何组织react router的路由配置

在这里插入图片描述
使用json定义顶层路由。

  • 每个feature都有自己的专属配置
  • 顶层路由使用json配置更容易理解和维护
  • 如何解析json配置到React Router语法

路由取值 this.props.match.params.id

页面跳转是在组件加载完成后进行，

handleClose = () => {

​ this.props.history.goBack();

};

通过 this.props.form.getFieldValue(“job”) 获取form 的元素值

18、开发列表要考虑的技术要点

  1. 如何翻页

  2. 如何进行内容搜索

    当前页面前端搜索，服务器端的后端搜索

  3. 如何缓存数据

    当从详细页面返回列表页面时可能不需要刷新

  4. 何时进行页面刷新

    对缓存的刷新，

    列表页的某些数据，进行了修改，那么当我们再次返回到这个列表页面时这时候我们就要进行页面的刷新，就是对缓存的刷新

    前端store的模型设计

在这里插入图片描述
在这里插入图片描述

	const byId = {};// 存储id:object map映射
    const items = []; // 存储id
    action.data.items.forEach(item => {
       items.push(item.id);
        byId[item.id] = item;
    });
    这种扁平的数据结构，也是redux比较推荐的方式，有利于后续计算和性能的优化

在这里插入图片描述
​ 为列表的store设计存储模型，组件页面设计路由及将页面所需的参数放在url中，这样url可以直接访问

数据缓存在store中，在数据发生变化是进行更新Item及byID

缓存更新，加载状态，错误处理

在这里插入图片描述
这里页面列表使用缓存思路为：

在页面加载时更新store,当点击列表中某一条查看详情，在返回时，这时候可以使用store缓存，将刚才列表页的数据从store中取出来，不需要重新冲后台再次请求获取数据，需要做的事就是判断什么情况下才允许进行后台获取数据更新store。

列表中的数据对象可以包含详情页面的所有数据，这时可以使用缓存，但同时在详情页面也必须提供能够自己获取数据的能力，页面刷新时读取数据或直接通过链接进入详情页时

页面数据来源多个请求的处理

在这里插入图片描述
按照是否存在数据添加loading
在这里插入图片描述
在一个action 中同时派发连个dispatch和同时执行两个后台调用

19、常见页面布局
  1. 从0开始用css实现
  2. 使用css grid系统
  3. 使用组件库例如antd
20、集成第三方js库

​ 集成第三方js库技术要点

  1. 使用ref获取原生DOM节点引用
  2. 手动将组件状态更新到DOM节点
  3. 组件销毁时移除原生节点DOM事件
21、使用react实现拖放的技术要点
  1. 如何使用react的鼠标事件系统
  2. 如何判断拖放开始和结束 利用MounseDown和MounseUp
  3. 如何实现拖放元素的位置移动
  4. 拖放状态在组件中如何维护

react 有一个库react-beautiful-dnd

22、性能是第一需求：时刻考虑性能问题
如何避免应用出现性能问题
  1. 了解常见的性能问题常见
    • 键盘输入时觉得明显卡顿 ：输入框输入字符是每次更新时卡顿
    • 鼠标移动或者滚动页面时卡顿：鼠标移动时侧边栏跟着动，这时处理使用一个debounds,d当鼠标不在移动这时调整侧边栏位置。
  2. 时刻注意代码的潜在性能问题
    • 注意什么时候拆分组件及代码的优化空间，拆分粒度是否够细，粒度越细组件优化空间越大，组件细了之后，组件可以优化为纯组件，那它下面的DOM节点可以作为一个整体 看待，当这些DOM节点对应的组件的状态没有变的时候，这些细的组件就不需要参与到虚拟DOM的diff操作中，因此性能更高
  3. 注重重构的代码
    • 代码的耦合性必须非常低，模块之前相对独立
  4. 了解如何使用工具定位性能问题
    • 定位性能问题产生的原因利用工具 react-devTool Chrome提供的DevTool调试性能问题及内存问题
网络性能优化：自动化按需加载

动态加载模块

利用webpack打包工具可以很容易实现自动化按需加载这个功能，利用webpack提供的api

  • 如何在react中实现按需加载

    1. 什么是按需加载

      当切换到某个页面时，这个页面的内容所需的东西才会加载出来，而不是在应用一开始就加载了。

    2. 使用Webpack的import ApI

    3. 使用react-loadable 库实现react异步加载

      使用react-loadable这个高阶组件

    使用Chrome-DevTool进行性能调优

    • 使用ReactDevTool 找到多余渲染

      1. 使用hightlight-update 可以看到页面中哪一部分进行了更新，
      2. 在组件绑定store的属性时，页面用到哪些就绑定哪些，否则引起不必要的渲染更新

    • 使用Chrome DevTool 定位性能瓶颈

  1. 了解如何使用工具定位性能问题
    • 定位性能问题产生的原因利用工具 react-devTool Chrome提供的DevTool调试性能问题及内存问题
网络性能优化：自动化按需加载

动态加载模块

利用webpack打包工具可以很容易实现自动化按需加载这个功能，利用webpack提供的api

  • 如何在react中实现按需加载

    1. 什么是按需加载

      当切换到某个页面时，这个页面的内容所需的东西才会加载出来，而不是在应用一开始就加载了。

    2. 使用Webpack的import ApI

    3. 使用react-loadable 库实现react异步加载

      使用react-loadable这个高阶组件

    使用Chrome-DevTool进行性能调优

    • 使用ReactDevTool 找到多余渲染

      1. 使用hightlight-update 可以看到页面中哪一部分进行了更新，
      2. 在组件绑定store的属性时，页面用到哪些就绑定哪些，否则引起不必要的渲染更新

    • 使用Chrome DevTool 定位性能瓶颈

      F12 下的 performance 这个功能进行分析

大溪流
关注
专栏目录
react开发技术文档
12-28
react中文用户手册，react使用，前端开发介绍以及讲解
编程知识+React开发与应用的实战技术解析，技术难点和实战经验+技术开发
06-11
编程知识+React开发与应用的实战技术解析，技术难点和实战经验+技术开发；编程知识+React开发与应用的实战技术解析，技术难点和实战经验+技术开发；编程知识+React开发与应用的实战技术解析，技术难点和实战经验+...
React技术要点总结
LeoThink的独家小院
03-10 1125
React技术要点总结 文章目录React技术要点总结Ant design实践教程第一章 基础知识第二章 布局与路由第三章 小试牛刀DVA-状态管理和model使用model基本model 的使用-dispatch、action、reducermodel中请求服务端effect第四章 复杂页面图表第五章 进阶功能自定义样式上传与下载生命周期ES6语法let 和 const解构赋值对象的简洁表示法箭...
最全的React拖拽排序组件库对比研究
2401_83384536的博客
07-15 1767
基于react的拖拽功能，有这么几个比较流行的库：react-dnddnd-kit文档齐全github star星数16.4k维护更新良好，最近一月内有更新维护学习成本较高功能中等移动端兼容情况，良好示例数量中等概念较多，使用复杂组件间能解耦文档齐全github star星数24.8k维护更新良好，最近三月内有更新维护学习成本较高使用易度中等功能丰富移动端兼容情况，优秀示例数量丰富。
React 开发必须知道的 34 个技巧
web全栈开发的博客
06-29 397
前言React 是前端三大框架之一,在开发中也是一项技能;本文从实际开发中总结了 React 开发的一些技巧技巧,适合 React 初学或者有一定项目经验的同学序列文章:Vue 开发必须知道的 36 个技巧【近1W字】效果图1 组件通讯1.1 props子组件import React from "react"; import PropTypes from "prop-ty......
从零构建react开发技术汇总
工匠精神coding，终生学习
03-25 2002
npm设置淘宝镜像 sudo npm install -g cnpm --registry=https://registry.npm.taobao.org npm set registry https://registry.npm.taobao.org 更新npm 版本 sudo cnpm install -g npm@8.1.0 更新node版本 npm install node@17.0.0 构建react开发环境 npm install -g create-react-app 创建react
React 开发要点解析-立哥技术
weixin_45806384的博客
08-31 147
-你的过去我来不及参与，你的未来我奉陪到底 react 16.8的三大生命周期：挂载，更新，卸载 Keys 定位元素 Props 避免重复渲染 牢记JS是单线程的，native JS 直接调用real DOM，效率低 React 采用Virtual DOM ，声明式开发 预加载，图片懒加载提高速度 高阶组件的使用 Redux 工作流 异步中间件使用 Class类组件 父子组件通讯 ...
详解使用create-react-app快速构建React开发环境
12-10
最近在折腾react开发，总结一个react环境搭建的教程，写得比较细碎，基本上就是自己的搭建步骤了，希望能够帮助到有需要的小伙伴。 常用的脚手架 react-boilerplate react-redux-starter-kit create-react-app...
react开发框架react开发框架
07-23
从标签“react”中可以得知，该文件内容很可能与React技术栈相关，而提供的部分文字内容看似是扫描错误或混乱的信息，并未提供React开发的具体技术细节或知识点。不过，从这些内容中可以推测，可能存在对电子书籍...
React开发实战完整版，直接下载
06-22
本资源"React开发实战完整版"提供了全面的学习指南，旨在帮助开发者深入理解React，并能实际应用于项目开发中。 在React开发中，以下几个核心知识点至关重要： 1. 组件化：React的核心概念就是组件，每个组件都是...
React前端开发技术栈及Hooks使用指南
最新发布
09-14
适用人群：希望全面深入地学习前端框架 React 的开发工作者，适用于已有前端开发基础，希望通过进阶学习提高技术水平的人群。 使用场景及目标：涵盖了 React 开发中的多种常见任务和技术选型指导，适用于从创建项目...
react-feature:一个简单的vs代码插件，用于创建react模块支架
05-17
React功能 这是用于模块化React的简单脚手架扩展。 用途 该扩展将简单地以模块化方式创建用于响应功能的支架。 默认情况下，react-feature将创建打字稿文件。 对于javascript文件，我们可以在react功能名称中将estension传递为<react>.js 。 创建以下文件 上下文（带有带有钩子的上下文的样板代码） 功能名称文件 键入文件 样式文件 路由文件 下载 目前，由于仅用于测试和学习目的，因此我们不会将其推向市场。 但是仍然可以通过从下载此文件来使用它。 运行code --install-extension react-feature-0.0.1.vsix 或者您可以将其放在扩展文件夹中 Windows %USERPROFILE%\.vscode\extensions ~/.vscode/extensions ~/.v
react-devtools-3.2.3.crx
07-02
目前最新版的react devtool工具插件，鉴于网上的要下载的都是2.5.2.crx版本的，而且需要的积分比较大，所以在这里分享一下最新版的插件。chrome React DevTool react-devtools 3.2.3.crx React开发工具。
React devtools最新
01-11
eact React 是一个用于构建用户界面的 JAVASCRIPT 库。 React主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。
react-devtool-4.4.0.crx
03-05
不用下载源码，不用编译，不用敲命令。 直接拖拽到chrome即可使用， 亲测可正常使用。 插件详细情况描述： React Developer Tools 4.4.0 (1/3/2020) Adds React debugging tools to the Chrome Developer Tools. Created from revision f749045a5 on 1/3/2020. ID：fmkadmapgofadopljbjfkapdkoienihi
react技术栈PPT
02-23
个人对react技术的一些简单理解，入门react需要的一些技术要点，帮助初学者入门
React+Redux技术栈核心要点解析（中篇）
小秋博客
03-14 626
感谢作者郭永峰的授权发布。 作者：郭永峰，前端架构师，现用友网络 FED团队负责人，目前主要负责企业级应用前端技术平台建设工作，在前端工程化实现、Node 应用开发、React技术、移动开发等方向有丰富实践经验。Github地址：https://github.com/GuoYongfeng。 责编：陈秋歌，关注前端开发等领域，寻求报道或者投稿请发邮件至chenqg#csdn.n...
React+Redux技术栈核心要点解析（上篇）
小秋博客
03-13 837
感谢作者郭永峰的授权发布。 作者：郭永峰，前端架构师，现用友网络 FED团队负责人，目前主要负责企业级应用前端技术平台建设工作，在前端工程化实现、Node 应用开发、React技术、移动开发等方向有丰富实践经验。Github地址：https://github.com/GuoYongfeng。 责编：陈秋歌，关注前端开发等领域，寻求报道或者投稿请发邮件至chenqg#csdn.n...
React开发学习笔记
qq_32057283的博客
07-31 118
第一章 React的思路 一、安装环境 1、下载create-react-app npm install --global create-react-app 可以在c:\windows\users\xxxx\AppData\Roaming\npm 目录下 二、创建应用 1、使用如下命令，可以在当前目录下创建first_react_app应用 create-react-app first_react_app 如果出现如下问题，则可能是设置了不恰当的代理或认证不通过： npm ERR! network requ
Fullstack React开发技术之全面指南
Fullstack React 是一本关于 React 开发技术的详细指南书籍，旨在帮助开发者快速掌握 React 技术栈。以下是该书籍的知识点概括： 1. React 基础知识 * React 是什么？React 是一个 JavaScript 库，用于构建用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值