哈姆雷特之 React

?xiaoxiao, 发布于2019-08-19 18:10 / 3140人阅读

摘要：最近两三周在主要在写，在这里写一下，算是个总结。但是打算换成，它是推荐用或，就这样决定把之前的换成了。这里面主要的问题是作用域。总之也并没有那么难。目前看来确实是非常适合于前后端分离的。

最近两三周在主要在写 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 生命周期

略，其实很重要，主要是因为资料说得很详细，这里只把地址放在这里，生命周期

JSX

React 里非常重要的一部分是 JSX，虽然你可以用 JS 来代替，我相信大多数人不会这样做。所以很有必要说一下。

我经常遇到的一个错误 Adjacent JSX elements must be wrapped in an enclosing tag，原因是 React.createClass 里的 render 里面只能返回闭合的标签。像 img， br 这种闭合还是可以理解的，但是我会忘记最外层加一个闭合的标签，为什么？根源就在于 JSX。我把Resource3里的例子放到这里。

var dropdown =
  
    A dropdown list
    
      Do Something
      Do Something Fun!
      Do Something Else
    
  ;

render(dropdown);

这是我刚开始的 ReactJS 的写法:

var Layout = React.createClass({
  render: function() {
    return (
      
      
      
    );
  }
});

上面的这个例子 Header, Content, Footer 最外层，实际上是没有闭合的。render 里面返回的是一个变量，而上面我的例子，会产生歧义，它并不知道到里里结束。

另外包含了一些其它的，类似于编译器、 Transpilers（没有想到好的词来表达）。

翻页

并不是太习惯于滚动翻页，我选择了 react-pager，其实也很方便，只是需要在 handlePageChanged 自己处理数据请求。只是会有一个跟 react-router 结合时 browserHistory 的问题，我们接下来说。

路由

React 做为 SAP 是一个很好的选择，但是我希望能够像正常的 URL 请求一样，所以我又用了 react-router。实际上 Routes 是分成两部分的：Client 跟 Server，如果你用 NodeJS 的很方便。但是我们是用的 Go，Server 端只能自己来写，不过最终方法是抽取出来了，也还好。

client 我遇到的几个方面:

多个 components共用 layout，resource8

上面提到的 browserHistory 问题，加 pagination 时 browserHistory 的处理。这里需要很看一下 Resource7，理解一下 component 的生命周期，我是 componentDidUpdate 里处理，整个代码是需要自己来实现的。另外需要在 handlePageChanged 时把翻页放入历史里面 browserHistory.push("/users?page="+newPage)

最后

以上是我在使用过程中，遇到的困难跟觉得比较重要的部分。目前看来 ReactJS 确实是非常适合于前后端分离的。把数据的渲染工作放到前端，用 api 的加载数据而不是整个页面可以提升大约 50% 速度（这个是基于数据量的，测试数据大概百万级别）。首次请求因为没有数据的处理跟模板的加载，显示速度提升更明显，相当于静态的 html 加载，本地测试数据是提升几百倍，从大于1s到几ms。

如果问题欢迎一起讨论。

相关资料

https://facebook.github.io/react/
[Resource2] http://javascript.ruanyifeng.com/nodejs/module.html
[Resource3]https://facebook.github.io/jsx/
https://www.npmjs.com/package/react-pager
https://github.com/reactjs/react-router
https://github.com/reactjs/react-router/tree/master/docs
[Resource7]https://github.com/reactjs/react-router/blob/master/docs/guides/ComponentLifecycle.md
[Resource8]https://github.com/reactjs/react-router/blob/master/docs/API.md#components-1

云服务器 GPU云服务器哈姆雷特雷特 react _React

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79272.html

前端20个灵魂拷问彻底搞明白你就是中级前端工程师【下篇】

摘要：安装后已经完成了安装，并且等待其他的线程被关闭。激活后在这个状态会处理事件回调提供了更新缓存策略的机会。并可以处理功能性的事件请求后台同步推送。废弃状态这个状态表示一个的生命周期结束。 showImg(https://segmentfault.com/img/bVbwWJu?w=2056&h=1536); 不知不觉，已经来到了最后的下篇其实我写的东西你如果认真去看，跟着去写，应该能有...

fireflow 2019-08-30 15:44 评论0 收藏0
被误读的设计模式

摘要：可以说，如果问题是我们的敌人，代码是我们的剑，设计模式就是高手心中的剑谱。中级选手，在编程的时候知道何时该用什么设计模式，而什么时候不该用。设计模式被用来简化设计，让设计更优雅。其中最具有普遍性的方案往往就是我们的设计模式的内容。 showImg(https://segmentfault.com/img/remote/1460000019100076?w=800&h=440); 目录概...

William_Sang 2019-08-16 17:14 评论0 收藏0
总结个人2015提高前端效率的方法和工具

摘要：更多前端内容阅读之前非用户请自动忽略，此文针对用户，我个人使用频率非常高，端开发者可以选择性的尝试部分工具。或者调起的调试工具，跟编辑器亲密合体。目前在使用，尝试。更多前端内容http://www.codefrom.com/p/JavaScript 阅读之前非Mac用户请自动忽略，此文针对Mac用户，我个人使用频率非常高，PC端开发者可以选择性的尝试部分工具。终端...

Jingbin_ 2019-08-22 10:57 评论0 收藏0
脱网安装雷特字幕手拍唱词插件Premiere版

摘要：为回馈新老用户，雷特字幕平台隆重推出手拍唱词插件，并且免费下载使用。雷特字幕手拍唱词插件版，支持及，运行的操作系统必须为位及以上操作系统。雷特字幕自发行以来受到广大用户的青睐，在其丰富的插件中，手拍唱词一直是用户最关注，也是最实用的插件之一。为回馈新老用户，雷特字幕premiere平台隆重推出手拍唱词插件，并且免费下载使用。雷特字幕手拍唱词插件Premiere版，支持Premiere...

TalkingData 2019-06-28 13:28 评论0 收藏0