React组件通信

父组件与子组件通信

// 父组件调用子组件的地方，添加自定义的属性
// 属性的值就是需要传递给子组件的值
// 如果属性的值是变量，boolean类型，number类型，对象，数组，函数，null，undefined
// 需要使用 {} 包裹

// 如果需要设置子组件的属性的默认值
//  不管是类组件还是函数式组件，可以在组件定义之后通过 Com.defaultProps 设置属性的默认值
//  但是如果子组件是类组件，还可以通过组件的静态的属性 static defaultProps 设置属性的默认值
// 如果需要验证子组件的属性的数据类型，需要借助于prop-types模块
//  通过 Com.propTypes = { key: PropTypes.数据类型 }
// 如果需要给该子组件的属性设定 多个数据类型时，
//  通过 Com.propTypes = { key: PropTypes.oneOfType([ PropTypes.类型1， PropTypes.类型2 ]) }

子组件与父组件通信

import React, { Component } from 'react'

class Child extends Component {
  render () {
    return (
      <button onClick = { () => {
        this.props.fn(10000)
      }}>传值给父组件</button>
    )
  }
}

// 子组件给父组件传值，实际上也是父组件给子组件传值
// 父传给子一个函数，该函数由父组件设定，由子组件调用，调用时传递的参数其实就是子组件传递给父组件的值
export default class componentName extends Component {
  getData = (val) => {
    console.log(val)
  }
  render() {
    return (
      <div>
        <Child fn = { this.getData } />
      </div>
    )
  }
}

跨组件通信

在react没有类似vue中的事件总线来解决这个问题，我们只能借助它们共同的父级组件来实现，将非父子关系装换成多维度的父子关系。react提供了context api来实现跨组件通信, React 16.3之后的contextapi较之前的好用。

import React, { Component } from 'react';

class Second extends Component {
  render () {
    return (
      <div>
        { this.props.theme } - { this.props.color }
      </div>
    )
  }
}
const First = (props) => {
  return (
    <div>
      <Second theme = { props.theme } color = { props.color } />
    </div>
  )
}
export default class App extends Component {
  state = {
    theme: 'dark',
    color: 'red'
  }
  render() {
    return (
      <div> 
        <First theme = { this.state.theme } color = { this.state.color }/>  
      </div>
    );
  }
}
 

import React, { Component } from 'react';
// 1.创建上下文对象
const ThemeContext = React.createContext()
const ColorContext = React.createContext()

// 3.后代组件获取祖先组件传递过来的值
// 如果是类组件,可以通过静态属性或者是 组件.contextType = 上下文对象，在render 函数内部通过this.context获取数据
// 如果遇到多个上下文对象，就显得无能为力
class Second extends Component {
  // static contextType = ThemeContext
  render () {
    return (
      <div>
        { this.context } - { this.props.color }
      </div>
    )
  }
}
Second.contextType = ThemeContext

const First = () => {
  return (
    <div>
      <Second/>
    </div>
  )
}
export default class App extends Component {
  state = {
    theme: 'dark',
    color: 'red'
  }
  render() {
    return (
      <div> 
        {/* 2.上下文对象的Provider 组件配合value属性完成祖先组件向后代组件传值 */}
        <ThemeContext.Provider value = { this.state.theme }>
          <ColorContext.Provider value = { this.state.color }>
            <First />  
          </ColorContext.Provider>
        </ThemeContext.Provider>
       
      </div>
    );
  }
}

复杂的非父子组件通信在react中很难处理，多组件间的数据共享也不好处理，在实际的工作中我们会使用flux、redux、mobx来实现