关于reactjs

来源：互联网发布：交换机端口标签编辑：程序博客网时间：2024/05/02 01:36

Bootstrap 和 AngularJS 一个是做UI和响应式布局的,一个是前端做MVC层解耦合的.二者都很强大,不过bootstrap包比较庞大,在移动端运行不流畅,更适合做PC段的web.AngularJS,最大特点是采用了双向绑定,和依赖注入的方式对前端进行解耦合.不过采用的是传统的MVC,对于大的数据流更新处理很麻烦. ReactJS估计就是看到这点才应运而生.

React 采用了VDOM取代传统浏览器DOM的笨重渲染方式.另外JSX语法让写JS更加直观.当然这些都不是重点.重点还是组件化.一个组件一旦写好就可以反复的在别的地方使用.这个是bootstrap 做不到的.你每次得写一堆的html代码,设置class.即便是要复制现成的代码块,我都嫌累.React只要用一个组件标签设置下就用了.在模块之间解耦方面,采用了flux 设计模式.让界面随着数据的流动动态的进行渲染.布局方面采用的是flex box 布局.比响应式布局和传统的 css box 模型更灵活,也更容易.

reactjs 可以用node 进行安装,react-tools实时编译JSX.

<!DOCTYPE html><html>  <head>    <script src="../build/react.js"></script>    <script src="../build/react-dom.js"></script>    <script src="../build/browser.min.js"></script>  </head>  <body>    <div id="example"></div>    <script type="text/babel">      ReactDOM.render(        <h1>Hello, world!</h1>,        document.getElementById('example')      );    </script>  </body>  </html>

在react 0.14前，浏览器端实现对jsx的编译依赖jsxtransformer.js
在react 0.14后，这个依赖的库改为browser.js
页面script标签的type也由text/jsx改为text/babel
但是以上只能用来测试学习react
生产环境需要借助编译工具事先将jsx编译成js
对应的这个工具也由react-tool更换为babel

作者：王金亮
链接：http://www.zhihu.com/question/37389040/answer/78688199
来源：知乎
著作权归作者所有，转载请联系作者获得授权。

0 0