哈姆雷特之 React

时间 2020-02-01

原文原文链接

最近两三周在主要在写 React，在这里写一下，算是个总结。javascript

webpack

咱们的后端语言用的是 Go, 对于写网站来讲，Go 并无好的前端资源（js, css，image）的管理方式(打包，压缩)，另外咱们也没有用任务的框架，简单粗暴的 Go http server + package 的方式来实现的，因此也只能借用 JS 的. 开始的时候其实咱们用的是 gulp, 由于只须要打包、压缩生成 manifest 就能够了，它的使用也简单(也是当时对 webpack 的理解不够)。可是打算换成 ReactJS，它是推荐用 browserify 或 webpack，就这样决定把以前的 gulp 换成了 webpack。这里面主要的问题是做用域。这里强烈建议看一下 ryfeng 的一篇文章Resource2，关于 CommonJS 的，由于 webpack 也是基于它的，理解很重要。关于 AMD 的由于没有实践，就很少说了。总之也并无那么难。css

Component 生命周期

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

JSX

React 里很是重要的一部分是 JSX，虽然你能够用 JS 来代替，我相信大多数人不会这样作。因此颇有必要说一下。前端

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

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 的写法:node

var Layout = React.createClass({
  render: function() {
    return (
      <Header />
      <Content />
      <Footer />
    );
  }
});

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

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

翻页

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

路由

React 作为 SAP 是一个很好的选择，可是我但愿可以像正常的 URL 请求同样，因此我又用了 react-router。实际上 Routes 是分红两部分的：Client 跟 Server，若是你用 NodeJS 的很方便。可是咱们是用的 Go，Server 端只能本身来写，不过最终方法是抽取出来了，也还好。github

client 我遇到的几个方面:

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

最后

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

若是问题欢迎一块儿讨论。

哈姆雷特之 React

webpack

Component 生命周期

JSX

翻页

路由

最后

相关资料