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