哈姆雷特之 React

2024年4月26日 290次阅读 来源: 不明真相

近来两三周在主要在写 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 =
  <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 我碰到的几个方面:

  • 多个 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

    原文作者：不明真相
    原文地址: https://segmentfault.com/a/1190000004982587
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