React 精要面试题讲解(二) 组件间通信详解

单向数据流与组件间通信

 上文我们已经讲述过，react 单向数据流的原理和简单模拟实现。结合上文中的代码，我们来进行这节面试题的讲解: react中的组件间通信。

 那么，首先我们把看上文中的原生js代码：

        function child(props){
           this.props = props;
        }
       function parent(props){
           this.props = props
           this.state = '这是父函数的一个状态'
           this.childNodes  = new child(this.state);
        }
       console.log(new parent('这是一个属性'));

 ok，经过运行，我们发现打印结果的结构 和 react父子组件的关系结构是极为类似的,子函数通过props形参接受到父函数的state。
 这个好理解吧？那么在说react组件通信之前，我们基于原生继续模拟父子组件间的通信。
 如上文代码所示，我们已经实现了父函数通过props这个形参向子函数传递数据——是的，相对而言，在react中，父组件通过props(规定了只能通过props传递及获取)向子组件进行数据传递。换句话讲，props这个实例属性，表面唯一的作用就是参数传值…

那么，我们接来下要思考一个问题，如何在上述代码中实现 子函数向父函数传递数据？

 如果我们把函数玩的够熟练，那么很容易会思考到以下实现方式：

        function child(props){
           this.data = '我是子函数中的data'
           props.getChildData(this.data);
           this.props = props;
        }
       function parent(props){
           this.props = props;
           this.dataFromChild = null;
           this.getChildData = (data)=>{
                console.log('这个函数被运行了，我们拿到了传过来的参数:'+data);
                this.dataFromChild = data;
           }
           this.childNodes  = new child({
                getChildData:this.getChildData
            });
        }
       console.log(new parent('这是一个属性'));

(别偷懒！f12，复制上述代码到控制台运行！)
好的，简单说下上述代码做出的更改：
1  父函数中定义了一个函数，通过参数对象(实则就是props啊)传递给了子函数;
2  这个函数一旦被执行，会把参数data赋值给父函数中的实例属性data;
3  子函数通过props接收到了这个函数，运行了它，并且把自己的data作为参数传递了进去;

ok，那么我们经过运行，发现控制台打印的内容：

哦！！！于是我们明白了，我们写原生js的时候，就是通过：

在父函数中定义方法，通过参数传递给子函数，子函数调用这个方法并且把自己数据作为参数，那么父函数就可以通过形参拿到了~

什么？有点绕？那么说的再简单点：

父函数的方法传递给子函数，被子函数传参调用。

那么赶紧用内存不足的大脑思考思考react中是不是也可以啊？

        class Child extends React.Component{
            data =  '我是子组件中的data'
            render(){
                this.props.getChildData(this.data);
                return <div>我是Child组件</div>
            }
        }
       class Parent extends React.Component{
            childData=null
            getChildData = (data)=>{
                this.childData = data;
                 console.log(data);
            }
            render(){
                return <Child getChildData = { this.getChildData }  />
            }
        }
    console.log(<Parent  />)

 上面的代码够简练了吧(比中指)！
 那么我们运行上述代码发现——乖乖，真的拿到了~~这不还是一样吗？我们玩的不是react吗？怎么成原生js 了啊？啥啊谁啊我在哪啊？？

 实则所有单向数据流的js框架都可以通过上述的方式进行子组件向父组件的通信。
 非常好，现在我们来整理一下react的父子组件间通信规则：
 *父传子：  父组件通过props传参呗……*
 *子传父 ： 父组件通过props传参呗……*
 啥？ 我写重了？
 (哼哼一声我露出了鄙视的微笑，并在下面多写了一行)
 ***子传父完整版： 父组件中定义函数，通过props传递给子组件，子组件调用这个函数并传参。***
嗯…经过思考，我们得出了这样一个结论： 子传父这样的逆向通信，实际也是符合单向数据流的概念。无非就是把函数当做参数传递下去而已啊！！！(重点是这句啊~~~react中的逆向通信的方式和单向数据流完全不冲突啊~)

---

子传父(逆向通信)的其他方式

  除开上面讲过的 父组件中定义函数传递给子组件并被其调用 这种js通用方式，在react中我们还可以怎样玩？
  在Vue，React中都有ref 这样一个特殊的实例属性。
  react中 ref 具备两种作用：
  1   标记dom的话，能获取dom实例;
  2    标记子组件的话，能获取子组件实例的所有数据(包括子组件的props，state，定义的方法，实例…)。
  那么也就是说，父组件通过this.ref就拿到子组件的任何数据了…就这么简单啊。
  当然，依照react的尿性，文档中特意提到了一点：不要轻易用这玩意啊，危险啊，别冲动啊小伙子们~
  事实上，经过react的版本变化，ref赋值目前有三种方式 ：  字符串、回调、 CreateRef() //这个是16.3后的新增api
  迭代维护做的都很到位啊~ 凭啥只用在表单控件里啊~
  当然，关于ref的花式玩法我们会在本系列后面内容讲到。

---

远亲组件的通信

  其实无论做react还是vue或者其他项目，我们必须要明确，写的还是js。(这也是为什么我一直把原生和react放在一起讲)
  那么远亲组件的通信，我们即时对react毫无了解，也能至少说出一万种方式…
 例如：
      1   通过缓存  ：  组件A把数据存到缓存中，组件B就可以从中取出;
      2   通过url  ：  通过location对象拿到…；
      3   通过与后端配合： 组件A把数据扔到接口里去，组件B可以从中拿到…；
  以上方式，我称之为通过第三方媒介的形式。
  (插一句： 有木有觉得redux中store共享跟session级别缓存很类似？)
  也就是说，远亲组件的通信，我们抛开react去思考得出一个结论：
  ——通过第三方媒介作为一个存储地点，实现数据共享。

   ok我们把话题转回来。react中，同系远亲的话(太太爷爷到重重孙子)，完全可以通过context嘛(上一篇有讲，后面也会出context的专章)…
   至于不是很远的关系， 利用props一层一层往内传啊。 (例如爷爷传到孙子)

   逆向： 子调用爷爷的函数并传参就实现了子传爷爷；
   同级 ： 子1传父，父传子2 ；
   很远关系： 1 context(自己实现试试啊~)  2 通过第三方媒介共享( 缓存，url，服务端，以及后面我们会讲到的redux，react-redux，dva等全局状态存储管理插件);
   我们发现，就单单react的话，传来传去还是 父传子 子传父啊……最多特殊情况用到context(无论多远的关系，最终肯定有个统一的祖宗啊<App ==!/>)而已啊~

---

总结

   这章讲述了react的基础必面的面试题：
   如何在react项目中实现组件间的通信。
   也可能会引发一些react与项目与原生的思考(这是我想要的)。

   如果本章内容对您有帮助，请点个推荐哦~