react 单项数据流

React有一个概念叫做单项数据流React的小伙伴不太明白这个概念，还是拿出《小姐姐服务菜单》的Demo，比如我们可以直接把它放在父组件中this.state.list传如，以下代码：

在 React.js 在中间，数据从上到下流动（传输），即父组件可以使用它 state / props 通过 props 传递给它的子组件，但子组件不能修改 props - React.js 是单向数据流。如果子组件需要修改父组件状态（数据），则通过回调函数完成

<ul>     { 
                 this.state.list.map((item,index)=>{ 
                     return (                 <XiaojiejieItem                  key={ 
        index item}                   content={ 
        item}                 index={ 
        index}                 list={ 
        this.state.list}                 deleteItem={ 
        this.deleteItem.bind(this)}                 />             )         })     } </ul>  

事实上，这样传输没有问题。问题是你只能使用这个值，而不能修改它。如果您修改它，例如，我们将代码写成这样：

handleClick(){ 
             //关键代码——---------start     this.props.list=[]     //关键代码-----------end     this.props.deleteItem(this.props.index) } 

以下错误将报告；

TypeError: Cannot assign to read only property 'list' of object '#<Object>' 

意思就是list只读，单数据流。如果你想改变这里的值怎么办？其实上节课已经讲过了，就是传递父组件的方法。

    ///注意使用箭头函数 或者 事件.bind(this)     handleClick(){ 
                  // 拿到索引值        console.log(this.props.index)
        // 使用父组件传过来的删除 方法 给其对应的index参数
        this.props.deletItem(this.props.index)

        // this.props.list = [] //传递过来是只读(单项数据流)不能修改
    }