单向数据流和组件通信

react的编程思想是严谨周密的,约束了花式操作,确保在使用react构建项目的时候不会出现太多问题


一、单向数据流

  • 规范数据的流向:数据只能通过props由外层组件(父组件)向内层组件(子组件)进行传递和更新
  • 作用:降低了组件间通信的耦合度,方便debug(直接从props中找)

props只能一层层传递,不能隔代传递, context能隔代通信

二、子组件和父组件通行

1、原理:父组件中定义函数,通过props传递给子组件,子组件调用这个函数并传参,
父组件就可以通过形参拿到子组件的数据

2、react的父子组件间通信规则:

*父传子: 父组件通过props传参呗……*
*子传父 : 父组件通过props传参呗……*

依然符合单向数据流的概念,无非就是把函数当作参数传递下去

class Child extends React.Component{
  data = '我是子组件中的data'
  render(){
    this.props.getChildData(this.data);
    return <div>我是Child组件</div>
  }
}
class Parent extends React.Component{
  childData=null
  getChildData = (data)=>{
    this.childData = data;
    console.log(data);
  }
  render(){
  return <Child getChildData = { this.getChildData } />
  }
}
console.log(<Parent />)

  

posted @ 2019-10-31 15:14  alisa.huang  阅读(164)  评论(0编辑  收藏  举报