这是我参加「日新计划 8 月更文应战」的第18天，点击查看活动概况

组件通讯介绍

要么出众，要么出局。 —— 我是小晨，今日学习React组件通讯

组件是独立且封闭的单元，默许情况下，只能运用组件自己的数据。在组件化过程中，咱们将一个完整的功用拆分成多个组件，以更好的完结整个运用的功用。而在这个过程中，多个组件之间不可避免的要同享某些数据。为了完成这些功用，就需要打破组件的独立封闭性，让其与外界沟通，这个过程便是组件通讯

组件的props（★★★）

基本运用

  • 组件时封闭的，要接受外部数据应该经过props来完成
  • props的效果：接纳传递给组件的数据
  • 传递数据：给组件标签添加特点

React进阶学习——React组件通讯

  • 接纳数据：函数组件经过 参数 props接纳数据，类组件经过 this.props接纳数据

    • 函数组件获取

React进阶学习——React组件通讯

-   类组件获取

React进阶学习——React组件通讯

特点

  • 能够给组件传递恣意类型的数据
  • props是只读特点，不能对值进行修改
  • 留意：运用类组件时，假如写了结构函数，应该将props传递给super(),不然，无法在结构函数中获取到props，其他的当地是能够拿到的

React进阶学习——React组件通讯

组件通讯的三种方式（★★★）

父组件传递数据给子组件

  • 父组件供给要传递的state数据
  • 给子组件标签添加特点，值为state中的数据
  • 子组件中经过props接纳父组件中传递的数据

React进阶学习——React组件通讯

子组件传递数据给父组件

  • 利用回调函数，父组件供给回调，子组件调用，将要传递的数据作为回调函数的参数
  • 父组件供给一个回调函数，用来接纳数据
  • 将该函数作为特点的值，传递给子组件

React进阶学习——React组件通讯

  • 子组件经过props调用回调函数

React进阶学习——React组件通讯

兄弟组件传递

  • 将同享状况(数据)提高到最近的公共父组件中，由公共父组件办理这个状况
  • 这个称为状况提高
  • 公共父组件职责：1. 供给同享状况 2.供给操作同享状况的办法
  • 要通讯的子组件只需要经过props接纳状况或操作状况的办法

React进阶学习——React组件通讯

示例demo

  • 界说布局结构，一个Counter里边包含两个子组件，一个是计数器的提示，一个是按钮
class Counter extends React.Component {
  render() {
    return (<div>
      <Child1 />
      <Child2 />
    </div>
     )
   }
}
class Child1 extends React.Component {
  render() {
    return (
      <h1>计数器：</h1>
     )
   }
}
class Child2 extends React.Component {
  render() {
    return (
      <button>+1</button>
     )
   }
}
  • 在父组件里界说同享状况，把这个状况传递给榜首个子组件
class Counter extends React.Component {
  // 供给同享的状况
  state = {
    count: 0
   }
  render() {
    return (<div>
       {/* 把状况供给给榜首个子组件 */}
      <Child1 count={this.state.count}/>
      <Child2 />
    </div>
     )
   }
}
  • 在榜首个子组件里边就能经过props获取到
class Child1 extends React.Component {
  render() {
    return (
      <h1>计数器：{this.props.count}</h1>
     )
   }
}
  • 在父组件中供给同享办法，经过特点传递给第二个子组件，便利第二个子组件来进行调用
  // 供给同享办法
  onIncrement = (res) => {
    // 只需第二个子组件调用了这个函数，就会履行里边代码
    this.setState({
      count: this.state.count + res
     })
   }
  render() {
    return (<div>
       ...
       {/* 把同享办法供给给第二个子组件 */}
      <Child2 onIncrement={this.onIncrement} />
    </div>
     )
   }
  • 在第二个子组件里边经过props来获取到对应函数，然后进行调用
class Child2 extends React.Component {
  handleClick = () => {
    // 这儿一旦调用，就会履行父组件里边 onIncrement函数
    this.props.onIncrement(2)
   }
  render() {
    return (
      <button onClick={this.handleClick}>+</button>
     )
   }
}

Context（★★★）

假如呈现层级比较多的情况下（例如：爷爷传递数据给孙子），咱们会运用Context来进行传递

效果： 跨组件传递数据

运用过程

  • 调用 React.createContext() 创立 Provider(供给数据) 和 Consumer(消费数据) 两个组件

React进阶学习——React组件通讯

  • 运用Provider 组件作为父节点

React进阶学习——React组件通讯

  • 设置value特点，表明要传递的数据

React进阶学习——React组件通讯

  • 哪一层想要接纳数据，就用Consumer进行包裹，在里边回调函数中的参数便是传递过来的值

React进阶学习——React组件通讯

小结

  • 假如两个组件相隔层级比较多，能够运用Context完成组件通讯
  • Context供给了两个组件：Provider 和 Consumer
  • Provider组件： 用来供给数据
  • Consumer组件： 用来消费数据

props进阶

children特点

  • children特点： 表明组件标签的子节点，当组件标签有子节点时，props就会有该特点
  • children特点与普通的props一样，值能够使恣意值（文本、react元素、组件、甚至是函数）

React进阶学习——React组件通讯

props校验（★★★）

  • 关于组件来说，props是外来的，无法保证组件运用者传入什么格局的数据，简单来说便是组件调用者或许不知道组件封装着需要什么样的数据
  • 假如传入的数据不对，或许会导致报错
  • 关键问题：组件的运用者不知道需要传递什么样的数据
  • props校验：答应在创立组件的时候，指定props的类型、格局等

React进阶学习——React组件通讯

  • 效果：捕获运用组件时由于props导致的过错，给出明确的过错提示，添加组件的健壮性

React进阶学习——React组件通讯

运用过程

  • 安装包 prop-types (yarn add prop-types | npm i props-types)
  • 导入prop-types 包
  • 运用组件名.propTypes={} 来给组件的props添加校验规则
  • 校验规则经过PropTypes目标来指定

React进阶学习——React组件通讯

常见的束缚规则

  • 创立的类型： array、bool、func、number、object、string
  • React元素类型：element
  • 必填项：isRequired
  • 特定结构的目标： shape({})
  • 更多的束缚规则

React进阶学习——React组件通讯

props的默许值

  • 场景：分页组件 -> 每页显示条数

React进阶学习——React组件通讯

总结

本篇文章讲述父子组件之间的通讯、兄弟组件之间的通讯，而且怎样添加props校验。