react之组件通信

头像
THIS
    阅读 10 分钟

    前言：

          最新在做react的B端项目、因为项目中没有用到Redux等数据管理库、所以涉及到了很多组件之前的数据传递和嵌套组件如何传递的方式，温故而知新 特此整理记录一下。

    常见的组建通信的方式：

    • 父子组件通信
    • 子父组件通信
    • 兄弟组件通信
    • 爷孙通信（嵌套组件）
    • 等等

    代码环境：

    react: ^16.13.0

    react-dom:^16.8.2

    父子组件通信:

    通常来说是父组件通过props、refs等方式来调用子组件的方法和属性等；

    props: 子组件接受父组件的值进行视图更新

    class 组件：

    import React, { Component } from 'react'

// 子组件
class Child extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    const { mun } = this.props;
    return (
      <>
        这里是child子组件：
        <p>{ mun }</p>
      </>
    )
  }
}

// 父组件
class Parent extends Component {
  constructor(props) {
    super(props)
    this.state = {
      mun:1
    }
  }

  handleParent = () => {
    this.setState({
      mun: this.state.mun + 1
    })
  }

  render() {
    const { mun } = this.state
    return (
      <>
        <button onClick={this.handleParent}>我是父组件的按钮。你可以点击我</button>
        <br />

        <Child mun={mun} />
      </>
    )
  }
}

export default Parent

    Hooks组件：

    import React, { useState } from 'react'
const Child = (props) => {

  const { mun } = props;
  return (
    <>
      这里是child子组件：
      <p>{ mun }</p>
    </>
  )
}


const Parent = () =>{
  const [mun, setMun] = useState(0)

  const handleParent = () => {
    setMun((value) => {
      return value + 1
    })
  }

  return (
    <>
      <button onClick={handleParent}>我是父组件的按钮。你可以点击我</button>
      <br />

      <Child mun={mun} />
    </>
  )
}

export default Parent

    refs：父组件通过声明ref拿到子组件的对象、进行操作子组件的对象方法

    class 组件：

    import React, { Component, createRef } from 'react'

// 子组件
class Child extends Component {
  constructor(props) {
    super(props)
    this.state = {
      mun:1
    }
  }

  // 子组件累加累加
  accumulation = () => {
    this.setState({
      mun: this.state.mun + 1
    })
  } 

  render() {
    const { mun } = this.state
    return (
      <>
        这里是child子组件：
        <p>{ mun }</p>
      </>
    )
  }
}


// 父组件
class Parent extends Component {
  constructor(props) {
    super(props)

    // 通过ref控制
    this.createRef = createRef()
    this.state = {}
  }

  handleParent = () => {
    this.createRef && this.createRef.current.accumulation()
  }

  render() {
    return (
      <>
        <button onClick={this.handleParent}>我是父组件的按钮。你可以点击我</button>
        <br />

        <Child ref={this.createRef} />
      </>
    )
  }
}

export default Parent

    Hooks 组件：

    注意：在hooks中需要通过forwardRef转发获取ref的值，然后通过useImperativeHandle向父组件抛出子组件的方法。

    import React, { useRef, useState, useImperativeHandle, forwardRef } from 'react'

const Child = forwardRef((_, ref) => {

  const [mun, setMun] = useState(0)

  // 累加方法
  const accumulation = () => {
    setMun((value) => {
      return value + 1
    })
  }
  
  // 给父组件抛出方法
  useImperativeHandle(ref, () => ({
    accumulation,
  }), [accumulation]);

  return (
    <>
      这里是child子组件：
      <p>{ mun }</p>
    </>
  )
})

const Parent = () =>{
  const ChildRef = useRef(null);

  const handleParent = () => {
    ChildRef.current && ChildRef.current.accumulation()
  }

  return (
    <>
      <button onClick={handleParent}>我是父组件的按钮。你可以点击我</button>
      <br />

      <Child ref={ChildRef} />
    </>
  )
}

export default Parent

    子父组件通信：

    子组件通过CallBack回调函数的方式来拿到父组件的方法或者属性等

    Class 组件：

    import React, { Component, createRef } from 'react'

// 子组件
class Child extends Component {
  constructor(props) {
    super(props)
    this.state = {
      mun:0
    }
  }

  // 子组件累加累加
  accumulation = () => {
    const { handleParent } = this.props
    const { mun } = this.state

    this.setState({
      mun:this.state.mun + 1
    },() => {
      handleParent(this.state.mun)
    })
  } 

