react快速入门(2)组件通讯这里先介绍react 由于公司内部技术栈主要为vue，本文主要是向公司内部实习生简单科

组件通讯

这里先介绍react 由于公司内部技术栈主要为vue，本文主要是向公司内部实习生简单科普react自己编写的简单资料

react常用的组件通讯方式，所有案例均为html引入cdn方式，快速编写

  <head>
    <!--   react-->
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <!--    ReactDOM-->
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
    <!--    babel-->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <!--    PropTypes-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prop-types/15.6.0/prop-types.js"></script>
    <!--    pubsub-js-->
    <script src="https://unpkg.com/pubsub-js"></script>
</head>

props

 props来传递 方法 state  -最基础的，属性加方法
<script> 
     class ReactComPa extends React.Component{
            state={
                data:'数据'
            }
            render(){
                return (
                    <div >
                        我是父组件            
                        <ReactComSon  data={this.state.data} handelSet={this.handelSet}></ReactComSon>
                    </div>
                )
            }
            handelSet=(e)=>{
                this.setState({
                    data:e
                })
            }
        }
        class ReactComSon extends React.Component{
            render(){
                return <div onClick={this.handelClick}>我是子组件{this.props.data}</div>
            }
            handelClick=()=>{
                this.props.handelSet('改数据了')
            }
        }
        ReactDOM.render(<ReactComPa></ReactComPa>,document.getElementById('reactId'))

</script>

发布订阅

例子为兄弟组件的交互

借用PubSub.js

  <script src="https://unpkg.com/pubsub-js"/>
  <script>      
      class ReactComPa extends React.Component{  
          render(){
              return (
                  <div>
                      <ReactComSon1></ReactComSon1>
                      <ReactComSon2></ReactComSon2>
                  </div>
              )
          }
      }
      class ReactComSon1 extends React.Component{
          state={
              data:''
          }
          render(){
              return <div>子组件1,收到子组件2{this.state.data}</div>
          }
          componentDidMount(){
              //subscribe回调接受两个参数，一个订阅的类型，一个订阅的数据
              PubSub.subscribe('sendData',(msg,data)=>{
                  this.setState({
                      data:data
                  })
              })
          }
      }
      class ReactComSon2 extends React.Component{     
          state={
              data:'发送的数据'
          }
          render(){
              return <div>子组件2</div>
          }
           componentDidMount(){
              PubSub.publish('sendData',this.state.data)
          }
      }
      ReactDOM.render(<ReactComPa></ReactComPa>,document.getElementById('reactId'))
      </script>

Context

 常用于后代多层级组件通讯，全局的数据，例如用户信息等
        常用的api
            createContext 
            Provider
            Consumer 
            contextType
    
    A包含B，B包含C组件，通过Provider注入，子组件组件通过Consumer或者contextType接收，
    const MyContext =React.createContext() //创建context对象
    
    class ReactComA extends React.Component{
        handelMyContext=(e)=>{
            this.setState({
                data:e
            })
        }
        state={
            data:'传递的数据',
            setMyContext:this.handelMyContext
        }   
        render(){
            console.log(this)
            return (
                <MyContext.Provider value={this.state}>
                    <ReactComB></ReactComB>
                </MyContext.Provider>
            )
        }
    }
    //Consumer 接收方式，可用于函数式以及类组件
    class ReactComB extends React.Component{
        render(){
            return (
                <div>
                    <ReactComC></ReactComC>
                    <MyContext.Consumer>
                        {
                            value=>{
                               return <span>B Consumer组件接收到的值{value.data}</span>
                            }
                        }
                    </MyContext.Consumer>
                </div>
            )
        }
    }
    //声明接收的方式，只能用于类组件
    class ReactComC extends React.Component{
        static contextType=MyContext;  //声明接收context
        render(){               
            return <div onClick={this.handelChangeContext}>C组件接收到的值{this.context.data}</div>
        }
        
        handelChangeContext=()=>{
             console.log(this)
             this.context.setMyContext('修改context数据')
        }
    }
    ReactDOM.render(<ReactComA></ReactComA>,document.getElementById('reactId'))