Webpack+React正确使用姿势

前言

在去年的夏天折腾了一波React开发环境,研究了下Webpack和Gulp工具,最终选择混用两者。当时Github上的外国大佬koistya也用类似的方式实现了比较完善的React脚手架。可是两个工具的功能重叠十分尴尬,冗余的感觉一直刺激着强迫症…尤其是当时发现热加载功能好像经常出问题 ( 没看明白文档 ),干脆就换用了每次webpack bundle完写磁盘,让browser-sync自动刷新的蛋疼方式。

今年九月才发现,koistya在react-starter-kit后来的更新中逐渐地去除了Gulp,完全使用webpack,并且整个工作流优雅地使用了ES6、ES7…容我再次跪舔一发…

仿照着koistya的做法,以及其他Github上开源的webpack+react脚手架,写了一个适合自己的webpack种子项目:Github仓库

功能、写法大同小异,折腾的过程中更深入地了解了下这些工具的原理,写这篇文章整理一下。

移动端WEB开发笔记 9.4

鸽了一段时间的博客…
前天在TB时被其他组小伙伴吐槽博客加载太慢,明明处于人生第一次烂醉状态下,却把这句话记得很牢。回来一看之前用的360给谷歌字体做的cdn挂了,吃了一波502直接阻塞,尴尬。

于是今天顺手把博客静态资源也压了压、给博客源码里加了几个TODO、记点之前移动端的开发踩坑。

主要内容是:

  • 基于localStorage的移动端强缓存策略
  • 微信WeixinJSBridge API的诡异问题
  • 移动端性能优化与用户体验改良

前端笔记7.31

入职也有20多天了,没想到进了公司新成立的部门…目前主要的任务是制作基于微信浏览器的web页面。由于先前没做过移动端,自然踩坑不少。

最近工作的笔记习惯记在OneNote上,除了不能设置默认的字体格式之外,笔记的同步功能用的很舒服,基本能满足需求。想着每周末把一周学习的笔记整理下发一篇博客,不知道能坚持到何时。


今天主要记一下css的一些hack技巧…工作中使用起来确实很舒服~

主要内容均源自大漠老师的w3plus、Vitaly Friedman的分享Dirty Tricks From The Dark Corners Of Front-End鑫空间、以及CSS-Tricks的阅读学习。

北京印象

儿童节耐不住对帝都的好奇,提前开启了人生游戏的北方支线剧情。

想象

一张票、一个包、一本书、一个人。我似乎向往着着,也习惯着、喜欢着独行。

两个熊孩子、三个在后排聊了一车的互联网猎头、迷迷糊糊地看了四个小时山本文绪的书、五跳过、六个小时毫无意趣的地图加载。一直觉得动车所行之地,是另一个角度的、真实的、无聊的中国。你能想象得到那些或是荒芜或是肥沃的田地、低矮单调的乡村住宅、那些没必要有名字的山、什么地方都能见到的高楼、有点所谓现代感的动车站……好像很早很早之前就厌了,很早很早之前就“没必要”看看窗外的风景了,对车窗座的喜爱仅因为更大的视野和阳光。一直以来对“偷工减料”的旅行的漠然,也许便是因此。我还记得第一次去金华时,见到一大片红黄色调建筑的喜悦。仅仅是换个颜色,都够我满足了。

阳光透过车窗,被窗帘挡着,一闪一闪地映在书页上,这是旅程中最为惊喜的。看,真的是黄金屋。

前端笔记5.26

回顾上半年,好像一直在玉泉养老来着,嗑瓜子看看上世纪的アニメ。最近补完了UC高达的主要作品,最喜欢的还是Z和独角兽(跑题中…)

好像上半年最主要的前端经历,一个是在实习公司用Electron做了个内部桌面应用,另一个是毕设写了一坨Angular. 虽然两个都想好好记一记,不过感觉理解还比较浅显,干货不太多,暂时未能成文。

想起来学前端已经有一年了,眼看也快毕业入职。最近像是在重走初学时的路一样看起了JS基础,感觉每次重温都有新收获,这篇笔记会零碎地记一些知识点和规范。希望以后看到这些东西,会觉得理所当然,成为「刻の涙」…

2015校招记录

0x00前言

校招过后,两个月没有写博客。

第一个月是签约后的倦怠期。不少同学都选择了出国或是考研,当然还有继续求职的。听过一些朋友对未来的迷茫与不安,见到更多的是他们为更好的未来而奋斗的、最美的样子,希望大家都能找到自己的方向,都能成为想要的那样。

11月结束校招旅程,虽说有点和同届同学们的生活有点脱节,但也获得了一段大学中比较清闲的日子。生活就和小学时候所痴心妄想的那样,上两天课(实际上是一天半),放五天假。除了宅在寝室看电影、Anime、日剧,偶尔也可以没有包袱地出去散个步,想想大学这四年的点点滴滴,以及自己的改变等等。当然都只是一些零碎的看法和不太成熟的反省罢了,尚不能成文。总感觉这种东西还是等到成了老爷爷再好好写写吧。

第二个月实在忍受不住窝寝室的无聊(因为不能打扰那些还在奋斗的旁友们),其实还是有经济危机的因素在,选择在杭州找个实习。就这样,在15年的末尾加入了群核的前端组,很幸运地认识到一群有热情有想法的小伙伴,也在这个团队中发现了一些很欣赏很喜欢的人。这说实话是我的第一次实习,我相信也会是一段很难忘的经历。

言归正传,谈谈校招。主要涉及如下几家:

阿里、网易、美团、新浪、亿方云、饿了么、同盾、乐其、丁香园

React:Render()

用React写页面的时候,经常会采用嵌套组件的结构,不同的组件间会有父子关系。

简单而言,在组件A的Render函数中如果出现了另一个组件B,则A的这个实例是B实例的父组件。

React构建的页面是基于单向数据流,不像Angular那样做双向绑定,所以数据的流向只能单向从父—>子(设置子组件的props,类似传参),也可以子—>父(给子组件传入自身函数的引用,类似回调)。

但是在实际做时,一旦关联了父子数据,我们会发现React的Render方法有点鬼畜。

笔试&面试笔记

国庆结束后,每天都是笔试+面试混杂的日子,一会儿城西一会儿城南,或者电脑前做笔试的智商题、OJ、性格测试、阅读题、计算机基础…仔细想想的话,这段时间的压力都是自作自受。前几年更努力些、投入些、或者更早地发现自己想做的事(前端),或许就没今日这样的窘迫。

今天没有什么安排,就记一下一周来踩过的坑,大部分还是基础不够扎实。混杂一些最近的学习笔记,不一定是前端的。