React 组件之间的通信方式总结(上)
先来几个术语:
本文重点:
组件有两个特性
1、传入了一个“props”
2、返回了一个 React 元素
组件的构造函数
如果需要重新定义
constructor
,必须super
一下,才能激活this
,也就是可以用来自 React.component 方法组件的
props
是可读的,也就是不能在组件中修改 prop 的属性
JSX 中传入对象的 props,可以通过{...object}的方式
父子元素之间的通信(初级版本)
父=>子,通过父元素的
render
既可改变子元素的内容。子=>夫,通过父元素传入子元素中的
props
上挂载的方法,让子元素触发父元素中的方法,从而进行通信。
Component
上回说到 JSX 的用法,这回要开讲 react 组件之间的一个沟通。那么什么是组件?我知道英文是 Component,但这对我而言就是一个单词,毫无意义。要了解 Component 之间是如何进行友好交流的,那就要先了解 Component 是个什么鬼。
上回说到的 JSX,我们可以这么创建对象:
还是老老实实地用h1
、div
这种标准的 HTML 标签元素去生成 React 元素。但是这样的话,我们的 JS 就会变得巨大无比,全部都是新建的 React 元素,有可能到时候我们连对象名都不晓得怎么起了,也许就变成let div1;let div2
这样的。哈哈哈开个玩笑。但是分离是肯定要分离的。这个时候就有了名为 Component 的概念。他可以做些什么呢?简单的说就是创建一个个独立的
,可复用
的小组件。话不多说,我们来瞅瞅来自官方的写法:
写法一:函数型创建组件,大家可以看到我就直接定义一个名为 App 的方法,每次执行App()
的时候就会返回一个新的 React 元素。而这个方法我们可以称之为组件 Component。有些已经上手 React 的朋友,可能傻了了,这是什么操作,我的高大上class
呢?extend
呢?很遗憾地告诉你,这也是组件,因为他符合官方定义:1、传入了一个“props” ,2、返回了一个 React 元素。满足上述两个条件就是 Component!
这个是最简易的Component
了,在我看来Component
本身是对React.createElement
的一种封装,他的render
方法就相当于React.createElement
的功能。高大上的组件功能来啦:
这个class
版本的组件和上方纯方法的组件,从 React 的角度上来说,并无不同,但是!毕竟我class
的方式还继承了React.Component
,不多点小功能都说不过去对吧?所以说我们这么想继承了React.Component
的组件的初始功能要比纯方法 return 的要多。所以每个 React 的Component
我们都可以当作 React 元素直接使用。
好了,我们来研究研究Component
这个类的方法吧。
首先是一个神奇的constructor
函数,这个函数在类中,可以说是用于初始化的函数。如果省去不写,也不会出错,因为我们的组件都是React.Component
的子类,所以都继承了React.Component
的constructor
方法。如果我们在子类Component
中定义了constructor
相当于是覆盖了父类的方法,这样React.Component
的构造函数就失效了。简单地来说就是很多默认的赋值都失效了。你是获取不到props
的。因此官方为了提醒大家不要忘记super
一下,也就是继承父类的constructor
,因此会报"this hasn't been initialised - super() hasn't been called"
这个错误。意思就是你先继承一下。也就是说super
是执行了父类的constructor
的方法。所以!!!重点来了——我们写 super 的时候不能忘记传入props
。不传入props
,程序就无法获取定义的组件属性了。
官方也给大家划重点了:
Class components should always call the base constructor with props.(类组建在执行基本 constructor 的时候,必须和 props 一起。)
对于我们没有写constructor
,但在其他自带方法中,比如render
,也可以直接获取到props
,这个诡异的操作就可以解释了。因为我们省略了重定义,但是constructor
本身不仅是存在的而且也执行了,只不过没有在我们写的子类中体现出来而已。
props 的坑
分析了 Component 之后,大家有没有发现 Component 的一个局限?没错!就是传参!关于 Component 的一个定义就是,只能传入props
的参数。也就是说所有的沟通都要在这个props
中进行。有种探监的既视感,只能在规定的窗口,拿着对讲机聊天,其他的方式无法沟通。React 对于props
有着苛刻的规定。参考 前端进阶面试题详细解答
All React components must act like pure functions with respect to their props.
简单地来说就是props
是不能被改变的,是只读的。(大家如果不信邪,要试试,可以直接改 props 的值,最终等待你的一定是报错页面。)
这里需要科普下纯函数pure function
的概念,之后 Redux 也会遇到的。意思就是纯函数只是一个过程,期间不改变任何对象的值。因为 JS 的对象有个很奇怪的现象。如果你传入一个对象到这个方法中,并且改变了他某属性的值,那么传入的这个对象在函数外也会改变。pure function
就是你的改动不能对函数作用域外的对象产生影响。所以每次我们在 Component 里面会遇到一个新的对象state
,一般这个组件的数据我们会通过state
在当前组件中进行变化处理。
划重点:因为 JS 的特性,所以
props
设置为只读,是为了不污染全局的作用域。这样很大程度上保证了Component
的独立性。相当于一个Component
就是一个小世界。
我发现定义 props 的值也是一门学问,也挺容易踩坑的。
比如下方代码,我认为打印出来应该是props:{firstName:"Nana",lastName:"Sun"...}
,结果是props:{globalData:true}
.
所以对于props
是如何传入组件的,我觉得有必要研究一下下。
props
其实就是一个参数直接传入组件之中的,并未做什么特殊处理。所以对props
进行处理的是在React.createElement
这一个步骤之中。我们来回顾下React.createElement
是怎么操作的。
也就是他的语法是一个属性名=属性值
,如果我们直接放一个<App globalData/>
,那么就会被解析成<App globalData=true/>}
,所以 props 当然得不到我们想要的结果。这个是他的一个语法,我们无法扭转,但是我们可以换一种写法,让他无法解析成属性名=属性值
,这个写法就是{...globalData}
,解构然后重构,这样就可以啦。
Components 之间的消息传递
单个组件的更新->setState
Components 之间的消息传递是一个互动的过程,也就是说 Component 是“动态”的而不是“静态”的。所以首先我们得让静态的Component
“动起来”,也就是更新组件的的值,前面不是提过props
不能改嘛,那怎么改?前文提过Component
就是一个小世界,所以这个世界有一个状态叫做state
。
先考虑如何外力改变Component
的状态,就比如点击啦,划过啦。
这里我用了onClick
的用户主动操作的方式,迫使组件更新了。其实 component 这个小世界主要就是靠state
来更新,但是不会直接this.state.XXX=xxx
直接改变值,而是通过this.setState({...})
来改变。
这里有一个小 tips,我感觉大家很容易犯错的地方,有关箭头函数的 this 指向问题,大家看下图。箭头函数转化成 ES5 的话,我们就可以很清晰得看到,箭头函数指向他上一层的函数对象。这里也就指向App
这个对象。
如果不想用箭头函数,那么就要注意了,我们可以在 onClick 中加一个bind(this)
来绑定 this 的指向,就像这样onClick={this.addNum.bind(this)}
。
组件之间的通信
那么 Component 通过this.setState
可以自 high 了,那么组件之间的呢?Component 不可能封闭自己,不和其他的 Component 合作啊?那我们可以尝试一种方式。
在 App 中我把<p>{this.state.num}</p>
提取出来,放到 App1 中,然后 App1 直接用props
来显示,因为 props 是来自父元素的。相当于我直接在 App(父元素)中传递 num 给了 App1(子元素)。每次 App 中 state 发生变化,那么 App1 就接收到召唤从而一起更新。那么这个召唤是基于一个什么样的理论呢?这个时候我就要引入 React 的生命周期 life cycle 的问题了。
react 的生命周期
看到生命周期 life cycle,我就感觉到了生生不息的循环 cycle 啊!我是要交代在这个圈圈里了吗?react 中的生命周期是干嘛的呢?如果只是单纯的渲染就没有生命周期一说了吧,毕竟只要把内容渲染出来,任务就完成了。所以这里的生命周期一定和变化有关,有变化才需要重新渲染,然后再变化,再渲染,这才是一个圈嘛,这才是 life cycle。那么 React 中的元素变化是怎么变的呢?
先来一个官方的生命周期(我看着就头晕):
点我看 live 版本
官方的全周期:
官方的简约版周期:
有没有看着头疼,反正我是跪了,真令人头大的生命周期啊。我还是通过实战来确认这个更新是怎么产生的吧。实战出真理!(一些不安全的方法,或者一些我们不太用得到的,这里就不讨论了。)
Mounting 装备阶段:
constructor()
render()
componentDidMount()
Updating 更新阶段:
render()
componentDidUpdate()
具有争议的 componentWillReceiveProps()
Unmounting 卸载阶段:
componentWillUnmount()
Error Handling 错误捕获极端
componentDidCatch()
这里我们通过运行代码来确认生命周期,这里是一个父元素嵌套子元素的部分代码,就是告诉大家,我在每个阶段打印了啥。这部分的例子我用的还是上方的 App 和 App1 的例子。
好了开始看图推理
初始化运行状态:
父元素先运行创建这没有什么问题,但是问题是父元素还没有运行结束,杀出了一个子元素。也就是说父元素在 render 的时候里面碰到了子元素,就先装载子元素,等子元素装载完成后,再告诉父元素我装载完毕,父元素再继续装载直至结束。
我点击了一下,父元素setState
,然后更新了子元素的props
。
同样的先父元素 render,遇到子元素就先暂时挂起。子元素这个时候出现了componentWillReceiveProps
,也就是说他是先知道了父元素传props
过来了,然后再render
。因为有时候我们需要在获取到父元素改变的 props 之后再执行某种操作,所以componentWillReceiveProps
很有用,不然子元素就直接render
了。突想皮一下,那么我子元素里面没有 props 那是不是就不会执行componentWillReceiveProps
了??就是<App1 num={this.state.num}/>
变成<App1/>
。我还是太天真了。这个componentWillReceiveProps
依然会执行也就是说:
componentWillReceiveProps 并不是父元素传入的
props
发生了改变,而是父元素render
了,就会出发子元素的这个方法。
关于卸载,我们来玩一下,把 App 的方法改成如下方所示,当 num 等于 2 的时候,不显示 App1。
App 先render
,然后卸载了 App1 之后,完成了更新componentDidUpdate
。
那么大家看懂了生命周期了吗??我总结了下:
父元素装载时
render
了子元素,就先装载子元素,再继续装载父元素。父元素
render
的时候,子元素就会触发componentWillReceiveProps
,并且跟着render
父元素卸载子元素时,先
render
,然后卸载了子元素,最后componentDidUpdate
如何子传父亲呢??
通过生命周期,子元素可以很容易的获取到父元素的内容,但是父元素如何获得来自子元素的内容呢?我们不要忘记了他们为一个沟通桥梁props
!我们可以在父元素中创建一个方法用于获取子元素的信息,然后绑定到子元素上,然后不就可以获取到了!操作如下所示:
当子元素运行popToFather
的时候,消息就可以传给父亲啦!
子元素:
父元素成功获取来自子元素的慰问!
这次就科普到这里吧。
评论