先来几个术语：

官网我的说法对应代码
React elementReact元素let element=<span>A爆了</span>
Component组件class App extends React.Component {}
无App为父元素，App1为子元素<App><App1></App1></App>

本文重点：

  • 组件有两个个性

    • 1、传入了一个“props”
    • 2、返回了一个React元素

  • 组件的构造函数

    • 如果须要从新定义constructor，必须super一下，能力激活this，也就是能够用来自React.component办法

  • 组件的props

    • 是可读的，也就是不能在组件中批改prop的属性
    • JSX中传入对象的props，能够通过{...object}的形式

  • 父子元素之间的通信（高级版本）

    • 父=>子，通过父元素的render既可扭转子元素的内容。
    • 子=>夫，通过父元素传入子元素中的props上挂载的办法，让子元素触发父元素中的办法，从而进行通信。

Component

上回说到JSX的用法，这回要开讲react组件之间的一个沟通。那么什么是组件？我晓得英文是Component，但这对我而言就是一个单词，毫无意义。要理解Component之间是如何进行敌对交换的，那就要先理解Component是个什么鬼。

上回说到的JSX，咱们能够这么创建对象：

let element=<h1 className="aaa">A爆了</h1>//等同于let element=React.createElement(  "h1",  {className:"aaa"},  "A爆了")

还是老老实实地用h1、div这种规范的HTML标签元素去生成React元素。然而这样的话，咱们的JS就会变得微小无比，全部都是新建的React元素，有可能到时候咱们连对象名都不知道怎么起了，兴许就变成let div1;let div2这样的。哈哈哈开个玩笑。然而拆散是必定要拆散的。这个时候就有了名为Component的概念。他能够做些什么呢？简略的说就是创立一个个独立的，可复用的小组件。话不多说，咱们来瞅瞅来自官网的写法：

写法一：函数型创立组件，大家能够看到我就间接定义一个名为App的办法，每次执行App()的时候就会返回一个新的React元素。而这个办法咱们能够称之为组件Component。有些曾经上手React的敌人，可能傻了了，这是什么操作，我的高大上class呢？extend呢？很遗憾地通知你，这也是组件，因为他合乎官网定义：1、传入了一个“props” ，2、返回了一个React元素。满足上述两个条件就是Component！

function App(props) {  return <span>{props.name}！A爆了</span>     }

这个是最繁难的Component了，在我看来Component自身是对React.createElement的一种封装，他的render办法就相当于React.createElement的性能。高大上的组件性能来啦：

import React, { Component } from 'react';class App extends Component {  render() {    return <span>{this.props.name}！A爆了</span>       }}export default App;

这个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，程序就无奈获取定义的组件属性了。

