![](https://img-blog.csdnimg.cn/20200609155003620.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
文章平均质量分 94
一步一个脚印,为了学习而学习
Free Joe
我本微末凡尘,却也心向天空
展开
-
UmiJS基础&UmiJS+Dva
Umi,中文可发音为乌米,是可扩展的企业级前端应用框架。你可以将它简单的理解为一个专注性能的类 next.js 前端框架,并通过约定、自动生成和解析代码等方式来辅助开发,减少我们开发者的代码量。原创 2021-03-20 23:18:05 · 2614 阅读 · 4 评论 -
DvaJS学习(dva = React-Router + Redux + Redux-saga)
dva 是体验技术部开发的 React 应用框架,将上面三个 React 工具库包装在一起,简化了 API,让开发 React 应用更加方便和快捷。dva = React-Router + Redux + Redux-saga数据的改变发生通常是通过用户交互行为或者浏览器行为(如路由跳转等)触发的,当此类行为会改变数据的时候可以通过 dispatch 发起一个 action,如果是同步行为会直接通过 Reducers 改变 State ,如果是异步行为(副作用)会先触发 Effects 通过serve原创 2021-03-17 05:22:19 · 1113 阅读 · 3 评论 -
redux-saga学习
如果redux需要用到 side effect 异步操作,redux-thunk 和 redux-saga 绝对是目前两个最受欢迎的中间件插件。redux-saga是一个用于管理redux应用异步操作的中间件,redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理,可以用来代替redux-thunk中间件。原创 2021-03-16 00:50:33 · 2408 阅读 · 5 评论 -
MockJs学习&React+Axios+MockJs实战例子
MockJs可以生成随机数据,拦截 Ajax 请求。Mock.js 的语法规范包括两部分:- 数据模板定义规范(Data Template Definition,DTD)- 数据占位符定义规范(Data Placeholder Definition,DPD)Mock.mock( rURL, function( options ) )当拦截到匹配 rurl 的请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。原创 2021-03-13 05:24:59 · 781 阅读 · 1 评论 -
React Hook学习
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。Hook 是一些可以让你在函数组件里“钩入”(hook) React state 及生命周期等特性的函数。Hook 在 class 内部是不起作用的。Hooks的出现是为了解决 React 长久以来存在的一些问题:- 在组件之间复用状态逻辑很难- 复杂组件变得难以理解- 难以理解的 class原创 2021-03-11 04:58:05 · 391 阅读 · 0 评论 -
React Context 上下文对象
Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据,例如当前认证的用户、主题或首选语言。Context 通过组件树提供了新的传递数据的方法,从而避免了在每一个层级手动的传递 props 属性。原创 2021-03-10 23:45:42 · 439 阅读 · 0 评论 -
React Diff算法
- Tree Diff:采用分层求异的策略,将新旧两棵DOM树按照层级对应的关系进行对比,这样只需要对树进行一次遍历,就能够找到哪些元素是需要更新的。- Component Diff:查看两个组件的类型是否相同。如果类型不同,则需要更新,更新时先把旧的组件删除,再创建一个新的组件插入之前删除的位置。类型相同时,暂时不需要更新。- Element Diff:通过设置唯一key值,对元素diff进行优化。(组件类型相同时看内部元素)元素发生了改变,则找到需要修改的元素,有针对性进行修改。原创 2021-03-09 06:19:16 · 355 阅读 · 0 评论 -
React Router新版本入门学习
近几年单页应用(Single Page Web Application,SPA)发展迅猛,前端控制路由变为主流,单页应用也是前端路由的主要使用场景。react-router是React中用来实现路由的第三方JavaScript库,也是基于React开发的。它拥有简单API和强大的路由处理机制,如代码缓冲加载、动态路由匹配,以及建立正确的位置过渡处理。它可以快速地在应用中添加视图和数据流,保持页面展示内容和URL的同步。原创 2021-03-08 23:02:17 · 528 阅读 · 1 评论 -
Redux学习 & React+Redux实战(connect方法各个参数解读)
Redux 是 JavaScript 应用程序的状态容器,提供可预测的状态管理。在Redux中,所有的数据(比如`state`)都是保存在`store`的容器中,一个应用也只能有一个store容器。`store`本质是一个状态树,保存了所有对象的状态。任何UI组件都可以直接通过`store`访问特定对象的状态。要想更改对象的状态,需要分发一个`action`-- (`store.dispatch(action)`)。分发在这里意味着将可执行信息发送到`store`。当一个`store`接收到一个`ac原创 2021-03-06 07:10:37 · 923 阅读 · 1 评论 -
React组件全方位学习
在React中,组件是应用程序的基石,页面中所有的界面和功能都是由组件堆积而成的。合理的组件设计有利于降低系统各个功能的耦合性,并提高功能内部的聚合性。在React中,可以使用花括号{}把JavaScript表达式放入其中运行,放入{}中的代码会被当作JavaScript代码进行处理。在React中,数据流是单向流动的,从父节点向子节点传递(自上而下)。原创 2021-03-02 12:18:48 · 212 阅读 · 0 评论 -
React事件处理——为什么React事件处理函数需要手动绑定this?手动绑定this方法有几种?
`onClick: this.handleClick`,相当于`onClick = {function}`,`onClick`是一个"中间变量",用来接收`this.handleClick`的函数体,也就是说`this.handleClick`作为一个回调函数传给另一个函数(点击事件处理函数)调用,这样会造成回调函数中的隐式丢失。原创 2021-02-28 14:28:37 · 677 阅读 · 3 评论 -
React入门学习
用于构建用户界面的 JavaScript 库,React不是一个MVC框架,而是一个用于构建组件化UI的库,是一个前端界面开发工具React源于Facebook内部PHP框架XHP的一个分支,在每次有请求进入时会渲染整个页面。而React的出现就是为了把这种重新渲染整个页面的PHP式工作流,带入客户端应用,在使用React构建用户界面时,只需定义一次,就能将其复用在其他多个地方。当状态改变时,无须做出任何操作,它会自动、高效地更新界面。从此开发人员只需要关心维护应用内的状态,而不需要再关注DOM节点.原创 2021-02-22 21:53:51 · 280 阅读 · 0 评论 -
Ubuntu部署.net项目与React前端项目(前后端分离项目的部署)
在Ubuntu18.04上部署一个前后端分离的项目,前端框架采用的是react全家桶,后端则是.Net Core编写的接口平台。 进入正题之前,个人觉得有必要说明一点:应用的部署,首要工作是给其提供一个可运行环境(如SDK),其次是对其配置文件按需配置(.conf修改),最后一般是系统为了方便管理该应用的配置(如自启动)。同一应用的不同环境,需配置不同的部署参数,甚至不同的部署方法。比如日常环境通过容器服务部署,而正式环境通过脚本部署。原创 2020-10-23 13:58:17 · 994 阅读 · 1 评论