react之Hello World

背景

Facebook 为了开发一套更好更适合自己的JavaScript MVC 框架，所以产生了react。后来反响很好,所以于2013年5月开源。

 <!DOCTYPE html>
 <html>
   <head>
     <script src="react.js"></script>
     <script src="react-dom.js"></script>
     <script src="browser.min.js"></script>
   </head>
   <body>
   <div id="box"></div>
   <script type="text/babel">
     // 此处script为解决与js语法不兼容问题，必须要加上type="text/babel"
     //
   </script>
   </body>
 </html>

1. react三个基本库

react.js: React核心库
react-dom.js: 提供与DOM相关的功能
browser.min.js: 把JXS语法转化为javascript语法

react之'Hello World':

 ReactDOM.render(
   <h1>Hello, world!</h1>,
   document.getElementById('box')
 );

ReactDOM.render方法为输出HTML方法，是react最基本的方法，将输入的内容插入制定的DOM中

2. JXS语法

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

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

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

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

3. 组件

生成组件方法

 //组件名称统一标准，开头字母大写，采用驼峰命名法
 //React.creatClass为生成组件的方法,很少出现'定义组件'这个词
 //HelloWorld为组件类
 //当调用组件，模版插入<HelloWorld />类时，会自动生成一个HelloWorld的实例子
 var HelloWorld = React.creatClass({
      reder: function () {
          return {
               //this.props为一个对象，组件的属性可以在生成组件的内部通过this.props 获取
                <h1>{this.prpos.name}</h1>
           }
       }
 });

 //组件调用
ReactDOM.render(
    <HelloWorld name="HelloWorld" />,
    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,来表示组件输出。对组件来说是唯一必须的方法,并需要满足下面几点条件：

只能通过this.props和this.state访问数据
可以返回null、false、或组件
只能出现一个顶级组件,不能返回一组元素,可用div包裹一层或是用组件包裹
不可改变组件的状态，或者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 (
           <input type="text" value={value} 
           onChange={this.changeInputVal}/     
       );
     }
   });
   ReactDOM.render(
       <div>
           <Input/>
           //p的innerHTML值就会根据value的改变来更新DOM
           <p>{this.state.value}</p>
       </div>  
       document.getElementById('box')
   );

当input的value变化的时候，就会触发changeInputVal事件，通过setState来改变value的状态值来更新DOM。

3. 销毁和清理期

当react使用完一个组件，这个组件就会从DOM中卸载并被销毁，componentWillUnMount方法就会作出响应，完成清理工作，随后移除顶级结构。

注：react数据流向为单向传递，父级组件传递给子组件，通过this.props在子组件中获取。复合组件使用的总结后续完成发出，今天由于时间关系还有bug需要改，先总结这些基础知识,demo暂时也不先做了。学习资料是结合阮一峰react教程,react中文网及react书籍。

react之Hello World