从零开始学React-coderwhy React课程笔记（六）

类-函数组件-生命周期-组件拆分-嵌套-通讯

组件通信

父子组件通信

1.父组件传递给子组件

• 父组件在嵌套子组件时，通过属性 = 值的形式传入

• 子组件通过 props 参数接收父组件传递过来的数据

2.子组件传递给父组件

同样是通过 props 实现，先让父组件给子组件传一个回调函数，然后在子组件调用这个函数即可

父组件

import React, { Component } from "react";
import CounterButton from "./CounterButton";
​
export default class Counter extends Component {
  constructor(props){
    super(props)
    this.state = {
      counter: 0,
    }
  }
  
  changeCount(count){
    this.setState({
      counter: this.state.counter + count,
    })
  }
​
  render() {
    const {counter} = this.state 
    return (
      <>
        <h2>当前计数：{counter}</h2>
        <CounterButton addClick={ (count) => this.changeCount(count) } />
      </>
    );
  }
}
​

子组件

import React, { Component } from "react";
​
export default class CounterButton extends Component {
​
  addCount(count){
    const {addClick} = this.props
    addClick(count)
  }
​
  render() {
    return (
      <>
        <button onClick={() => this.addCount(1)}>+1</button>
        <button onClick={() => this.addCount(5)}>+5</button>
        <button onClick={() => this.addCount(10)}>+10</button>
      </>
    );
  }
}

非父子组件通信

祖孙组件传递，需要通过 props 属性一层层往下传递。那么，有没有什么办法可以直接实现数据的共享：React 提供的一个API： Context（上下文）。

Context 允许父组件向其下层无论多深的任何组件提供信息，而无需通过 props 显式传递。

如何使用 Context

1. 创建一个 Context 对象

   const MyContext = React.createContext(defaultValue);
   

   当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。

   如果向上没有找到 Provider，则使用 defaultValue 值

1. Context.Provider 提供 context

   <MyContext.Provider value={/* 某个值 */}>
   

   每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化；Provider 接收一个 value 属性，传递给消费组件；

1. 订阅 / 使用 context

   MyClass.contextType = MyContext;
   

   类组件使用 context 的方式，该 API 只支持订阅一个 context

函数组件使用 Context

使用Context.Consumer，该方法需要一个函数作为子元素（function as a child）。这个函数接收当前的 context 值，并返回一个 React 节点。

<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染*/}
</MyContext.Consumer>

当组件中需要使用多个 Context 时，也应该使用Context.Consumer。

具体细节请查阅官方文档：Context、使用 Context 传递深层参数

React 中的插槽

插槽的作用是使组件具有更强的通用性和灵活性。不是将组件的内容完全固定，而是可以灵活地插入想要的内容

props.children 实现插槽

每个组件内都可获取 props.children，包含组件的开始标签和结束标签之间的内容

获取到 children 之后，再通过索引取得传入的内容。但这种方法不建议使用，因为通过索引值获取传入的元素，对顺序比较敏感，相互对应比较麻烦。

使用 props 实现插槽

使用方法：直接用 props 属性传递一个 React 元素对象。类似于 Vue 里面的具名插槽