React单向数据流（五）

父组件可以向子组件传值，但是子组件不能直接改变这个值。

父组件这五个子组件都会接收到list这个参数

image.png

假设 React 没有单向数据流

在子组件去改父组件传过来的list，

image.png

出现的效果：this.props.list = []; 删了list之后其他五个子组件的list也会跟着发生变化，一旦页面发生bug，就不太好定位，list被好多个组件所共用，到底是哪个组件改了list导致页面变化呢？

所以，React 要有单向数据流的概念
只允许父组件向子组件传递数据，但是，子组件绝对不能修改父组件传的数据，如果就是想修改怎么办？
让父组件传递给子组件一个方法：

 <TodoItem
          content={item}
          index={index}
          key={index}
          list={this.state.list}
          deleteItem={this.handleItemDelete}
        />

 //   删除项
  handleItemDelete (index) {
    console.log (index);
    // immutable  state 不允许我们做任何改变
    this.setState (prevState => {
      const list = [...prevState.list];
      list.splice (index, 1);
      return {
        list,
      };
    });
  }

在子组件去调用父组件传递的方法

 render () {
    const {content} = this.props;
    return (
      <div onClick={this.handleClick}>
        {content}
      </div>
    );
  }

  handleClick () {
    // 子组件如何调用父组件的方法来修改父组件的内容:把父组件的方法传给子组件，在创建子组件的时候再传递一个方法
    console.log (this.props.index);
    // 子组件被点击的时候，调用父组件传过来的deleteItem()方法，同时把父组件传过来的index传给这个方法
    const {deleteItem, index} = this.props;
    deleteItem (index);
  }

是子组件调用父组件的方法，最终是父组件的方法来对自己的内容进行改变的，这样维护起来就容易了，所有相关list的操作都在父组件这一个组件。