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 = [] //傳遞過來是隻讀(單項數據流)不能修改
    }