constructor(props) {    super(props);//相当于React.Component.call(this,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}.

let globalData={    firstName:"Nana",    lastName:"Sun",    greeting:["Good moring","Good afternoon","Good night"]}ReactDOM.render(<App globalData/>, document.getElementById('root'));

所以对于props是如何传入组件的，我感觉有必要钻研一下下。

props其实就是一个参数间接传入组件之中的，并未做什么非凡解决。所以对props进行解决的是在React.createElement这一个步骤之中。咱们来回顾下React.createElement是怎么操作的。

React.createElement(  "yourTagName",  {className:"aaa",color:"red:},  "文字/子节点")//对应的JSX写法是：<yourTagName className="aaa" color="red>文字/子节点</yourTagName>

也就是他的语法是一个属性名=属性值，如果咱们间接放一个<App globalData/>，那么就会被解析成<App globalData=true/>}，所以props当然得不到咱们想要的后果。这个是他的一个语法，咱们无奈扭转，然而咱们能够换一种写法，让他无奈解析成属性名=属性值，这个写法就是{...globalData}，解构而后重构，这样就能够啦。

Components之间的消息传递

单个组件的更新->setState

Components之间的消息传递是一个互动的过程，也就是说Component是“动静”的而不是“动态”的。所以首先咱们得让动态的Component“动起来”，也就是更新组件的的值，后面不是提过props不能改嘛，那怎么改？前文提过Component就是一个小世界，所以这个世界有一个状态叫做state。

先思考如何外力扭转Component的状态，就比方点击啦，划过啦。

class App extends Component {  state={      num:0  }  addNum=()=>{    this.setState({      num:this.state.num+1    })  }  render() {    return( [        <p>{this.state.num}</p>,        <button onClick={this.addNum}>点我+1</button>      ]    )       }}

这里我用了onClick的用户被动操作的形式，迫使组件更新了。其实component这个小世界次要就是靠state来更新，然而不会间接this.state.XXX=xxx间接扭转值，而是通过this.setState({...})来扭转。

这里有一个小tips，我感觉大家很容易犯错的中央，无关箭头函数的this指向问题，大家看下图。箭头函数转化成ES5的话，咱们就能够很清晰得看到，箭头函数指向他上一层的函数对象。这里也就指向App这个对象。

如果不想用箭头函数，那么就要留神了，咱们能够在onClick中加一个bind(this)来绑定this的指向，就像这样onClick={this.addNum.bind(this)}。

  render() {    return( [        <p>{this.state.num}</p>,        <button onClick={this.addNum.bind(this)}>点我+1</button>      ]    )       }

组件之间的通信

那么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的问题了。

//Apprender() {  return( [      <App1 num={this.state.num}/>,      <button onClick={this.addNum}>点我+1</button>    ]  )     }//App1render() {  return( [      <p>{this.props.num}</p>,    ]  )     }

react的生命周期

看到生命周期life cycle，我就感觉到了生生不息的循环cycle啊！我是要交代在这个圈圈里了吗？react中的生命周期是干嘛的呢？如果只是单纯的渲染就没有生命周期一说了吧，毕竟只有把内容渲染进去，工作就实现了。所以这里的生命周期肯定和变动无关，有变动才须要从新渲染，而后再变动，再渲染，这才是一个圈嘛，这才是life cycle。那么React中的元素变动是怎么变的呢？

先来一个官网的生命周期（我看着就头晕）：

点我看live版本

官网的全周期：

官网的简洁版周期：

有没有看着头疼，反正我是跪了，真令人头大的生命周期啊。我还是通过实战来确认这个更新是怎么产生的吧。实战出真谛！（一些不平安的办法，或者一些咱们不太用失去的，这里就不探讨了。）

Mounting配备阶段：

  • constructor()
  • render()
  • componentDidMount()

Updating更新阶段：

  • render()
  • componentDidUpdate()
  • 具备争议的componentWillReceiveProps()

Unmounting卸载阶段：

  • componentWillUnmount()

Error Handling谬误捕捉极其

  • componentDidCatch()

这里咱们通过运行代码来确认生命周期，这里是一个父元素嵌套子元素的局部代码，就是通知大家，我在每个阶段打印了啥。这部分的例子我用的还是上方的App和App1的例子。

//fatherconstructor(props){  console.log("father-constructor");}componentDidMount() {  console.log("father-componentDidMount");}componentWillUnmount() {  console.log("father-componentWillUnmount");}componentDidUpdate() {  console.log("father-componentDidUpdate");}render() {  console.log("father-render");}
//childconstructor(props){  console.log("child-constructor");  super(props)}componentDidMount() {  console.log("child-componentDidMount");}componentWillUnmount() {  console.log("child-componentWillUnmount");}componentDidUpdate() {  console.log("child-componentDidUpdate");}componentWillReceiveProps(){  console.log("child-componentWillReceiveProps");}render() {  console.log("child-render");}

好了~开始看图推理~

初始化运行状态：

父元素先运行创立这没有什么问题，然而问题是父元素还没有运行完结，杀出了一个子元素。也就是说父元素在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。

render() {  return(     <div>      {this.state.num===2?"":<App1 num={this.state.num}/>}      <button onClick={this.addNum}>点我+1</button>    </div>  )     }

App先render，而后卸载了App1之后，实现了更新componentDidUpdate。

那么大家看懂了生命周期了吗？？我总结了下：

  • 父元素装载时render了子元素，就先装载子元素，再持续装载父元素。
  • 父元素render的时候，子元素就会触发componentWillReceiveProps，并且跟着render
  • 父元素卸载子元素时，先render，而后卸载了子元素，最初componentDidUpdate

如何子传父亲呢？？

通过生命周期，子元素能够很容易的获取到父元素的内容，然而父元素如何取得来自子元素的内容呢？咱们不要遗记了他们为一个沟通桥梁props！咱们能够在父元素中创立一个办法用于获取子元素的信息，而后绑定到子元素上，而后不就能够获取到了！操作如下所示：

receiveFormChild=(value)=>{  console.log(value)}render() {  return(     <div>      {this.state.num===2?"":<App1 num={this.state.num} popToFather={this.receiveFormChild}/>}      <button onClick={this.addNum}>点我+1</button>    </div>  )     }

当子元素运行popToFather的时候，音讯就能够传给父亲啦！

子元素：

render() {  return( [      <p>{this.props.num}</p>,      <button onClick={()=>this.props.receiveState("来自子元素的慰问")}>子传父</button>    ]  )     }

父元素胜利获取来自子元素的慰问！

这次就科普到这里吧。