Tomorrow

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

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中错误组件一共除了两个生命周期,两个生命周期都可以捕获错误,只是作用有些不同。 错误捕获生命周期的特点 先说一下错误组件生命周期的特点: 错误组件的生...

React16:新Ref的使用

React16:新Ref的使用方式及Ref传递

曾经的两种Ref的创建方式 render(){ return ( <> //第一种:第一种是指定指定一个string,通过this.refs.stringRef取到相应的dom元素 <p ref="stringRef">span1</p> //第二种:第二种是使...

React16:Context API

React16:Context API的使用

Context API是 react16中重点推荐使用的。 Context API 主要解决props向对层嵌套的子组件传递的问题(爷孙组件props传递),原理是定义一个全局对象,通过订阅发布的方式进行数据的传递。 React.crateContext Context Api使用React.crateContext方法构建,并且定义一个默认值。 const {Provider,...