React特性

jsx--使用简单
单向数据流--数据绑定简单
虚拟dom--加快程序的运行效率
组件化开发
局限性：如何在子组件里操作父组件的数据；

安装

node_modules
创建package.json (npm init)
npm install --save react react-dom package.json 里面的name不能和react一样
console.log(window); 搜索react可以很便捷的看到引入react文件后给我添加了哪些属性和方法

一个简单的例子

<!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>

首先，注意到最后一个script标签对的type属性是"text/babel"，这是因为react独有的JSX语法，与JavaScript不兼容。凡是使用JSX语法的地方，都要加type="text/babel"。
上面的代码一共引用了三个库，它们必须首先加载，react.js是react的核心库，react-dom.js是提供与DOM相关的功能，browser.min.js的作用是将JSX语法转为JavaScript语法。实际上线的时候，应该放在服务器上完成。
$ babel src --out-dir build
- 这句代码可以将src子目录的 js文件进行语法转换，转码后的文件全部放在 build子目录。

一、ReactDOM.render()

是react最基本的方法，用于将模版转为html语言，并插入指定的DOM节点中。

二、JSX语法

JSX --模版引擎和ejs/jade一样
上面的代码中，html直接写在了JavaScript语言中，不加任何引号，这就是JSX语法，它允许这样的混写。
var names=['zhangsan','lisi','wangwu'];
ReactDOM.render(
<div>
{
names.map(function(name){
return <div> hello {name} !</div>
})
}
</div>,
document.getElementById('example')
);
上面这段代码，体现了JSX基本的语法规则：遇到html标签(以'<'开头)就用html规则解析；遇到代码块(以'{'开头)就以JavaScript规则解析。
JSX允许在模版中插入JavaScript变量，如果这个变量是数组，则会展开这个数组的所有成员。
var arr=[<h1>hello react!</h1>,<h3>react is awesome!</h3>];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById("#example")
);

三、组件

组件可以让你把UI分割成独立的、可重用的部件,单独地考虑每一块。
react允许将代码封装成组件，然后像插入一个普通标签一样，把这个组件插入到页面中。React.createClass()用于生成一个组件类
在使用已经定义好的组件时，可以传入属性，并且可以在组件的内部获取到传进来的值：
this.props.属性名;
不能在组件内部更改传进来的属性的值。
arr.map() map--映射
var arr=[1,2,3,45,6];
arr.map(function(a,b,c){ //元素，下标，值
console.log(a)
})
example:
class Map extends React.Component{
render(){
return (
<div>
{(this.props.children).map(function(a,b){
return <li key={b}>{a}</li>
})}
</div>
)
}
}
ReactDOM.render(<Map><span>arr.map</span><span>map</span><span>Map</span></Map>,document.getElementById("example"))
渲染的组件必须是一个完整的结构，只能有一个根元素
class Abc extends React.Component{
render(){
return (
<ul>
<li></li>
<div></div>
</ul>
)
}
}
★ 想要在组件内部改变状态首先设置初始值state={}; 使用方法setState 可以：
- 重新设置 state的值
- 并重新进行渲染
  class State extends React.Component{
```
}
```

生命周期
componentWillMount(){console.log('准备渲染')}
componentDidMount(){console.log('渲染完毕')}

componentWillUpdate(){console.log('即将更新')}
componentDidUpdate(){console.log('更新完毕')}
shouldComponentUpdate(){}  //确定要更新？ 返回一个布尔值

componentWillReceiveProps(){console.log('元素的属性即将发生更改')}

render(){console.log('正在渲染')}