react----单向数据流

单向数据流，传递数据采用从上至下逐一传递的方法。

例：

        定义一个类组件，使网页显示App组件

class App extends React.Component{
       state={name:'jack',age:18}

       render(){
         return(
           <div>
              <h1>App组件</h1>
            </div>
         )
       }
     }

        运行结果如下：

         在App组件中添加一个方法组件C1并让其显示数据state

    function C1(props){
      console.log('C1',props);
      return(
        <div>
          <h2>C1</h2>
          <C2{...props}/>
          </div>
        
      )
    }
     class App extends React.Component{
       state={name:'jack',age:18}

       render(){
         return(
           <div>
              <h1>App组件</h1>
             {/* <C1 name={this.state.name} age={this.state.age}/>*/}
              <C1 {...this.state}/>

            </div>
         )
       }
     }

        使用挂载的方式让App组件中的数据传递到C1中

         在定义两个函数组件C2、C3，C2 从C1中获取props数据值，C3从C2中获取props数据值，这样就简单的实现了单向数据的传递

    function C1(props){
      console.log('C1',props);
      return(
        <div>
          <h2>C1</h2>
          <C2{...props}/>
          </div>
        
      )
    }
    function C2(props){
      console.log('C2',props);
      return(
        <div>
          <h2>C2</h2>
          <C3 {...props}/>
          </div>
      )
    }
    function C3(props){
      console.log('C3',props);
      return(
        <div><h2>C3</h2></div>
      )
    }
     class App extends React.Component{
       state={name:'jack',age:18}

       render(){
         return(
           <div>
              <h1>App组件</h1>
             {/* <C1 name={this.state.name} age={this.state.age}/>*/}
              <C1 {...this.state}/>

            </div>
         )
       }
     }

        运行结果如下：