單向數據流和組件通訊

react的編程思想是嚴謹周密的,約束了花式操做,確保在使用react構建項目的時候不會出現太多問題javascript


1、單向數據流java

  • 規範數據的流向:數據只能經過props由外層組件(父組件)向內層組件(子組件)進行傳遞和更新
  • 做用:下降了組件間通訊的耦合度,方便debug(直接從props中找)

props只能一層層傳遞,不能隔代傳遞, context能隔代通訊react

2、子組件和父組件通行編程

一、原理:父組件中定義函數,經過props傳遞給子組件,子組件調用這個函數並傳參,
父組件就能夠經過形參拿到子組件的數據函數

二、react的父子組件間通訊規則:this

*父傳子: 父組件經過props傳參唄……*
*子傳父 : 父組件經過props傳參唄……*debug

依然符合單向數據流的概念,無非就是把函數看成參數傳遞下去blog

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 />)
相關文章
相關標籤/搜索