理解 React 生命周期

React「just the UI」,相比 Angular、Ember 等完整的解决方案,上手相对容易。不过,React 生命周期还是会让新手迷惑,而掌握每个生命周期方法扮演的角色和执行时间又是至关重要的: 什么时候进行事件绑定、数据请求、解除绑定等操作? 如何减少不必要的重渲染,提高性能?尽管 React 已经通过特定的算法优化渲染,但折中的处理方式仍会触发一些不必要的渲染。 现实中还会有更多涉及生命周期方法的场景。本文将梳理这些方法,以便更好地理解掌握。 React »

使用 ES2015 重构 React 组件

React 组件 ES2015 Class 改写细节 createClass 工厂函数转换为 ES2015 Class ES5: var MyComponent = React.createClass({ // ... }); ES2015: class MyComponent extends React.Component { // ... } 提取 propTypes 和 getDefaultTypes 与 createClass »

ESLint 使用入门

在团队协作中,为避免低级 Bug、产出风格统一的代码,会预先制定编码规范。使用 Lint 工具和代码风格检测工具,则可以辅助编码规范执行,有效控制代码质量。 在以前的项目中,我们选择 JSHint 和 JSCS 结合使用,WebStorm 等开发环境已经支持这些工具,使用起来很顺手。然而,最近使用 React JSX 语法时,却遇到了问题:JSHint »