建设银行网上营业厅官方网站下载开源crm系统
概述
本篇将从React的特点、如何使用React、JSX语法、组件(Component）以及组件的属性，状态等方面进行讲解。
React是一个用于组建用户界面的JavaScript库，让你以更简单的方式来创建交互式用户界面。
- 当数据改变时，React将高效的更新和渲染需要更新的组件。声明性视图使你的代码更可预测，更容易调试。
- 构建封装管理自己的状态的组件，然后将它们组装成复杂的用户界面。由于组件逻辑是用JavaScript编写的，而不是模板，所以你可以轻松地通过您的应用程序传递丰富的数据，并保持DOM状态。
- 一次学习随处可写，学习React，你不仅可以将它用于Web开发，也可以用于React Native来开发Android和iOS应用。
组件的属性(props)
我们可以通过this.props.xx的形式获取组件对象的属性，对象的属性可以任意定义，但要避免与JavaScript关键字冲突。
遍历对象的属性：
this.props.children会返回组件对象的所有属性。
React 提供一个工具方法React.Children 来处理this.props.children 。我们可以用React.Children.map或React.Children.forEach 来遍历子节点。
React.Children.map
array React.Children.map(object children, function fn [, object thisArg])
该方法会返回一个array。
React.Children.forEach
React.Children.forEach(object children, function fn [, object thisArg])
Usage：
var NotesList = React.createClass({render: function() {return (<ol>{React.Children.map(this.props.children, function (child) {return <li>{child}</li>;})}</ol>);}
});
ReactDOM.render(<NotesList><span>hello</span><span>world</span></NotesList>,document.body
);
state
上文讲到了props，因为每个组件只会根据props 渲染了自己一次，props 是不可变的。为了实现交互，可以使用组件的state 。this.state 是组件私有的，可以通过getInitialState()方法初始化，通过调用this.setState() 来改变它。当 state 更新之后，组件就会重新渲染自己。
render() 方法依赖于this.props 和this.state ，框架会确保渲染出来的 UI 界面总是与输入（this.props 和this.state ）保持一致。
初始化state
通过getInitialState()方法初始化state，在组件的生命周期中仅执行一次，用于设置组件的初始化 state 。
getInitialState:function(){return {favorite:false};}
更新 state
通过this.setState()方法来更新state，调用该方法后，React会重新渲染相关的UI。
this.setState({favorite:!this.state.favorite});
Usage:
var FavoriteButton=React.createClass({getInitialState:function(){return {favorite:false};},handleClick:function(event){this.setState({favorite:!this.state.favorite});},render:function(){var text=this.state.favorite? 'favorite':'un favorite';return (<div type='button' onClick={this.handleClick}>You {text} this. Click to toggle.</div>);}
});
上面代码是一个 FavoriteButton 组件，它的getInitialState方法用于定义初始状态，也就是一个对象，这个对象可以通过this.state属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用this.render 方法，再次渲染组件。
心得： 由于
this.props和this.state都用于描述组件的特性，可能会产生混淆。一个简单的区分方法是，this.props 表示那些一旦定义，就不再改变的特性，而 this.state 是会随着用户互动而产生变化的特性。
喜欢的朋友记得点赞、收藏、关注哦！！！