组件中的数据和数据流《二》

回顾篇: 组件通信
单向数据流
总结

1、组件之间数据传输:

1.1 父组件通过porps传递数据至子组件

案例:

const Chirld = (props) => {
  return <div>Chirld props :{props.name}</div>;
};

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "old name"
    };
  }

  render() {
    return (
      <div>
        Parent Component state name : {this.state.name}
        <Chirld name={this.state.name}></Chirld>
        <button onClick={() => this.setState({ name: "new name!" })}>
          change Parent name
        </button>
      </div>
    );
  }
}
render(<Parent></Parent>, document.getElementById("root"));

1.2 子组件通过porps 回调函数传递数据至父组件

案例:

class Chirld extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Chirld name"
    };
  }


  render() {
    return (
      <div>
        Chirld Component state name : {this.state.name}
        <button onClick={() => this.props.change('change Chirld name')}>
          change Chirld name
        </button>
      </div>
    );
  }
}

class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: "Parent name"
    };
  }

  changeName(newName) {
    this.setState({
      name: newName
    });
  }
  render() {
    return <div>Parent Component state name : {this.state.name}
    <Chirld name={""} change={(newName) => this.changeName(newName)}></Chirld>    
    </div>;
  }
}


render(
  <Parent>
  </Parent>,
  document.getElementById("root")
);

2、单向数据流

数据绑定是建立在应用UI和其他数据之间联系的过程(例如,因为应用数据绑定的用户界面UI,当应用数据发生改变时,用户界面也会改变)

数据流是一种思考数据绑定的方法,数据是如何流经应用的不同部分.
React中,数据流是单向的.这就意味实体间的流动不是水平的,而是建立了一个层次结构,可以通过组件传递数据,但是如果不传递属性,就不能触及和修改其他组件的状态和属性,也无法修改父组件中的数据.

上面案例已经介绍了,可以通过回调函数将时间传回层次结构的上层.当父组件接收到子组件的回调函数时,它可以修改其数据并将修改的数据传递给子组件.
即便是对于有回调函数的情况,数据总体上仍是向下流动的并由向下传递该数据的父组件决定.这就是为什么我们称React中的数据流是单向的

单向数据流在构建UI时特别有用,因为他让思考数据在应用中的流动方式变得更简单

某些程度上避免这个层次结构听上去也很不错,因为那样的话就可以从应用的任何部分随意修改想要修改的东西,但实际上这样往往可能造成困难的调试情况,后续章节将探索Flux和Redux这样的架构模式,它允许维护单向数据流范式的同时协调跨组件或跨应用的行动

下一章:
组件中渲染和生命周期方法

最后编辑于：2020.12.11 10:41:37