背景

Facebook 为了开发出一套更好、更适合自己的JavaScript MVC 框架，所以结果是react。后来，反响非常好。,所以于2013年5月开源。

1. react三个基础图书馆

2. react.js: React核心库

3. react-dom.js: 提供与DOM相关功能

4. browser.min.js: 把JXS文法javascript语法

react之Hello World:

 ReactDOM.render(
   
Hello, world!
,
   document.getElementById(box)
 );

ReactDOM.render方法是输出HTML方法，是react最基本的方法是将输入插入到公式中DOM中

2. JXS语法

在react中，遇到<则按照html语法执行，遇到{则按照js语法执行，JXS语法允许将变量插入模板。

   var str = a;
   ReactDOM.render(
       
{str}
,
       document.getElementById(box)
   );
  //页面输出a。

如果变量是数组，则展开数组的所有成员

 var arr = [
  
Hello One!
,
     
Hello Two
 ]
 ReactDOM.render(
   
{arr}
,
   document.getElementById(box)
 );
 //页面直接输出
和

3. 组件

生成组件方法

 //部件名称统一，首字母大写，采用驼峰命名法。
 //React.creatClass一种生成组件的方法,定义组件这一术语很少出现
 //HelloWorld为组件类
 //调用组件时，会插入模板。类，则会自动生成一个。HelloWorld的实例子
 var HelloWorld = React.creatClass({
      reder: function () {
          return {
               //this.props对于对象，组件的属性可以在组件内部生成。this.props 获取
                
{this.prpos.name}
           }
       }
 });

 //组件调用
ReactDOM.render(
    ,
    document.getElementById(box)
);

组件是虚拟的DOM,这也是react基本核心理念,由组件的状态更改驱动,当状态发生变化时,只更新DOM,不呈现整个页面,这也是和传统一样的js呈现整个页面最本质的区别和优势是计算当前的虚拟DOM以及虚拟后的状态更改DOM的差异,仅更改不同部分以提供性能。

组件的生命周期

1.实例化

由于react这个想法是组件的组合。, 首次创建相同的实例时，将执行以下方法

• getDefaultProps
• getInitialState
• conponentWillMount
• render
• conponentDidMount

getDefaultProps方法

为真实示例设置了默认值。props值，通常是不变的值,此外，对于父组件未传递的属性，此方法返回实例本身使用的默认值。props值，则该方法将只被调用一次。.

当第二次应用组件类以及所有后续应用时，getDefaultProps该方法不再存在，并且不会被调用。,仅执行以下四种方法

• getInitialState
• conponentWillMount
• render
• conponentDidMount

getInitialState方法

它在初始化每个实例时被调用，并且只调用一次，以生成默认的状态属性值。

conponentWillMount方法

在每次呈现之前调用，此时也可以修改。state的价值，等待render当执行该方法时state它不能更改。

reder方法

render创建一个虚拟的DOM,来表示组件输出。是组件的唯一必需的方法,并且需要满足以下条件：

1. 只能通过this.props和this.state访问数据
2. 可以返回null、false、或组件
3. 只能显示一个顶级组件,无法返回一组元素,可用div用组件包裹一层或包装
4. 组件的状态不能更改，或者DOM输出,组件状态只能为setState函数中的修改

componentDidMount方法

在render方法调用和DOM在渲染之后，可以将其放入。componentDidMount方法内部通过this.getDOMNode()方法访问。

2.存在期

到这时,组件已呈现，用户可以与该组件交互，如表单。change事件，react通过确定组件状态的更改来进行响应更新。DOM

 var Input = React.createClass({
    //设置默认state,确定查看状态,对一般处理数据进行简单的更改。,渴望表格
    getInitialState: function () {
         return {
             val: Hello World
         };
     },

     changeInputVal: function (event) {         
         this.setState({
             value: event.target.value
         });
     },

     render: function () {
       var val = this.state.val;
       return (
           
           
           //p的innerHTML该值将基于value要更新的更改DOM
           
{this.state.value}