props属性：

　　我使用代码来说明React中props属性：

// Profile.jsximport React from 'react' ;export default Class Profile extends React.Component {    // render 是这个组件渲染的Vitrual DOM结构    render() {        return (            
     
                
                      
      
my name is {
   this.props.name}
                
      
my age is {
   this.props.age}
            
     
        )    }}

用这种方式，就实现了一个React的组件，在其他的组件中，可以像HTML标签一样引用它。有了组件以后，可以使用React提供的另外一个库ReactDOM把这个组件挂载到DOM节点上。

// app.jsximport  { render } from 'react-dom';import Profile from './profile';render(
     , document.getElementById('app'));// 或者可以使用...属性拓展const props = {    name: 'lewis',    age: 26};render(
     , document.getElementById('app'));

 

state状态:

　　state是组件内部的属性。组件本身是一个状态机，它可以在constructor中通过this.state直接定义它的值，然后根据这此值来渲染不同的UI。当state的值发生改变时，可以通过this.setState方法让组件再次调用render方法来渲染新的UI。

//Profile.jsxexport default class Profile extends React.Component {  constructor (props) {    super (props);    this.state = {      liked: 0    };    this.likedCallback = this.likedCallback.bind(this);  }  likedCallback() {    let liked = this.state.liked;    liked++;    this.setState({      liked    });  }  render() {    return (      
       
        
        
我的名字叫{
     this.props.name}
        
        
我今年{
     this.props.age}
        
        点赞        
        
总点赞数：{
     this.state.liked}
      
       
    )  }}

　　和上面描述的一样，在constructor中添加this.state的定义，每次单击按钮以后调用回调函数，给当前liked值加1,然后更新this.setState完成UI的重新渲染。因为在ES6 class 类型的component组件声明方式中，不会把一些自定义的callback函数绑定到实例上，所以需要手动在constructor里面绑定。

this.likedCallback = this.likedCallback.bind(this);