reactjs学习摘要1
CommonJs
Nodejs采用CommonJs规范
一个单独的文件就是一个模块
加载模块使用require方法，该方法读取一个文件并执行，最后返回文件内部的exports对象。eg：
example.js
var invisible=function(){
console.log("invisible");
}
exports.message="hi";
exprots.say=function(){
console.log(message);
}
使用require方法，加载example.js：
var example=require('./example.js");
//可简写为：require('./example');
有时，不需要export一个对象，只要export一个函数，这样的情况用module.exports=function(){console.log("not a object");}
virtual dom
http://facebook.github.io/react/docs/glossary.html
(virtual DOM)
原理：
为优化dom操作儿引入virtual dom：在浏览器端用JavaScript实现一套Dom API。
数据变化时React重建整个虚拟Dom树并与之前的Dom树进行对比，得到结构的区别，只将变化部分在实际Dom树上更新。
组件：
组件特性
1.可组合（ composeable）
2.可重用（Reausable）
3.可维护（Maintainable）
react element
创建Dom元素：
React.createElement(type,props,key,ref);
var root=React.createElement('div');
render a new tree to Dom：
ReactDOM.render(root,document.getElementById('example'));
add proprties and add childNode:
(属性为第二个参数，child为第三个参数）
var child=React.createElement('li',null,'Text content');
var root=React.createElement('ul',{className:'my-list'},child);
ReactDOM.render(root,document.getElementById('example'));
use React JSX;
var root=<ul class="list-type">
<li>Text content</li>
</ul>;
ReactDOM.render(root,document.getElementById('example'));
react factories
A ReactElement-factory is simply a function that generates a ReactElement with a particular type property.
function createFactory(type) {
return React.createElement.bind(null, type);
}
用法：（build-in）
var div = React.createFactory('div');
var root = div({ className: 'my-div' });
ReactDOM.render(root, document.getElementById('example'));
React already has built-in factories for common HTML tags:
（常用标签可直接调用）-React.Dom.type()方法：
var root = React.DOM.ul({ className: 'my-list' },
React.DOM.li(null, 'Text Content')
);
使用JSX的话React Factories 就没啥用了
JSX语法
use React JSX;
var root=<ul class="list-type">
<li>Text content</li>
</ul>;
ReactDOM.render(root,document.getElementById('example'));
核心：Facebook做的语法糖，只是为了方便代码书写
在js内部写HTML标签
解释JSX后才可用，不能直接引入
<script type="text/jsx"></script>
React Nodes
It can be eithor of the followings:
ReactElement
string(aka ReactText)
number(aka ReactText)
Array of ReactNodes(aka ReactFragment)
those,used to effectively create a tree of ReactElement.