React 17 父子组件通信方式 参数默认值 参数类型限制

1.父组件给子组件传递参数

//父组件



//子组件

export default function Header(props) {

    console.log(props) // {name: 'czy', phone: 183*******}

    return (
Header
)

}

子组件设置参数默认值

export default function Header(props) {

    console.log(props) // {name: 'czy', phone: 183*******, age: 0}

    return (
Header
)

}

Header.defaultProps = {

    name: 'czy',

    age: 0

}

函数式子组件参数类型限制

• 安装插件 npm i prop-types

• 引入插件 import ReactTypes from 'prop-types'

• 添加校验

    import ReactTypes from 'prop-types'

    export default function Header(p) {

        console.log(p)

        return (
Header
)

    }

    Header.defaultProps = {

        name: 'czy',

        age: 3

    }

    Header.propTypes = {

        name: ReactTypes.string,

        age: ReactTypes.number,

        phone: ReactTypes.number,

    }

类子组件添加默认参数与参数类型限制

• 安装插件 npm i prop-types

• 引入插件 import ReactTypes from 'prop-types'

• 添加校验

    import ReactTypes from 'prop-types'

    export default class Main extends React.Component {

    render() {

        console.log(this.props)

        return (
Main
)

    }

    static defaultProps = {

        content: "content"

    }

    static propTypes = {

        type: ReactTypes.string,

    }

}

2.子父组件之间的通讯

• 原理：父组件给子组件传递一个方法，子组件调用父组件传递过来的方法并且传参从而达到子组件给父组件传递参数的效果

    父组件

    


    function setName(value) {

        console.log('setName', value)

        name = value

    }

    子组件

      {

        props.setName(name)

    }}>setName

3.跨组件通讯

• 通过父传子 子传孙一级一级传递

• 使用context方法一

  • 1.创建一个Context,解构出Provider, Consumer

  • 2.用Provider包裹住子组件

  • 3.在Provider上通过value生产数据给子组件

  • 4.在子组件中用Consumer消费父组件生产的数据

  
  
  
  export const {Provider, Consumer} = React.createContext({})
  
  子组件
  
  
  
  
  
   {
  
       (value)=>{
  
           return(
  
               
  {value.name}
  
           )
  
       }
  
   }
  
  
  
  

• 使用Context方法二

  • 1.创建一个Context,在创建的时候默认生产数据

  • 2.在子组件上添加静态方法

  • 3.在子组件上通过this.context.value消费数据

  • 4.局限于从父往子，无法从子到父，也无法在兄弟组件中使用

  
   
  
  const Context = React.createContext({name:'czy'})
  
  
  
  Son.contextType = Context
  
  

• Context注意点

  • 1.支持多个生产者和多个消费者

  • 2.如果是通过contextType则不支持多个消费者，因为会被后面的覆盖

• events 第三方库

  • 1.安装 npm i events

  • 2.导入 import {eventEmitter} from events

  • 3.创建全局eventBus const eventBus = new eventEmitter()

  • 4.爷爷在componentDidMount生命周期内注册事件监听：eventBus.addListener('say', this.aFn.bind(this))

  • 5.孙子eventBus.emitter(say, params)

  • 6.注意点，为了优化性能，在组件卸载（componentWillUnmount）的时候要移除事件监听eventBus.removeListener('say', this.aFn.bind(this))

eventBus.jsx
  // 全局事件总线
  import { EventEmitter } from "events";
  export default new EventEmitter() 


header.jsx
import eventBus from "./eventBus"
import React from "react"
export default class Header extends React.Component {
    say(name) {
        console.log(name)
    }
    render() {
        return (

        
)
    }
    componentDidMount() {
        // 获取参数监听
        eventBus.addListener('say', this.say.bind(this))
    }
}


footer.jsx
import eventBus from "./eventBus"
export default function Footer(props) {
    return (
        

            // 点击传递参数
             {
                eventBus.emit('say', 'czy')
            }}>emit
        
    );
}