react基础：组件通讯-父子、子父、同级传值

在react中想要了解组建通讯，首先要了解一个点，什么是props。

所谓props就是组件之间通讯的纽带，它也可以是组件中内置的一个属性，通过父级组件传入。在类组件中，可以直接通过this.props获取。

但需要注意的是：

1、props是不可变的。如果想要修改props则需要从传入props的组件中修改

2、props改变视图会重新渲染

那么了解之后，回到组件通讯：

（1）父子传值：

        在父组件的子组件标签上定义属性，在子组件里使用props接收。

父组件：

import React from "react";
import Son from "./Son";
class Father extends React.Component{
  constructor(){
    super();
    this.state={
      message:'我是父组件'
    }
  }

  render(){
    return (
      <React.Fragment>
          <Son values={this.state.message}></Son>
          <div>展示Father数据：{this.state.message}</div>
      </React.Fragment>
    )
  }
}
export default Father;

子组件：

import { Input } from "antd";
import React from "react";
class Son extends React.Component{
  constructor(props){
    super(props);
    this.state={
      inputValue:props.values
    }
  }

  render(){
    return(
      <React.Fragment>
        <Input value={this.state.inputValue}></Input>
      </React.Fragment>
    )
  }
}
export default Son;

（2）子父传值：

        简单的说就是父组件会给子组件传递一个方法，子组件接收到这个方法后，在自己对应的事件中，通过某个事件触发接收到的这个方法，并且可以传参。子传父本质上来说就是通过观察者去触发了一个回调函数。

父组件：

import React from "react";
import Son from "./Son";
class Father extends React.Component{
  constructor(){
    super();
    this.state={
      message:'我是父组件'
    }
    this.getDatas = this.getDatas.bind(this);
  }
  getDatas(msg){
    console.log("父组件触发了么",msg)
    this.setState({
      message:msg
    })
  }
  render(){
    return (
      <React.Fragment>
          <Son getdata={this.getDatas} values={this.state.message}></Son>
          <div>展示Father数据：{this.state.message}</div>
      </React.Fragment>
    )
  }
}
export default Father;

在这里，我们父组件给子组件传递了一个getDatas方法。

为什么this.getDatas.bind(this)这样写，而不是()=>this.getDatas(),我之前也有过疑惑，后来了解后发现这样写比使用箭头函数恰当些。

• 使用this.getDatas.bind(this)时，会将getDatas方法中的this绑定到当前类组件的实例。这确保了在Son组件中调用getdata时，getDatas内部的this指向的是当前类组件的实例，从而能够访问类实例的属性和方法。
• 使用箭头函数时，它会捕获当前的执行上下文，因此在Son组件中调用getdata时，内部的this将指向当前类组件的实例。这种方式在确保this正确指向的同时，可能会引入一些性能开销，因为每次渲染Son组件时都会创建一个新的函数。

• 通常情况下，如果你在 getDatas 方法内部不需要使用this，或者getDatas是一个静态方法，两种写法的效果基本一致。但如果getDatas内部需要使用this，或者你希望避免在每次渲染时创建新的函数，那么推荐使用 .bind(this) 方法。

• 总的来说就是提前在构造函数中绑定方法，这样，getDatas方法只会在组件实例化时绑定一次，而不是在每次渲染时都重新绑定，这有助于避免不必要的性能开销。

 子组件：

import { Button,Input } from "antd";
import React from "react";
class Son extends React.Component{
  constructor(props){
    super();
    this.state={
      inputValue:props.values
    }
  }
  handleClick(){
    this.props.getdata(this.state.inputValue)
  }
  handleChange(e){
    console.log(e.target.value,"this")
    this.setState({
      inputValue:e.target.value
  });
  }

  render(){
    return(
      <React.Fragment>
        <Input onChange={(e)=>this.handleChange(e)} value={this.state.inputValue}></Input>
        <Button onClick={this.handleClick.bind(this)}>点击获取数据Son</Button>
      </React.Fragment>
    )
  }
}
export default Son;

import { Button,Input } from "antd";
import React from "react";
class Son extends React.Component{
  constructor(props){
    super();
    this.state={
      inputValue:props.values
    }
  }
  handleChange(e){
    console.log(e.target.value,"this")
    this.setState({
      inputValue:e.target.value
  },()=>{
    this.props.getdata(this.state.inputValue)
  });
    // this.props.getdata(e.target.value)
  }

  render(){
    return(
      <React.Fragment>
        <Input onChange={(e)=>this.handleChange(e)} value={this.state.inputValue}></Input>
      </React.Fragment>
    )
  }
}
export default Son;

两种哪个都行，一个是通过按钮点击后父组件数据更新，一个Input输入框改变后父组件数据自动更新，都不存在异步的操作。

（3）同级组件传值：

        简单的讲就是将两个同级组件放到同一个父级组件中，通过状态提升，把他们要传值的那一部分统一的放到我们的父级组件中，然后再完成一个父传子的操作，这样就完成了一个同级组件传值。

该文章是在项目中总结，期间百度查询、优快云查询，没有搬抄。如有不足之处，请指正，谢谢。如果代码有相似侵权冒犯之处，请联系，谢谢！ 禁止转载！