【 React 】React 组件之间如何通信?

相关文章:
React Context的使用方法
react Provider Consumer 使用方法

1. 是什么

我们将组件间通信可以拆分为两个词:

  • 组件
  • 通信

组件是vue中最强大的功能之一,同样组件化是React的核心思想

相比vue,React的组件更加灵活和多样,按照不同的方式可以分成很多类型的组件

而通信指的是发送者通过某种媒体以某种格式来传递信息到收信者以达到某个目的,广义上,任何信息的交通都是通信

组件间通信即指组件通过某种方式来传递信息以达到某个目的

2. 如何通信

组件传递的方式有很多种,根据传送者和接收者可以分为如下:

  • 父组件向子组件传递
  • 子组件向父组件传递
  • 兄弟组件之间的通信
  • 父组件向后代组件传递
  • 非关系组件传递

2.1 父组件向子组件传递

由于React的数据流动为单向的,父组件向子组件传递是最常见的方式

父组件在调用子组件的时候,只需要在子组件标签内传递参数,子组件通过props属性就能接收父组件传递过来的参数

javascript 复制代码
function EmailInput(props) {
    return (
        <label>
            Email: <input value={props.email} />
        </label> 
    );
 }
const element = <EmailInput email="123@qq.com" />;

2.2 子组件向父组件传递的

子组件向父组件通信的基本思路是,父组件向子组件传一个函数,然后通过这个函数的回调,拿到子组件传过来的值

父组件对应代码如下:

javascript 复制代码
//父组件代码
class Parents extends Component {
  constructor() {
    super();
    this.state = { price: 0 };
  }
  getPrice(e) {
    this.setState({price: e }); 
  }
  render() {
    return ( 
        <div>
            <div>price: {this.state.price}</div> {/*向子组件传入一个函数 */}
            <Child getPrice={this.getPrice.bind(this)} />
        </div> 
    ); 
  } 
}

子组件对应代码如下:

javascript 复制代码
//子组件代码
class Child extends Component {
    clickGoods(e) {
        // 在此函数中传入值
        this.props.getPrice(e); 
    }
    render() {
        return (
            <div>
                 <button onClick={this.clickGoods.bind(this, 100)}>goods1</button> 
                 <button onClick={this.clickGoods.bind(this, 1000)}>goods2</button>
            </div> 
        ); 
    }
 }

2.3 兄弟组件之间的通信

如果是兄弟组件之间的传递,则父组件作为中间层来实现数据的互通,通过使用父组件传递

javascript 复制代码
class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {count: 0} 
  }
  setCount = () => {
    this.setState({count: this.state.count + 1})
  }
  render() {
    return ( 
      <div> 
        <SiblingA count={this.state.count}/>
        <SiblingB onClick={this.setCount}/>
      </div> 
    ); 
  } 
}

2.4 父组件向后代组件传递

父组件向后代组件传递数据是一件最普通的事情,就像全局数据一样
使用context提供了组件之间通讯的一种方式,可以共享数据,其他数据都能读取对应的数据通过使用React.createContext创建一个context

javascript 复制代码
const PriceContext =React.createContext('price')

context创建成功后,其下存在Provider组件用于创建数据源,Consumer组件用于接收数据,使用实例如下:

Provider组件通过value属性用于给后代组件传递数据:

javascript 复制代码
<PriceContext.Provider value={100}>
</PriceContext.Provider>

如果想要获取Provider传递的数据,可以通过Consumer组件或者或者使用contextType属性接收,对应分别如下

javascript 复制代码
class MyClass extends React.Component {
    static contextType = PriceContext;
    render() {
        let price = this.context;
    /* 基于这个值进行渲染工作*/
    } 
}

Consumer 组件

javascript 复制代码
<PriceContext.Consumer> { /*这里是一个函数 */ }
{price => <div>price {price}</div> }
  </PriceContext.Consumer>

2.5 非关系组件传递

如果组件之间关系类型比较复杂的情况,建议将数据进行一个全局资源管理,从而实现通信,例如redux。关于redux的使用后续再详细介绍

3. 总结

由于React是单向数据流,主要思想是组件不会改变接收的数据,只会监听数据的变化,当数据发生变化时它们会使用接收到的新值,而不是去修改已有的值因此,可以看到通信过程中,数据的存储位置都是存放在上级位置中

相关推荐
Myli_ing28 分钟前
HTML的自动定义倒计时,这个配色存一下
前端·javascript·html
dr李四维1 小时前
iOS构建版本以及Hbuilder打iOS的ipa包全流程
前端·笔记·ios·产品运营·产品经理·xcode
I_Am_Me_1 小时前
【JavaEE进阶】 JavaScript
开发语言·javascript·ecmascript
雯0609~1 小时前
网页F12:缓存的使用(设值、取值、删除)
前端·缓存
℘团子এ1 小时前
vue3中如何上传文件到腾讯云的桶(cosbrowser)
前端·javascript·腾讯云
学习前端的小z1 小时前
【前端】深入理解 JavaScript 逻辑运算符的优先级与短路求值机制
开发语言·前端·javascript
前端百草阁2 小时前
【TS简单上手,快速入门教程】————适合零基础
javascript·typescript
彭世瑜2 小时前
ts: TypeScript跳过检查/忽略类型检查
前端·javascript·typescript
FØund4042 小时前
antd form.setFieldsValue问题总结
前端·react.js·typescript·html
Backstroke fish2 小时前
Token刷新机制
前端·javascript·vue.js·typescript·vue