2018-10-28
Presentational and Container Componentsreact团队成员之一的Dan Abramov在medium上写过一篇文章 Presentational and Container Components,他在文中将组件分为两类,分别是Presentational和Container。Presentational是展示类组件,比如说Page,Sidebar,Story,List。Container组件是功能类组件,比如UserPage, FollowersSidebar, StoryContainer, FollowedUserList。 它们是React组件的两种设计模式,和组件本身是class component还是function component关系不大。
2018-05-24
在React Native中创建一个动画有多种方式。 使用react-native包的Animated组件创建动画 使用react-native包的LayoutAnimation创建布局动画 使用Web API标准的requestAnimationFrame控制动画 以上是目前常用的几种在React Native中创建动画的方式,Animated动画可以进行nativeDriver加速,但是如果属性不支持,将会使用requestAnimationFrame实现计算。LayoutAnimation控制粒度不及Animated细。 本文主要来说说Animated.Value及Animated.ValueXY
2018-05-14
贝塞尔曲线就是可以通过控制点来完成对线条的扭曲,在平面中,已知两个点的最短距离为直线,在这两个点的基础上引入一个控制点来控制直线的弯曲。 本文远行环境为HTML5中的Canvas,使用的方法来自CanvasRenderingContext2D。
2017-12-31
2016年4月入手了iPhone 6s,它陪伴了我一段时间,我平时很少会用它来拍照,因为本身就是一个不爱拍照的人。但是打开相册,还是有很多有趣的回忆,选了一些有趣的照片,写一篇博客,也算是对这两年来的生活记录。 在刚来成都的小区附近,天色近黄昏。 那时应该是刚吃完饭,跟朋友散步回家。突然想到试一试手机的拍照效果,与身边的朋友一起拍了当时的景色,一起对比,并吹捧了对方的拍照技术。 入夏,在公司外面的小道上,旁边的大院里种的花开的芬芳,穿过了栅栏,伸出到了道路上。那边很安静,上班的人也不多,因为靠城外的缘故吧。下班和同事会走那条路,去坐地铁回家,在途中讨论着遇到的问题。 习惯了喝咖啡,速溶的,不喜欢咖啡的味道,但咖啡带来的神秘力量会让工作更有效,那一段时间带有咖啡味。 阳光很好的一天,在宽窄巷子外。这里外地游客居多,但如果说约朋友出来玩,找不到地方也能在这里消磨一下午的时间,街道因为旅游景区的原因,打扫的很干净,植物也长得茂密。 第一次看了演唱会,很喜欢演唱会现场的氛围,周围的气氛让人很兴奋。门票是买了两张,但是邀请不到最想要邀请的人。演唱会罢,赶了最晚的一班公交回家,公交车上有很多也是才看了演唱会回去的人。 和朋友吃完饭后逛商场,看到一个可爱的小熊玩具,很是喜欢。它做枕头是一个很棒的选择,玩手机棒到不行!后面在很多地方都看到了同款。 省图书馆外面,不喜欢在图书馆里面看书,但喜欢带着笔记本在里面敲代码,戴上耳机。 拍摄于重庆的街道,有一个朋友在重庆,他带我匆忙的逛了重...
2016-10-25
前言在前端开发发展的趋势中,已经越来越偏向于webapp模式,前端更像是app,但是现在的JavaScript语言中,没有原生的包的概念,这和JavaScript的历史有很大原因,由于Google开源的v8引擎以及NodeJS开源项目的成功,使得现在JavaScript的应用场景越来越多,但是原生不支持模块系统的问题一直存在,社区和Ecma提供了很多的解决方案,本文介绍其中一些比较知名的规范,如CommonJS、AMD等……
2016-08-26
什么是React? 当今的前端正处于技术爆发期,这个阶段涌现很多优秀的编程思想以及框架,本文所介绍的react就是前端的一种框架,它使用单向数据绑定以及jsx语法糖,通过它提供的特性,可以构建去区别于以前传统型的网页。
:doodle { @grid: 8x2; @size: 100vmax; } transform: rotate(@r(180)deg); :after { content: \@hex(@pick(58919,58880,58957,59117,58987,58900,58932,58948,58995,58941)); font-size: @r(2em, 7em); color: hsla(@r(360), 70%, 68%, @r(0.5,1)); font-family: "iconfont" !important; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } @col(1) { @place-cell: @r(0vw, 20vw) @r(0%, 100%); } @col(2) { @place-cell: @r(80vw, 100vw) @r(0%, 100%); }