哈姆雷特之 React
最近两三周在主要在写 React,在这里写一下,算是个总结。 webpack我们的后端语言用的是 Go,对于写网站来说,Go 并没有好的前端资源(js,css,image)的管理方式(打包,压缩),另外我们也没有用任务的框架,简单粗暴的 Go http server + package 的方式来实现的,所以也只能借用 JS 的. 开始的时候其实我们用的是 gulp,因为只需要打包、压缩生成 manifest 就可以了,它的使用也简单(也是当时对 webpack 的理解不够)。但是打算换成 ReactJS,它是推荐用 browserify 或 webpack,就这样决定把之前的 gulp 换成了 webpack。这里面主要的问题是作用域。这里强烈建议看一下 ryfeng 的一篇文章Resource2,关于 CommonJS 的,因为 webpack 也是基于它的,理解很重要。关于 AMD 的因为没有实践,就不多说了。总之也并没有那么难。 Component 生命周期略,其实很重要,主要是因为资料说得很详细,这里只把地址放在这里,生命周期 JSXReact 里非常重要的一部分是 JSX,虽然你可以用 JS 来代替,我相信大多数人不会这样做。所以很有必要说一下。 我经常遇到的一个错误 var dropdown = <Dropdown> A dropdown list <Menu> <MenuItem>Do Something</MenuItem> <MenuItem>Do Something Fun!</MenuItem> <MenuItem>Do Something Else</MenuItem> </Menu> </Dropdown>; render(dropdown); 这是我刚开始的 ReactJS 的写法: var Layout = React.createClass({ render: function() { return ( <Header /> <Content /> <Footer /> ); } }); 上面的这个例子 Header,Content,Footer 最外层,实际上是没有闭合的。render 里面返回的是一个变量,而上面我的例子,会产生歧义,它并不知道到里里结束。 另外包含了一些其它的,类似于编译器、 Transpilers(没有想到好的词来表达)。 翻页并不是太习惯于滚动翻页,我选择了 react-pager,其实也很方便,只是需要在 handlePageChanged 自己处理数据请求。只是会有一个跟 react-router 结合时 browserHistory 的问题,我们接下来说。 路由React 做为 SAP 是一个很好的选择,但是我希望能够像正常的 URL 请求一样,所以我又用了 react-router。实际上 Routes 是分成两部分的:Client 跟 Server,如果你用 NodeJS 的很方便。但是我们是用的 Go,Server 端只能自己来写,不过最终方法是抽取出来了,也还好。 client 我遇到的几个方面:
最后以上是我在使用过程中,遇到的困难跟觉得比较重要的部分。目前看来 ReactJS 确实是非常适合于前后端分离的。把数据的渲染工作放到前端,用 api 的加载数据而不是整个页面可以提升大约 50% 速度(这个是基于数据量的,测试数据大概百万级别)。首次请求因为没有数据的处理跟模板的加载,显示速度提升更明显,相当于静态的 html 加载,本地测试数据是提升几百倍,从大于1s到几ms。 如果问题欢迎一起讨论。 相关资料https://facebook.github.io/react/ (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |