R_基础_4

1 props

------------------------------- 1 说明 -------------------------------------------

  1 作用: 接收外部数据   // 如父子组件传值等

  2 props 和 state 不要相互赋值   // 容易出 bug
  
  3 不要去修改 props 中数据的值



------------------------------- 2 props 包含项(常见) -------------------------------------------

  1 const {dispatch} = this.props   // Dva 数据流中 --> 派发任务的 API --> 被高阶函数修饰获取的

  2 import { connect } from 'dva'   // Dva 数据流中 --> 高阶函数 --> 然后即可, 接收 model 仓库中的数据了

  3 父子组件通信, 的自定义属性

  4 {props.children}   组件的子节点   // 类似 Vue 中的视图容器

2 组件通信

------------------------------- 1 说明 -------------------------------------------

  1 组件是独立且封闭的单元, 默认情况下只能使用组件自身的数据

  2 在组件化过程中, 我们将一个完整的功能, 拆分成多个组件, 共同实现这一功能

  3 在这个过程中, 多个组件之间不可避免的要共享某些数据, "组件通讯"就是为了实现这一功能的



------------------------------- 2 父子组件传值 -------------------------------------------

  1 <A1 msg=66/>   // 父组件中使用子组件实例时, 自定义属性, 传值给子组件

  2 const A1 = props => {console.log(props.msg)}   // 子组件的 props 可获取父组件传来的数据

  // 父组件调用子组件的时候, 会把数据传递给子组件, 子组件中即可展示父组件的数据



------------------------------- 3 子父组件传值 -------------------------------------------

  1 <A1 onTest={hh}/>   // 父组件中使用子组件实例时, 自定义属性, 传事件给子组件

  2 const A1 = props => {props.onTest(66)}   // 子组件中调用事件, 并传数据给, 这个父组件中的事件

  3 const hh = (data) => console.log(data)   // 父组件中的事件, 可通过形参接收到, 子组件传来的数据
  

3 业务逻辑

  1 父组件传值给子组件: <A1 msg=66/>

  2 子组件中想修改这个值: <A1 msg=66 onChange={this.hh} /> / hh = data => this.setState({mag: data})

  3 子组件传值: props.onChange(666)   // 然后就把, 父组件中的 msg 改为了 666, 同时也避免了修改 props 的数据的值