  render() {
    const  { mun } = this.props
    return (
      <>
        这里是child子组件：
        {/* <p>{ mun }</p> */}
        <button onClick={this.accumulation}>我是子组件的按钮、可以点击我</button>
      </>
    )
  }
}


// 父组件
class Parent extends Component {
  constructor(props) {
    super(props)

    // 通过ref控制
    this.ChildRef = createRef()
    this.state = {
      getChildmun:0
    }
  }

  handleParent = (_mun) => {
    this.setState({
      getChildmun:_mun
    })
  }

  render() {
    const { getChildmun } = this.state
    return (
      <>
        <h2>我是父组件</h2>
        <p>子组件控制的值：{ getChildmun }</p>
        <br />
        <Child handleParent={this.handleParent} />
      </>
    )
  }
}

export default Parent

    Hooks 组件：

    import React, { useState, useEffect } from 'react'

const Child = (props) => {
  const { handleParent } = props;
  const [mun,setMun] = useState(0)

   // 子组件累加累加
  const accumulation = () => {
    setMun((value) => {
      return value + 1
    })
  } 

  useEffect(() => {
    if(mun !== 0) {
      handleParent(mun)
    }
  }, [mun]);

  return (
    <>
      这里是child子组件：
      <button onClick={accumulation}>我是子组件的按钮、可以点击我</button>
    </>
  )
}



const Parent = () =>{
  const [getChildmun,setChildmun] = useState(0);

  return (
    <>
        <h2>我是父组件</h2>
        <p>子组件控制的值：{ getChildmun }</p>
        <br />
        <Child handleParent={(mun) => setChildmun(mun)} />
    </>
  )
}

export default Parent

    兄弟组件通信：

    兄弟组件通信一般都是在一个父组件下平级的两个兄弟组件、利用父组件当中介进行传递

    Class 组件：

    import React, { Component, createRef } from 'react'

// 子组件1
class Child1 extends Component {
  constructor(props) {
    super(props)
    this.state = {
      mun:0
    }
  }

  render() {
    const { brother } = this.props

    return (
      <>
        <h2>我是Child1组件：{brother}</h2>
      </>
    )
  }
}

// 子组件1
class Child2 extends Component {
  constructor(props) {
    super(props)
    this.state = {
      mun:0
    }
  }

  // 改变自己的值、通过父组件传递
  accumulation = () => {
  const { brotherCallback } = this.props
    
   this.setState({
    mun:this.state.mun + 1
   }, () => {
    brotherCallback(this.state.mun)
   })
  } 

  render() {
    const  { mun } = this.props
    return (
      <>
        <h2>我是Child2组件：</h2>
        <button onClick={ this.accumulation }>点击我 改变[Child1]组件的值</button>
      </>
    )
  }
}

// 父组件
class Parent extends Component {
  constructor(props) {
    super(props)

    // 通过ref控制
    this.ChildRef = createRef()
    this.state = {
      brother:0
    }
  }

  // 利用中介的方式
  brotherCallback = (mun) => {
    this.setState({
      brother:mun
    })
  }

  render() {
    const { brother } = this.state 
    return (
      <>
        <h2>我是父组件</h2>
        <hr />
        <Child1 brother={brother} />
        <hr />
        <Child2 brotherCallback={this.brotherCallback}/>
      </>
    )
  }
}

export default Parent

    Hooks 组件：

    import React, { useState,useEffect } from 'react'

const Child1 = (props) => {
  const { brother } = props;
  return (
    <>
       <h2>我是Child1组件：{brother}</h2>
    </>
  )
}

const Child2 = (props) => {
  const [mun, setMun] = useState(0)
  const { brotherCallback } = props

  // 改变自己的值、通过父组件传递
  const accumulation = () => {
    setMun((value) => {
      return value + 1
    })
  } 

  useEffect(() => {
   if(mun !== 0 ) {
    brotherCallback(mun)
   }
  }, [mun])

  return (
    <>
      <h2>我是Child2组件：</h2>
      <button onClick={accumulation }>点击我 改变[Child1]组件的值</button>
    </>
  )
}

const Parent = () => {
  const [brother,setBrother] = useState(0);
  return (
    <>
       <h2>我是父组件</h2>
        <hr />
        <Child1 brother={brother} />
        <hr />
        <Child2 brotherCallback={(mun) => setBrother(mun)}/>
    </>
  )
}

