React 组件通信

最新推荐文章于 2024-09-05 22:43:38 发布

论文写了吗

最新推荐文章于 2024-09-05 22:43:38 发布

阅读量196

点赞数

分类专栏： React 文章标签： reactjs

本文链接：https://blog.csdn.net/qq_36418624/article/details/105521732

版权

本文详细介绍了React中组件间的五种通信方式：父子组件通信、子父组件通信、非父子组件通信、跨组件通信以及多组件状态共享。重点讨论了如何通过props、ref、事件回调以及使用Context API进行数据传递。同时提到了状态管理库如Redux和Mobx在解决多组件状态共享中的应用。

摘要由CSDN通过智能技术生成

React中的组件通信共可以分为5类：

父子组件通信
子父组件通信
非父子组件通信
跨组件通信
多组件状态共享

父组件与子组件通信

父子组件通信：无论父组件传递的是props还是state，子组件都是通过props接收

父组件将自己的状态传递给子组件，子组件当作属性来接收，当父组件更改自己状态的时候，子组件接收到的属性就会发生改变
父组件利用ref对子组件做标记，通过调用子组件的方法更改子组件的状态，也可以调用子组件的方法

子组件与父组件通信

子父组件通信：父组件传递方法给子组件，子组件掉要父组件传递过来的方法

注意：自己的状态只能自己更改

父组件将自己的某个方法传递给子组件，在方法里可以做任意操作，比如可以更改状态，子组件通过this.props接收到父组件的方法后调用。

非父子通信

非父子组件通信：ref链

ref的绑定方式：

ref='xxx 使用:this.refs.xxx访问
例如：

<Child chara={
     this.charaHandler} ref='child' name={
     childName} taiji={
     taiji} fn={
     this.zhengrong}></Child>

虽然会警告，但是不影响绑定效果，查阅官网：Refs&DOM，可以通过在构造器中创建一个 ref 来存储 DOM 元素

constructor(){
     
  super()
  //创建一个 ref 
  this.childref = React.createRef();
  this.state = {
     
      taiji:'五角星',

  }
  console.log(this)
}

<Child chara={
     this.charaHandler} ref={
     this.childref} name={
     childName} taiji=