单向数据流和组件通信
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 />)