export default Parent

    (爷孙组件)嵌套组件：

    嵌套组件其实也可以采用父子组件的传递方式、但是如果层级过深显然不好维护，所以这里推荐采用Context进行维护数据源的状态

    详情请看：Context文档描述的很详细。

    Class 组件：

    import React, { Component, createRef } from 'react'

// 后期可以把他单独放在一个js文件维护
const ThemeContext = React.createContext();

// 孙子组件
class Grandson extends Component{
  constructor(props) {
    super(props)
    this.state = {}
  }

  static contextType = ThemeContext;
  
  shouting = () => {
    const { grandsonCallback } = this.context
    grandsonCallback({
      massge:"我累了、毁灭吧"
    })
  }

  render() {
    const { parentObj } = this.context
    return (
      <>
       <h2>我是孙子组件</h2>
       <p>接收的值：{parentObj.name} 年龄{parentObj.age}岁</p>
       <button onClick={this.shouting}>隔空喊话</button>
      </>
    )
  }
}

// 儿子组件
class Child extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }

  render() {
    return (
      <>
       <h2>我是儿子组件</h2>
       <hr />
       <Grandson />
      </>
    )
  }
}

// 父组件
class Parent extends Component {
  constructor(props) {
    super(props)

    this.state = {
      parentObj:{
        name:"我是你爷爷",
        age:88
      },
      // 接受孙子组件的数据
      grandson:{}
    }
  }

  grandsonCallback = (data) => {
    this.setState({
      grandson:data
    })
  }
  render() {
    const { parentObj, grandson } = this.state;
    return (
      <>
        <h2>我是父组件</h2>
        <p>{( grandson && grandson.massge ) ? grandson.massge : '' }</p>
        <hr />
        <ThemeContext.Provider value={ { parentObj, grandsonCallback: this.grandsonCallback } }>
          <Child />
        </ThemeContext.Provider>
      </>
    )
  }
}

export default Parent

    Hooks 组件：

    import React, { useState, useContext } from 'react'

// 后期可以把他单独放在一个js文件维护
const ThemeContext = React.createContext();

const Grandson = () => {
  const context = useContext(ThemeContext)
  const { parentObj, grandsonCallback } = context;

  const shouting = () => {
    grandsonCallback({
      massge:"我累了、毁灭吧"
    })
  }

  return (
    <>
     <h2>我是孙子组件</h2>
     <p>接收的值：{parentObj.name} 年龄{parentObj.age}岁</p>
     <button onClick={shouting}>隔空喊话</button>
    </>
  )
}

const Child = () => {
  return (
    <>
      <h2>我是儿子组件</h2>
      <hr />
      <Grandson />
    </>
  )
}

const Parent = () =>{
  const [grandson, setGrandson] = useState({});
  const [parentObj, setParentObj] = useState(
  {
    name:"我是你爷爷",
    age:88
  });

  const grandsonCallback = (data) => {
    setGrandson(data)
  }

  return (
    <>
      <h2>我是父组件</h2>
      <p>{( grandson && grandson.massge ) ? grandson.massge : '' }</p>
      <hr />
      <ThemeContext.Provider value={ { parentObj, grandsonCallback } }>
        <Child />
      </ThemeContext.Provider>
    </>
  )
}

export default Parent

    最后

         其实在常见的组件通信中，以上的方式绰绰有余、但是面对复杂的大型项目中还是推荐采用redux这样的状态存储对象来统一管理、如果redux灵活性不高，这里也推荐采用dva进行管理、就像它的特性一样：快速上手、易学易用。

    javascriptreact前端html5typescript
    THIS
    765 声望9 粉丝

    多读书、多看报、少吃零食、多睡觉

    « 上一篇
    前端内练基础-你应该知道的数据结构之栈和队列
    下一篇 »
    前端内练基础-你应该知道的数据结构之链表

    引用和评论

    推荐阅读
    头像
    前端内练基础-你应该知道的数据结构之链表

    THIS阅读 1.4k

    头像
    2025年最新反编译微信小程序的教程及工具

    TANKING赞 9阅读 6.5k

    头像
    手写一个动态海洋和天空效果的vue hooks

    夕水赞 7阅读 2.1k

    头像
    你可能不知道的图片加载相关知识

    夕水赞 7阅读 5.4k

    头像
    原生JS大揭秘—JS代码执行原理解刨

    Damon赞 6阅读 5.8k评论 2

    头像
    使用CSS给标题添加书名号并超出省略

    XboxYan赞 3阅读 2.6k

    头像
    原生electron起步-从零到一完成构建和打包

    兔子先森赞 3阅读 3.5k评论 1

    0 条评论
    得票最新