props与state的区别

父组件通过props向子组件传递数据。父组件通过item={item}这种方式向子组件传递数据，子组件通过this.props.item 来获取数据。

//父组件
<ul className="list">
   <todos.map((item,index)=>{
       return <Item item={item}/>   
  })}
</ul>
 
//子组件
class Item extends Component{
     render(){
       const item=this.props.item;
       return(
           <li className="item">{item}</li>
       )
   }
}
props是一个从外部传进组件的参数，由于React具有单向数据流，所以它的主要作用是从父组件向子组件传递数据，它是不可改变的。如果想要改变它，只能通过外部组件传入新的props来重新渲染子组件，否则子组件的props以及展现形式不会改变。

props除了可以传字符串、数字，还可以传数组，对象、甚至是回调函数。

 

state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，state是可以被改变的。state放改动的一些属性，比如点击选中，再点击取消。类似的这种属性就可以放到state里。

没有state的叫做无状态组件，多用props少用state，多写无状态组件。

class Item extends Component{
    constructor(props){
          super(props);
          this.state={
            selected:false;
         }
还有一点要特别注意，在修改state的值时，直接对它操作是不行的。

//无效的
this.state.selected=!this.state.selected;
必须通过setState()方法。当我们调用this.setState方法时，React会更新组件的数据状态state，并且重新调用render方法.

//有效
this.setState({
    selected:!this.state.selected
});
主要区别：state是组件自己管理数据，控制自己的状态，值是可以改变的;props是外部传入的数据参数，不可变；

 

补充：setState可以接受一个函数，函数的前两个蚕食，一个是以前的状态，一个是马上要改变的状态，新的。

this.setState((prevState, props) => ({
  counter: prevState.counter + props.increment
}));