react
文章平均质量分 67
我的小英短
Q版前端开发攻城狮
展开
-
Vue 和 React 的组件更新粒度有什么区别?
前言 我们都知道 Vue 对于响应式属性的更新,只会精确更新依赖收集的当前组件,而不会递归的去更新子组件,这也是它性能强大的原因之一。 例子 举例来说 这样的一个组件: <template> <div> {{ msg }} <ChildComponent /> </div> </template> 我们在触发 this.msg = 'Hello, Changed~' 的时候,会触发组件的更新,视图的重新渲染。原创 2020-06-10 09:36:32 · 1504 阅读 · 0 评论 -
React setState() 的原理解析
setState 的原理机制解析 我们本章节主要是要来分析一下React中常见的setState方法,熟悉React的小伙伴应该都知道,该方法通常用于改变组件状态并用新的state去更新组件。但是,这个方法在很多地方的表现总是与我们的预期不符,先来看几个案例。 常见案例 class Root extends Component { constructor(props) { super...原创 2020-01-19 15:10:50 · 1870 阅读 · 0 评论 -
理解 Virtual DOM 内部工作机制
理解 Virtual DOM 内部工作机制 本章节,大喵将带着大家,深入了解下我们常用的MVVM框架的核心虚拟DOM的工作原理;相信大家对虚拟DOM的认识,并不陌生,目前莱索很多跨平台前端产品的诞生都是由于虚拟DOM的盛行,才会产生这么多跨平台开发框架;所以熟悉和了解Virtual DOM对一名前端开发工程师来说,是非常有必要的。所以跟着大喵一起来学习研究吧 ~ 参考资料: https:/...原创 2020-01-06 10:17:00 · 518 阅读 · 0 评论 -
状态提升知识点案例解析理解
状态提升知识点理解 本章节大喵将带着大家,来梳理React组件数据的状态提升,做一些简单的测试研究的归纳总结;首先我们需要来了解一下,变量提升是一个什么样的东东?好,我们接着往下看, 就是如果两个子组件A和B,需要利用到对方的状态的话,那么这个时候我们就需要使用到状态提升,具体的做法就是把A、B两个子组件的状态写到它们的父组件C当中,然后父组件C把状态传递到子组件A和B的props中去,这样子组...原创 2020-01-02 16:01:01 · 361 阅读 · 0 评论 -
高阶组件相关知识点详解
高阶组件理解 本章节,我们将深入高阶组件详细了解,高阶组件相关的知识点,包括什么是高阶组件,以及如何创建高阶组件,高阶组件实现的几种方式,常用的使用场景等等; ...原创 2019-12-31 16:18:57 · 697 阅读 · 0 评论 -
虚拟DOM的实现原理和优劣对比
虚拟DOM的实现原理和优劣对比原创 2019-12-24 17:28:39 · 3224 阅读 · 0 评论 -
解读 React v16+ 最新生命周期使用场景
解读 React v16+ 最新生命周期使用场景 React更新到v16版本之后,出现了比较大的生命周期方法调整,包括使用方法和使用场景,本章节针对新旧的生命周期的使用方法及使用场景分别详细介绍描述总结; 在介绍生命周期之前,我们首先需要搞清楚React生命周期的几个阶段: Mounting(加载阶段) Updating(更新阶段) Unmounting(卸载阶段) 从上面几个生命期可以发现...原创 2019-12-19 17:41:17 · 285 阅读 · 0 评论 -
解读React中的事件绑定方式种类以及区别
解读React中的事件绑定方式种类以及区别 本章节主要介绍React的事件绑定方式,由于类的方法默认不会绑定this,因此在调用的时候如果忘记绑定,this的值将会是undefined。 通常如果不是直接调用,应该为方法绑定this。所以我们来解读下有多少种方式可以绑定this,以及它们的区别有哪些? 答:4种,哪4种呢,大家继续往下看: 4种方式绑定this 1. 在构造函数中使用bind绑定...原创 2019-12-17 10:34:00 · 538 阅读 · 0 评论 -
React 360 全景VR交互项目实战
react 360 项目实战 这章节呢,我们从一个项目案例实战,来进一步学习react 360框架的使用。 项目的内容呢,我们需要使用React VR开发一个360度球形的图像可旋转查看器。项目中呢,我们将采用几张全景图片和几张对应的小的thunmb按钮图片,最终把按钮放置在360度的立体空间内,制作点击交互;点击这些按钮图片后,全景的360画廊直接进行切换; 当然,有一些开发的注意事项,由于呢,...原创 2019-09-13 18:00:19 · 2984 阅读 · 0 评论 -
React 360 初体验介绍与环境搭建
React 360 初体验介绍 从这章节内容呢,我们来学习并了解下什么是react 360,并使用它来开发一个360度可旋转大屏的案例项目。接下来,我们就一起来逐步揭开它神秘的面纱吧! 我们本章节将会从下面几个方面分别对我们的react 360进行介绍: 什么是 react 360 ? react 360 它有哪些优点? 相关的案例 ? 本地搭建react 360开发环境? 什么是 Rea...原创 2019-09-12 20:38:52 · 2028 阅读 · 0 评论 -
前端知识每日小拷问 007 MVVM框架相关
前端知识小拷问 007 vue、react、angular 相关 准备接收大前端形法的考验吧!?每日5题,直击你的内心 ~~ 今天的前端知识点有如下: vue与react的对比,如何选型?从性能,生态圈,数据量,数据的传递上,作比较 ? vue slot 是做什么的 ? vue和angular的优缺点以及适用场合 ? vue 路由实现原理 ? vue的双向绑定的原理,和an...原创 2019-07-20 11:57:21 · 798 阅读 · 0 评论 -
使用React+exprss+Mockjs开发自适应伸缩响应列表分页组件
使用React+Mockjs开发自适应伸缩列表分页组件 项目预览 项目技术栈 create-react-app脚手架 express 后台服务,跨域设置,模拟数据库limit操作 mockjs根据指定数据结构生成随机数据 项目目录src目录 | App.css | App.js | index.js | +---components +---Pagination |...原创 2019-07-07 22:05:10 · 1022 阅读 · 0 评论 -
MVVM框架热门常用的组件库收集整理
在前端项目的开发过程中,少不了需要选择一款组件库作为项目开发的基础,而只要选择对了一款的合适的组件库就能极大的提升开发效率,直接让人体会到飞一般的感觉,简直爽的不要不要的。减少很多冗余的操作,和一些基础的代码整理,让开发更加快乐,让体验更加美好。 1.Vue常用的组件库 A.element-ui 地址:http://element-cn.eleme.io/#/zh-CN github地...原创 2018-12-06 15:32:39 · 1337 阅读 · 0 评论 -
2018年末前端核心基础扩展知识点积累
1.优雅降级和渐进增强 概述: 渐进增强:针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级:一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。 区别: 优雅降级是从复杂的现状开始,并试图减少用户体验的供给,而渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要。降级(功...原创 2018-11-20 17:49:48 · 1771 阅读 · 0 评论 -
React高阶组件(表单)应用回顾
1. 首先介绍函数式编程: function hello(){ console.log('大家好,我是harry!') } function getWord(fn){ return function(){ console.log('大家好,我是林宇航'); fn(); console.log('大家好,我是猪猪侠') }...原创 2018-08-05 11:44:54 · 1608 阅读 · 0 评论 -
react+redux+react-router构建移动端面板页(回顾)
1. 移动端面板结构: (1)顶部导航 组件 (2)底部tab跳转 组件 (3)中部路由页展示 组件 2. 初始化导航组件和底部tab跳转链接组件 (1)通过指定的json数据结构,初始化导航,底部链接,以及底部tab切换图标交互 (2)初始化导航: <NavBar mode=“dark">{navList.find(v=>v.path===pathname)...原创 2018-08-04 14:36:25 · 1395 阅读 · 0 评论 -
Redux 信息完善交互
交互需求:完善信息页面后台交互,redux发送更新数据请求,实现异步更新状态树的用户数据,在每次进入完善信息页面时,检测是否已经完成信息补充,如果已完成,直接跳转到状态树上的路由地址,如过没有,就留在当前页面,补充信息成功提交到数据库后才能根据状态树跳转到对应的路由地址。 核心代码: (1)点击按钮,执行redux中的update方法: <Button onClick={ v =&...原创 2018-07-25 17:43:13 · 1345 阅读 · 0 评论