Tomorrow

我学了多少技术 读了多少本书

学习React-router

学习React-router

现在比较流行的单页面应用(SPA)由于只存在一个页面,想要做到切换就要使用到路由这个东西。React、Vue等MVVM库的路由原理大致相同,都是通过url的变化去做出相应的交互效果。下面来去探索一下路由的原理吧。 Hash 早期的前端路由是通过hash来实现的。改变url的hash值是不会刷新页面的,通过hash实现前端路由,从而实现页面无刷新的效果。 hash位于window.loact...

React优化-惰性加载

使用react-lazyload实现react的懒加载

惰性加载是一种优化网站的老技术了,它的作用是如果在某一时刻资源没有被查看或需要,就不要渲染它们。 为什么要有惰性加载 当今的网站项目越来越庞大,每次都需要加载很多首屏不需要的资源,特别是SPA这种架构,首次请求就需要把所有的资源全部加载过来,这种方式极大的增加了首屏渲染时间。本来首屏就是视窗中可以看到的部分,没有看到的就没有必要渲染出来,这种就可以极大的减少首屏渲染时间,达到优化的作用。 ...

CSS Workflow-拥抱面向未来的CSS

学习现代化CSS

写CSS是快乐的还是痛苦的? 有时候我们可能会因为CSS不是一门正统的编程语言而不重视它(我自己也是),我总觉得写CSS是痛苦的,每天做着重复性的工作,没有大神的奇淫技巧也没有特别亮眼的特效,总是围绕着那几个CSS属性转。相信有很多人和我一样,把更多的精力放在JavaScript上面,每次再写CSS的时候我都感觉是痛苦的,但是现在随着自身能力的提升和各种奇淫技巧以及面向未来的CSS的发展让C...

CSS分层理论

CSS分层理论

为什么要分层? CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性、性能的提高和代码的组织管理。 大量的样式、覆盖、权重和很多的!important很难维护,分好层可以让团队命令统一规范,方便维护。 团队成员都可以有责任的去命名CSS选择器 多种分层方式 SMACSS 官网 SMACSS(Scalablew and Modular Architecture ...

CSS-3D

学习CSS3D

3D 在CSS3D的世界中可以说有三个东西是核心:透视、3D变形函数、3D加速。这三者构成了CSS的3D体系,也样CSS可以那么容易的构成3D空间。 透视 人的眼睛看事物总是有一个规律:近大远小。这个东西也可以叫做景深,有了景深,才能让我们看的东西变成3D。 开启透视 -webkit-transform-style: preserve-3d; -webkit-perspective: 3...

学习OOCSS理论

学习OOCSS理论

OOCSS OOCSS也叫面向对象的CSS。在传统的网站开发过程中,众多的开发者忽略了CSS的表现,都认为它太过简单,是一种机械性的工作,把更多的精力放在了JavaScript的性能或者其他方面。但是随着项目的工程越来越大,CSS样式文件也逐渐增多,很容易就出现了CSS胡乱堆积的情况,这个时候就必须要使用一种管理CSS的方式来管理样式。OOCSS就是一种解决方案。 在面向对象程序设计中,每...

揭开Redux神秘面纱:手写一个min-Redux

手写一个简易版的Redux

前言 react和状态管理redux是紧密结合的,而本身又没有任何联系。react可以不使用redux管理状态,redux也可以脱离react独立存在。随着react的项目越来越复杂,state变的繁重,各种prop和state的转变让我们在开发过程中变得头晕眼花,react本来就是一个专注于UI层的库,本不应该让繁杂的prop和state的逻辑掺杂进来。于是Flux的架构出现了,Flux架...

React16:Hooks一览,拥抱函数式

React16:Hooks全文总结,拥抱函数式

React16.8中加入了Hooks,让React函数式组件再一次升华,那么到底什么是Hooks? 动机 React官网和2018年的React conf上都提到了动机这个东西,那么出现hooks的动机是什么?是什么推动了hooks的出现?先来看一下Hooks的动机。 1.在组件间复用状态逻辑很难 React没有提供可复用性行为“附加”到组件的途径,在写类组件的时候,一个类是一个闭包并...

React16:新的生命周期和state可用阶段

React16:新生命周期的使用

React16新增了两个生命周期,并且说要在React17版本废除一些生命周期。 React15的生命周期 React16的生命周期 React16中即将废弃的生命周期有:componentWillount、componentWillReceiveProps、componentWillUpdate 新增的生命周期有:getSnapshotBeforeUpdate、getDerive...

React16:错误边界组件

React16:使用错误边界组件

React16出现一个错误边界组件,它可以捕捉到子组件树中任何位置捕获到错误,并记录这个错误,展示降级的UI而不是让整个组件树崩溃。错误边界组件的捕获错误是渲染期间,在整个生命周期方法以其整个树的构造函数中发生的错误。 React16中错误组件一共除了两个生命周期,两个生命周期都可以捕获错误,只是作用有些不同。 错误捕获生命周期的特点 先说一下错误组件生命周期的特点: 错误组件的生...