react之Hello World

背景

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

1. react三个基本库

1. react.js: React核心库
2. react-dom.js: 提供与DOM相关的功能
3. 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}
       

document.getElementById('box') );

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

3. 销毁和清理期

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

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