...

Callwoola

大雄'blog

Home 主页 Blog 博客 Tag标签 GitHub开源 about me关于我


React 深度探险

长期以来,前端开发都饱受臃肿代码的困扰! 当系统中有很多的模型和相应的视图时,其复杂度就会迅速扩大,非常难以理解和调试,特别是模型和视图间可能存在的双向数据流动。

解决这个问题需要 “以某种方式组织代码,使其更加可预测”,说以 Facebook提出了 Flux和React。

Facebook 原话 :

We built React to solve one problem:

building large applications with data that changes over time.

构建那些数据会随时间改变的大型应用

React主要的原理 Virtual DOM -> 虚拟DOM

传统的web应用,操作DOM一般是直接更新操作的,但是我们知道DOM更新通常是比较昂贵的。

而React为了尽可能减少对DOM的操作,提供了一种不同的而又强大的方式来更新DOM,代替直接的DOM操作。就是Virtual DOM,一个轻量级的虚拟的DOM,就是React抽象出来的一个对象,描述dom应该什么样子的,应该如何呈现。通过这个Virtual DOM去更新真实的DOM,由这个Virtual DOM管理真实DOM的更新。

为什么通过这多一层的Virtual DOM操作就能更快呢? 这是因为React有个diff算法,更新Virtual DOM并不保证马上影响真实的DOM,React会等到事件循环结束,然后利用这个diff算法,通过当前新的dom表述与之前的作比较,计算出最小的步骤更新真实的DOM。

可以这样说 React 为前端封装控件的工具, 因为使用了 VirtualDom 使得其支持局部刷新, 从而提高了web应用的运行速度!

值得注意的是 React不是一个MVC框架 ,React也不使用模板!

主要概念

例如这个 ( 摘抄自阮一峰的 github ):

demo1

<!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>
作用 连接 在线展示
2.渲染数组 link link
3.VirtualDom 数组 link link
4.使用 VirtualDom 属性 link link
5.反绑数组 link link
6.数据检查 link link
7.绑定事件 link link
8.初始化数据 link link
9.双向绑定 link link
10.绑定延时事件 link link
11.Ajax 请求 link link
12.异步 ajax 请求 link link
13.简单的手脚架套件 link ~

备注说明 es6 es5 初始化数据区别.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { /* initial state */ };
  }
}
// 等价于
var MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ };
  },
});

相关学习链接:

Flux Demo 不过接下来我 将介绍, Redux 一个更加先进的 Flux 解决方案

Webpack Demos 比 gulp grunt 先进100倍的,构建工具

React Router Tutorial

CSS Modules Demos

React Testing Demo

一个手脚架例子

最后再强调下

referrence:

http://www.ruanyifeng.com/blog/2015/03/react
http://www.jianshu.com/p/ae482813b791

下一篇 redux

  • 文档信息:
  • 版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证)
  • 发表日期: 2016-11-1318:27:52+0800
  • 更多内容:
  • Feed订阅:
相关内容:

disqus评论区:

0