React.js 最佳实践(2016)_链接修正版
2015年 React 在全世界都有很多关于新的更新和开发者大会的讨论.关于去年的重要事件,请参考 React in 2015.
如果你刚刚开始接触React.js,可以查看我们的 React.js 教程,或者 Pete Hunt 的 React howto. 数据处理在 React.js 应用中处理数据非常简单,但也充满挑战. Flux根据我们的经验,Flux 经常被过度使用,(就是大家总是在不需要它的时候仍然用了它). 使用 ReduxRedux 是一个 JavaScript App的可预测 state 容器. 1.扁平化 state API 经常会返回嵌套的资源.这在 Flux 或基于 Redux 的架构中处理起来会非常困难.我们推荐使用 normalizr 这类库将数据进行扁平化处理,尽可能地扁平化state. const data = normalize(response,arrayOf(schema.user)) state = _.merge(state,data.entities) (我们使用isomorphic-fetch与API进行通信) 2.使用 immutable state 共享的可变性 state 是罪恶的根源. - Pete Hunt,React.js Conf 2015 shouldComponentUpdate(nexProps) { // 不进行对象的深度对比 return this.props.immutableFoo !== nexProps.immutableFoo } 3. 如何在JavaScript中实现不可变? 本办法是小心的写代码,示例代码如下,你需要在单元测试中通过 deep-freeze-node 来反复验证. return { ...state,foo } return arr1.concat(arr2) 相信我,这是最明显的例子了. import { fromJS } from 'immutable' const state = fromJS({ bar: 'biz' }) const newState = foo.set('bar','baz') Immutable.js 非常之快,背后理念也非常美妙.哪怕你并不准备使用它,我也推荐阅读这个由 Lee Byron 所制作的视频 Immutable Data and React.它非常深刻的讲解了 Immutable.js 的工作原理. 4. Observables and Reactive 解决方案 如果你不喜欢 Flux/Redux 或者只是想要更加 reactive,不用失望!还有很多数据处理的方案供你选择,这里有一个可能是你想要的库的简单列表:
路由几乎所有 App 都有路由功能.如果你在浏览器中使用 React.js,你将会在挑选库的时候遇到选择性问题. 代码分割,惰性加载只有一小部分 webpack 用户知 App 代码可以分割成多个 JavaScript 块. require.ensure([],() => { const Profile = require('./Profile.js') this.setState({ currentComponent: Profile }) }) 这对于大型应用十分有用,每次部署之后用户浏览器不用下载那些很少会使用到的代码,比如Profile页面. 更多代码块将导致更多 HTTP 请求 - 但是使用 HTTP/2 多路复用就没有问题. 组件很多人都在抱怨JSX,但首先要知道,它在 React 中是可选的. JSX 是一种与 XML 类似的 JavaScript 语法扩展.你可以通过一个简单的 JSX 语法转换器来转换它.— JSX in depth 如果你想了解更多 JSX 的内容,查看文章 JSX Looks Like An Abomination – But it’s Good for You 使用 ClassesReact 与 ES2015 的 Class 语法搭配的很好. class HelloMessage extends React.Component { render() { return Hello {this.props.name} } } 相对于mixins,我们更喜欢高阶组件,所以保留 createClass 更像是一个语法问题,而不是技术问题. 我们认为使用 createClass 或者 React.Component 只是选择不同而已,没有对错之分. 属性类型如果你仍然没有检查 熟悉类型,那么你应该从2016年开始做起,这将为你节省大量的时间,相信我. MyComponent.propTypes = { isLoading: PropTypes.bool.isRequired,items: ImmutablePropTypes.listOf( ImmutablePropTypes.contains({ name: PropTypes.string.isRequired,}) ).isRequired } 当然,也可以使用 react-immutable-proptypes 验证 Immutable.js 所编写的属性. 高阶组件当前 mixins 将死,而且在 ES6 的 Class 不再支持 mixins,我们应当寻找新方案. 什么是高阶组件?PassData({ foo: 'bar' })(MyComponent) 测试保证测试的高代码覆盖率是开发周期中的重要一环.幸运的是,React.js 社区有很多这样的库来帮助我们. 组件测试AirBnb 的 enzyme 是我们最喜爱的组件测试库之一.使用它的浅渲染特性可以对组件的逻辑和渲染结果进行测试,非常神奇.它现在还不能替代selenium测试,但是将前端测试提升到了一个新高度. it('simulates click events',() => { const onButtonClick = sinon.spy() const wrapper = shallow( ) wrapper.find('button').simulate('click') expect(onButtonClick.calledOnce).to.be.true }) 看起来非常简洁,不是吗? Redux测试测试 reducer 非常简单,它响应新到来的 actions 然后将原来的 state 转换为新的 state: it('should set token',() => { const nextState = reducer(undefined,{ type: USER_SET_TOKEN,token: 'my-token' }) // immutable.js state output expect(nextState.toJS()).to.be.eql({ token: 'my-token' }) }) 测试 actions 也很简单,但是异步 actions 就不太一样了.对于测试异步的 actions 来说,我们推荐使用 redux-mock-store,非常有帮助. it('should dispatch action',(done) => { const getState = {} const action = { type: 'ADD_TODO' } const expectedActions = [action] const store = mockStore(getState,expectedActions,done) store.dispatch(action) }) 关于更深入的 redux测试,请参考官方文档. 使用 npm虽然 React.js 并不依赖代码打包工具就可以工作得很好,但我们还是推荐使用 Webpack 或者 Browserify 来发挥 npm 的能力.Npm 有很多 React.js 的包,可以帮助你优雅地管理依赖. Bundle 大小这本身不是一个 React 相关的问题,但是大多数人都在打包他们的 React 应用,所以我有必要在这里提一下. import { concat,sortBy,map,sample } from 'lodash' // vs. import concat from 'lodash/concat'; import sortBy from 'lodash/sortBy'; import map from 'lodash/map'; import sample from 'lodash/sample'; 查看Reduce Your bundle.js File Size By Doing This One Thing,以获取更多信息. 组件级别的 hot reload如果你曾使用过hot reload编写单页面应用,当你在处理某些与状态相关的事情时,可能你就会明白当你在编辑器中点击保存,整个页面就重新加载了是多么令人讨厌.你需要逐步点击操作到刚才的环节,然后在这样的重复中奔溃. 使用ES2015前面有提到过,我们在 React.js 组件中使用 JSX,然后使用 Babel.js 进行编译. 代码检查或许你已经给你的 JavaScript 代码制定了代码规范,但是你知道也有用于 React 的代码规范了吗?我们建议你选择一个代码规范,然后照着它说的来做. GraphQL 和 Relay相对而言 GraphQL 和 Relay 还属于新技术,在 RisingStack,我们还没有在产品环境中使用它们,但保持关注. 尽情享用这些 React.js 的最佳实践有些优秀的技术和库其实跟React都几乎没关系,但要关注社区的其他人都在做些什么.2015这一年,React社区被 Elm 架构启发了很多.
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- 安装postgresQL Query Cache
- vb.net Adobe Reader AxAcroPDF控件常用属性(整理中)
- unit-testing – 单元测试时加载默认数据的模式
- quick cocos2dx 组件使用要领
- Flash id does not match. Please make sure that the righ
- oracle 11g 删除指定的sql_id
- dart – 破坏异常’_InternalLinkedHashMap’不是’Map’类
- c – 如何根据QSignalMapper获取QList的索引
- cocos2d-x学习笔记——各种遍历与范围for语句的使用
- xml – 创建动态视图,多次视图X次,获取/设置每个组的值