影响网站的速度是用户的网速和网站对http请求的处理，为了提升这一点我们通常都会减少http请求，比如，js和css的合并压缩、雪碧图等等。 影响网站性能最大的因素就是浏览器的重绘和重排版了，在原生js当中，我们在遇到需要操作添加DOM的时候，一般都会使用创建文档碎片(document.createDocumentFragment）的方式来减少DOM的重绘和重排版。 React 中的React Virtual DOM 和diff 的存在实则减少网站的性能消耗，但是对于性能优化的问题，我们往往会基于一个不信任的态度，…
这只是一篇个人记录文章。 使用react-router切换页面显得有些单调乏味。所以我们会使用react-transition-group 来进行一些动画的设置，主要是路由的进出动画，当然也可以做其他的动画展示，只是css3 的问题。 react-transition-group 用的大多是1.2.0 或者 1.1.1 的版本，现在是2.2.2的版本，API基本上都变化了。 Note:ReactTransitionGroup和ReactCSSTransitionGroup已被移动到由社区维护的reac…
higher-order 这个词业界老司机基本上都知道，higher-order-function（高阶函数）在函数式编程中是一种概念。描述的是一种函数：这种函数接受函数作为参数，或者输出一个参数。 常见的有map、sort、reduce higher-order-component （高阶组件HOC）类似于高阶函数，它接受一个React组件作为参数，返回一个新的React组件。 通俗点讲就是：当React组件呗包裹时（wrapped），高阶组件会返回一个加强的React组件。 高阶组件让我们的代码更具有复用性、…
上一篇文章介绍了ESLint的基本使用情况，这里在介绍一下ESLint配置文件中的一些细节问题。 如果我们使用ESLint的话可以： npm install -g eslint; //安装 eslint --init; //初始化项目，这会让我们回答几个问题，以自动生成初始eslint文件 eslint app.js //开始lint我们的文件 eslint app.js 只是单独lint一个文件，所以一般在项目中不会这么用，如何配合构建工具用，上一篇文章已经介绍了。这里不多说 这样我们在控制台会看到很多error…
总结写这篇文章是因为我已经开始意识到了规范的重要性，遵守良好的规范可以让一个人少犯错误，代码也是如此。在小的公司小的开发团队中这点意识比较薄弱，因为大家更注重的是技术，因为开发人员相对较少所以沟通起来比较方便，很少有使用eslint的。但是在大团队协作时，良好的代码规范显得格外重要，因为这是保障一个团队代码风格相同、避免低级bug的途径之一。 使用Lint工具和代码风格检测工具，可以辅助编码规范执行，有效控制代码质量。 关于ESLint的介绍，我在这就不多说了，自行GG。ESLint相比于JSLint和CSSLin…
实现css模块化一直是前端开发人员努力实现的目标，但是作为前端领域发展最慢的一块，css的模块化解决方案着实让人头疼。越是大型的项目最后限制的并不是JavaScript，而是css。ES6、7和各种打包工具的发展，早已把css甩出好几条街。在《深入React技术栈》中对css模块化有所描述，在此结合我本人的经验胡说几句。 书中讲到CSS模块化的解决方案有很多，但主要分为两类。 一类是彻底抛弃CSS，使用css in JS的方式使用json来写样式。比如说jsxstyle，react-style等，结合我司的项目来说…
这里只是简单的介绍一下babel中那些语法插件的作用包括以下几个 { "presets": [ "es2015", "react", "stage-0", "stage-1", "stage-2", "stage-3" ], "plugins": [] } babel-preset-react 的作用是让其支持JSX的语法。 babel-preset-es2015 的作用是让其支持ES6的写法。 babel-preset-stage-0 的作用比较多（法力无边），因为它包含stage-1, stage-2以及sta…
近日开始通读《深入React技术栈》，发现坐着讲的很详细，书中很多知识点是我忽视的或者没有接触到了，特写遍手记记录一下。 React数据流 ，stata只关心自己组建的内部状态，并且只能在组件内改变，吧组建看成一个函数，那么它接受props作为参数，内部由state作为函数的内部参数，返回一个Virtual DOM的实现。 setState是一个异步方法，一个生命周期内的所有的setState方法会合并操作。 props： React的单向数据流，只要的流动管道是props，props本身是不可变的，当我们视图改…
好不容易晴了两天，帝都再成仙境。身在仙境，向往人间！ 接触React差不多近两个月了，孤军奋战，前进缓慢，但是使用React确实给我带来了很大的便利，增快了开发速度。结合Node来搭建一个全栈项目几天就可以搞定，但是还是遇到了一些问题，总结之~ 当导航切换特别快的时候，之前请求的数据出现了setState(...):Can only update a mounted or mounting component......的错误。 我出现这个问题的原因是我在constructor 初始化中增加了跳转路由的方法，所以在…
来到WeSafari，技术转移到React，对于我这么一个beginner来说，一边学习一遍看项目的架构，原本以为可以在这个项目上学到新的东西，谁知React更新如此之快早已经把这个项目甩出好几条街，各种废弃的API让我各种懵逼，今天终于发现了这篇优质的文章，解决了我多日以来的痛楚！（其实也不是最新的） 0.13.3 -> 1.0.0 感谢你的耐心等待，终于迎来了这次重大变更。虽然表面上看来只是更新了一些 API，而实际上为了适用于更大型的应用场景，我们几乎重写了整个代码库。新的 API 提供了按需载入路由和…