react总结

React是一个构建用户界面的JavaScript库，主要负责构建UI，起源于FaceBook的内部项目

React拥有很好的性能，代码逻辑简单，将界面拆分为多个小的组件。

React设计特点

1.通过设计虚拟DOM节点，最大限度地减少与DOM的交互。

2.JSX是作为JavaScript语法的扩展，可以在html中添加JS语法。

3.通过React组件化构建，使得代码更容易复用，能够很好的运用于大型的项目开发。

4.单向数据流，轻松实现数据绑定。

React JSX

JSX有以下优点

1.jsx执行速度更快，因为他在编译为JavaScript代码后进行了优化。

2.他是类型安全的，在编译过程中就能发现错误。

3.使用JSX编写模板更加简单快速。

JSX的运用

React.render(

       <h1>hello,world</h1>,

      document.getElementById('root');

);

我们可以在以上代码中嵌套多个HTMl标签，需要在元素外部包裹一个div标签。

React组件

可以通过创建多个组件合成一个页面或者组件，即把不同功能的模块分开。

var Man  = React.creteClass({

    render: function(){

    <div>

         <Name name={this.props.name} / >

        <Age age={this.props.age} / > 

    </div>

}

});

var Name = React.createClass({

    render:function (){

     return (

    <h1>{this.props.name}</h1>

)

}

});

var Age = React.creatClass({

   render:function(){

   <h1>{this.props.age}</h1>

}

});

React.render(

   <Man name="hello" age="10" />,

   document.getElementById('root');

);

React State

React把组件看成是一个状态机。通过与用户交互，实现不同状态，然后渲染UI，让用户界面和数据

保持一致。

React里，只需要更新组件的state，然后根据新的state重新渲染用户界面（不操作DOM）

以下通过创建LikeButton组件，getInitialState方法用于定义初始状态，也就是一个对象，这个对象可以

通过this.state属性读取。当用户点击组件，导致状态变化，this.setState方法就修改状态值，每次修改

后，自动调用this.render方法，重新渲染组件。

var LikeButton = React.createClass({

   getInitialState:function(){

   return {liked:false}

},

handleClick:function(event){

   this.setState({liked:!this.state.liked});

},

render:function(){

   var text = this.state.liked?'喜欢':'不喜欢';

   return (

   <p onClick={this.handleClick}>

      你<b>{text}</b>我。点我切换状态。

   </p> 

)

}

});

React.render(

   <LikeButton />,

   document.getElementById('app');

)

React Props

state和props主要的区别在于props是不可变的，而state可以根据与用户交互来改变，这就是为什么

有些容器组件需要定义state来更新和修改数据。而子组件只能通过props来传递数据。

State和Props

以下示例说明state和props的组合使用方法。我们可以在父组件中设置state，并通过props传递到子

组件，在render函数中，我们设置name和site来获取父组件传递过来的数据。

var WebSite = React.creatClass({

   getInitialState:function(){

   return {

   name:'hello',

   site:'www.baidu.com'

};

},

   render:function(){

   return(

   <div>

       <Name name={this.state.name} />

      <Link site={this.state.site}/>

   </div>

);

}

});

var Name = React.createClass({

   render:function(){

   return (

   <h1>{this.props.name}</h1>

);

}

});

var Link=React.createClass({

  render:function(){

  return(

   <a href={this.props.site}>{this.props.site}</a>

);

}

});

React.render(

   <WebSite />,

   document.getElementById('root');

);

Props验证

Props验证使用propTypes，它可以保证我们的应用组件被准确的使用，React.PropTypes提供很多

验证器（validator）来验证传入的数据是否有效。当向props传入无效数据时，JavaScript控制台会

抛出警告。

以下实例创建了一个Mytitle组件，属性title是必须且是字符串，如果是数字就会报错。

var title='hello';

var myTitle=React.createClass({

   propTypes:{

   title:React.PropTypes.string.isRequired,

},

render:function(){

   return <h1>{this.props.title}</h1>

}

});

ReactDOM.render(

   <MyTitle title={title} />,

   document.getElementById('root');

);

丰富的组件生命周期

Mounting:已插入真实DOM

Updating:正在被重新渲染

Unmouting:已移除真实DOM

生命周期方法有：

componentWillMount 在渲染前调用，在客户端也在服务端

componentDidMount 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM

结构，可以通过this.getDOMNode()来进行访问。如果需要和其他JavaScript框架一起使用，

可以在这个方法中调用setTimeOut，setInterval或者发送AJAX请求等操作（防止异步操作阻塞UI）

componentWillReceiveProps在组件接受到一个新的prop时被调用。这个方法在初始化render时不会

被调用

shouldComponentUpdate返回一个布尔值，在组件接受到新的props或者state被调用，在初始化时

或者使用forceUpdate时不被调用

componentWillUpdate在组件接受到新的props或者state但还没有render时被调用，在初始化时不会

被调用。

componentDidUpdate在组件完成更新后立即调用。在初始化时不会被调用

componentWillUnmount在组件从DOM中移除时立刻被调用

React refs

React支持的一种特殊的属性Ref，你可以用来绑定到render()输出的任何组件上。这个特殊的属性

允许你引用render()返回的相应实例，这样就可以保证任何时间总是拿到正确的实例。

可以通过使用this来获取当前React组件，或者使用ref来获取组件的引用，实例如下：

var MyComponent = React.createClass({

   handleClick:function(){

    this.refs.myInput.focus();

},

render:function(){

   return (

   <div>

      <input type="text" ref="myInput"/>

      <input type="button" value="点我输入框获取焦点" onClick={this.handleClick}/>

   </div> 

);

}

});

ReactDom.render(

   <MyComponent />,

   document.getElementById('root');

)