props和state

区别:

state和props的区别在于props是不可变的，而state可以根据与用户交互来改变，这就是为什么有些容器组件需要定义state来更新和修改数据，而子组件只能 用props来传递数据。

props的用法  name属性通过 this.props.name 来获取。

var Hello = React.createClass({
  render: function() {
    return <h1>Hello {this.props.name}</h1>;
  }
});
ReactDOM.render(
  <Hello name="zhangsan" />,
  document.getElementById('example')

state和props的组合使用

我们可以在父组件中设置state,并且在子组件上通过props将其传递到子组件上。

import React from "react"
import List  from "../../components/List/index" 

export default class Todo extends React.Component{
    //初始化state数据
    constructor(props,context){
        super(props,context);
        this.state = {
            todos :[]
        }
    }
    render(){
        return(
            <div>  
            //在List组件中,可以通过this.props.todos来获取这个底下state.todos这个数据
                <List todos={this.state.todos}/>
            </div>            
        )
    } 
}

state(状态)

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。
React里面,只需要更新组件的state,然后根据新的state重新渲染用户界面(不需要操作DOM)

this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

//初始化state数据
    constructor(props,context){
        super(props,context);
        this.state = {
            name:""
        }
    }

React组件API

设置状态：setState
替换状态：replaceState
设置属性：setProps
替换属性：replaceProps
强制更新：forceUpdate
获取DOM节点：findDOMNode
判断组件挂载状态：isMounted