react的组件通信

1. 父子通信

   1. 父组件将一个数据传递给子组件，但是这个数据只有父组件有权利更改，子组件不可以
      代码：

       import React,{ Component,Fragment } from 'react'
    
    class Father extends Component {
        constructor () {
            super()
            this.state ={
                name: 'xiaolongbao'
            }
        }
        changname = () => {
            this.setState({
                name: 'baolongxiao'
            })
        }
        render() {
            let { name } = this.state
            return (
                <Fragment>
                    <h3>father</h3>
                    <button onClick = { this.changname }>点击</button>
                    <Son name = { name }></Son>
                </Fragment>
            )
        }
    }
    
    class Son extends Component {
        render() {
            let { name } = this.props
            return (
                <Fragment>
                    <h3>son</h3>
                    <p> { name } </p>
                </Fragment>
            )
        }
    }
    export default Father
   

   2. ref链绑定

      1. ref = “组件名称（son）”
      2. ref = { el => this.el = el} 如果是一个函数，这里的el指的就是当前组件 【推荐】
         代码：

        import React,{ Component,Fragment } from 'react'
        class Father extends Component {
            changname = () => {
                this.refs.son.setState({
                    name: 'baolongxiao'
                })
            }
            render() {
                return (
                    <Fragment>
                        <h3>father</h3>
                        <button onClick = { this.changname }>点击</button>
                        <Son ref = "son"></Son>
                    </Fragment>
                )
            }
        }
        
        class Son extends Component {
            constructor () {
                super()
                this.state ={
                    name: 'xiaolongbao'
                }
            }
            render() {
                let { name } = this.state
                return (
                    <Fragment>
                        <h3>son</h3>
                        <p> { name } </p>
                    </Fragment>
                )
            }
        }
        export default Father
      

2. 子父通信
   父组件传递一个方法给子组件
   代码：

   	  import React,{ Component,Fragment } from 'react'
   	class Father extends Component {
   	    constructor () {
   	        super()
   	        this.state ={
   	            name: 'xiaolongbao'
   	        }
   	    }
   	    changname = () => {
   	        this.setState({
   	            name: 'baolongxiao'
   	        })
   	    }
   	    render() {
   	        let { name } = this.state
   	        return (
   	            <Fragment>
   	                <h3>father</h3>
   	                
   	                <Son name = { name } changname = { this.changname }></Son>
   	            </Fragment>
   	        )
   	    }
   	}
   	
   	class Son extends Component {
   	    render() {
   	        let { name,changname } = this.props
   	        return (
   	            <Fragment>
   	                <h3>son</h3>
   	                <button onClick = { changname }>点击</button>
   	                <p> { name } </p>
   	            </Fragment>
   	        )
   	    }
   	}
   	export default Father
   

3. 跨组件通信（context）

   • 传统的写法
     代码：

    	import React, { Component,Fragment } from 'react'
   class GrandFather extends Component {
     constructor () {
       super()
       this.state = {
         money: 10000
       }
     }
   
     render () {
       return (
         <Fragment>
           <h3> grand-father 组件 </h3>
           <Father money = { this.state.money }></Father>
         </Fragment>
       )
     }
   }
   
   class Father extends Component {
     render () {
       return (
         <Fragment>
           <h3> father 组件  </h3>
           <Son money = { this.props.money }></Son>
         </Fragment>
       )
     }
   }
   class Son extends Component {
     render () {
       return (
         <Fragment>
           <h3> son 组件  </h3>
           <p> 爷爷给了我： { this.props.money } </p>
         </Fragment>
       )
     }
   }
   export default GrandFather
   

   原先的跨组件传递要一级一级的传递数据，这种形式很是低效，context的出现解决了这个低效的方案

   context 使用步骤：

   1. 创建context
      const MoneyContext = React.crateContext(默认值)

   2. 使用 创建的Context包裹目标组件的父组件

     <MoneyContext.Provider value = "20000">
       <Father></Father>
     </MoneyContext.Provider>
   

   3. 在目标组件中定义一个类属性 , 这个类属性叫做 contextType

   4. 直接在目标组件中 通过 this.context 就可以获得数据了

       class Son extends Component {
         static contextType = MoneyContext
         render () {
           return (
             <Fragment>
               <h3> son 组件  </h3>
               <p> 爷爷给了我： { this.context } </p>
             </Fragment>
           )
         }
       }
   

示例代码：

	import React, { Component,Fragment } from 'react'
	
	const MoneyContext = React.createContext('10000')
	
	class GrandFather extends Component {
	
	  render () {
	    return (
	      <Fragment>
	        <h3> grand-father 组件 </h3>
	        <MoneyContext.Provider value = "20000">
	            <Father></Father>
	        </MoneyContext.Provider>
	      </Fragment>
	    )
	  }
	}
	
	class Father extends Component {
	  render () {
	    return (
	      <Fragment>
	        <h3> father 组件  </h3>
	        <Son></Son>
	      </Fragment>
	    )
	  }
	}
	class Son extends Component {
	    static contextType = MoneyContext
	  render () {
	    return (
	      <Fragment>
	        <h3> son 组件  </h3>
	        <p> 爷爷给了我： { this.context } </p>
	      </Fragment>
	    )
	  }
	}
	export default GrandFather