react 单项数据流

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 = [] //传递过来是只读(单项数据流)不能修改
    }