React

【1】前端技术规划应该考虑什么事情？

1、组件库、模块化

2、开发效率

3、运行效率

4、可维护性

5、体验优化

 

【2】目前解决这些问题的方案？

1、组件化：webComponent、React、

2、模块化：webback、require.js

3、开发效率：MVC（backbone）（React）（Angular.js）

4、运行效率：backbone、React

5、可维护性：flux,

 

【3】React技术栈对上述问题的解决

1、组件化：React天生组建化，可以在众多开源组建找到

2、模块化：基于webpack可以使用ES6或CommonJs的写法

3、开发效率：相比MVC去除了控制器角色，只用关心render函数，

react网页源码结构：

  

    

    

    

  

  

    

    

  

ReactDOM.render 是 React 的最基本方法，用于将模板转为 HTML 语言，并插入指定的 DOM 节点。

ReactDOM.render(

  

Hello, world!

,

  document.getElementById('example')

);

上面代码将一个 h1 标题，插入 example 节点（查看 demo01）

 

 

【4】组件

React 允许将代码封装成组件（component），然后像插入普通 HTML 标签一样，在网页中插入这个组件。React.createClass 方法就用于生成一个组件类

var HelloMessage = React.createClass({

  render: function() {

    return

Hello {this.props.name}

;

  }

});

 

ReactDOM.render(

  ,

  document.getElementById('example')

);

上面代码中，变量 HelloMessage 就是一个组件类。模板插入 时，会自动生成 HelloMessage 的一个实例（下文的"组件"都指组件类的实例）。所有组件类都必须有自己的 render 方法，用于输出组件。

 

 

【5】virtual DOM

组件并不是真实的 DOM 节点，而是存在于内存之中的一种数据结构，叫做虚拟 DOM （virtual DOM）。只有当它插入文档以后，才会变成真实的 DOM 。根据 React 的设计，所有的 DOM 变动，都先在虚拟 DOM 上发生，然后再将实际发生变动的部分，反映在真实 DOM上，这种算法叫做 DOM diff ，它可以极大提高网页的性能表现

 

 

【6】AJAX

组件的数据来源，通常是通过 Ajax 请求从服务器获取，可以使用 componentDidMount 方法设置 Ajax 请求，等到请求成功，再用 this.setState 方法重新更新 UI

 

参考链接：http://www.ruanyifeng.com/blog/2015/03/react.html

 

转载于:https://www.cnblogs.com/xiaozhaodecaiyuan/p/7399142.html