React基础(七):组件引用,组件通信

我们前面有说过,组件是可以套在一起来用的,但是也仅仅是限于嵌套在一起,父组件和子组件并没有直接的关系,最多就是传了个参,实际上来说,我们经常会需要组件之间相互来配合。

那么先从最简单的开始,组件之间,如何相互去引用。

首先,我们还是创建一对父子组件。

子组件里面有个状态 a,并且显示出来。

父组件里面有个按钮,并且点击了之后,可以让子组件有反应。

那么在做之前,我们要先考虑一个问题,父组件里面一定只有这一个子组件吗?

不一定,可能会有非常多的组件。

所以这种情况下,我们得先给 Child 取个名字,不然的话,万一将来多了,一大堆组件里面根本就分不清,也就没有办法去引用。

我们平常取名字的时候,一般都是加 id 或者 class,但是这些在 React 里面都是不适用的。

比方说 id,一般来说 id 在整个页面里面只能用一次,而我们写的组件天然就具备重用的特性,所以用 id 就只能用一次。

那用 class 呢?但是如果真的多了,它们都是同一个 class,那你从页面里面去选一个,你也分不清到底要的是第几个。

那么 React 给我们提供了一个新的方法,叫做 ref。

ref 全称是 reference,也就是引用的意思。

注意:我们用的时候是需要带上 s 的 this.refs。因为它是我这个里面,所有东西引用的集合。

可以看到,this.refs 就是一个 json

然后我们在给一个 input 加上 ref:

那么现在在点按钮,就有 2 个 ref 了,并且 child1 是一个组件,txt1 只是一个普通的 input 框。

那如果我现在想让子组件的 a 自加,就可以在父组件中用到 ref 了:

可以看到,效果是能出来的。但是这样做是非常不好的。

首先,状态这个东西是 Child 的,那么就应该是它内部在用,外部不要去改它的状态。

如果外部更改了状态,就会导致这两个组件有非常大的依赖,这样的话,这两个组件就没办法拿到其他地方用了。

所以我们还是希望这种操作由 Child 自己来完成。

那么我们可以让 Child 对外暴漏一个 add 方法,这个 add 它可以自己来做一个 setState。

可以看到,一样是能实现的,并且这种方法会更好一些。

所以这种情况,我们可以暴漏一个对外的方法,你要做什么,就来调这个方法,不要私自去动别人的状态。

那么这就是组件的引用,ref 的用法也非常的简单,你想调用谁,就给谁去取个名字,它可以直接去引用子组件,以及里面的东西,非常的方便。

需要注意的是:

1,ref 是需要引用的组件,而 refs 是父级中引用所有 ref 组件

2,和 Vue 有所不同,React 的 ref 不能重复,如果重复,后面的会覆盖掉前面的。

然后我们在来看下,组件之间如何相互通信:

其实,我们刚才已经完成了一个通信,父组件 如何去找 子组件。

父找子,需要注意的是直接使用子组件的状态非常不好,所以应该是让子组件暴漏一个方法出来。

那么 子组件 如何去找 父组件 呢?

父组件给子组件传了一个属性 parent,值就是父组件自己。那么子组件点击按钮的时候,可以看来 this.props 里面的打印,父组件传过来了。

那么剩下的事就比较好办了,我们可以通过 this.props.parent 来做一些事。

如果直接通过 this.props.parent.setState() 来修改,这样是不好的。所以和上面一样,我们可以调用父组件里面暴露出来的方法:

它们的原理类似,只是父组件需要主动向子组件暴漏自己,也就是 this。

所以,简单的组件通信,可以通过 ref 实现,但更复杂的通信则必须依赖如 redux 这种大型框架辅助。

发布了78 篇原创文章 · 获赞 7 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_43921436/article/details/104227970