react---组件之间的传值

vue是react的简化，但是基本性能上是差不多的

同样的一份代码，一个功能，可能vue十行代码能够实现，但是用react需要三十行，但是丝毫不影响喜欢的人对它的热爱，由于react可能偏原生一些，但是也正是因为它偏原生，所以它的写法很多种，最终都可以实现你想要的目标。
今天说的是react的组件之间的传值，我们知道vue的传值分为父传子、子传父以及兄弟组件之间的传值，
父传子： 父组件把数据绑到属性上面，子组件通过props来接收父组件传递过来的属性值，拿到相应的数据
子传父： 父组件通过定义一个方法，通过属性传递给子组件，子组件定义自己的方法，在触发自己的方法的时候调用父组件的方法，并把自己的数据以参数的形式传递给父组件的方法调用
兄弟组件：在vue里面，兄弟组件之间通过事件总线来实现，其实类似于store，就是把公用的数据挂载到全局上一样，
react则更加巧妙，它通过Provider和Consumer搭配起来使用，使用方法跟父传子的方法类似，传值的组件作为父组件，接收值的组件作为子组件

无状态组件：
通过构造函数搭建的组件

无状态组件传值方式一：
App.js:

import React, { Component } from 'react'
import Com1 from './components/com1'
export default class App extends Component {
  render() {
    return (
      <div>
        this is app
        <Com1 title='title'></Com1>
      </div>
    )
  }
}

Com1.js:

import React from 'react'

export default function com1(props) {
  return (
    <div>
      this is com1 --- 无状态组件---App传递过来的数据---{props.title}
    </div>
  )
}

无状态组件传值方式二：
把要传递的数据写在双组件之间：
App.js:

import React, { Component } from 'react'
import Com1 from './components/com1'
export default class App extends Component {
  render() {
    return (
      <div>
        this is app
        {/* <Com1 title='title'></Com1> */}
        <Com1>title</Com1>
      </div>
    )
  }
}

Com1.js:

import React from 'react'

export default function com1(props) {
  return (
    <div>
      this is com1 --- 无状态组件---App传递过来的数据---{props.children}
    </div>
  )
}

有状态组件传值：
方式一：
App.js:

import React, { Component } from 'react'
// import Com1 from './components/com1'
import Com2 from './components/com2'
export default class App extends Component {
  render() {
    return (
      <div>
        this is app
        {/* <Com1 title='title'></Com1> */}
        {/* <Com1>title</Com1> */}
        <Com2 title="title" />
      </div>
    )
  }
}

Com2.js:

import React, { Component } from 'react'

export default class com2 extends Component {
  render() {

    console.log(this.props)
    return (
      <div>
        this is com2 --- 有状态的组件，App以属性方式传递来的数据 ---{this.props.title}
      </div>
    )
  }
}

方式二：
App.js:

import React, { Component } from 'react'
// import Com1 from './components/com1'
import Com2 from './components/com2'
export default class App extends Component {
  render() {
    return (
      <div>
        this is app
        {/* <Com1 title='title'></Com1> */}
        {/* <Com1>title</Com1> */}
        <Com2>rrc</Com2>
      </div>
    )
  }
}

Com2.js:

import React, { Component } from 'react'

export default class com2 extends Component {
  render() {

    console.log(this.props)
    return (
      <div>
        this is com2 --- 有状态的组件，App以属性方式传递来的数据 ---{this.props.children}
      </div>
    )
  }
}

PS:有状态组件和无状态组件的区别：
1.构造方式：
无状态组件是由构造函数创建的方式构造
有状态组件是继承react的组件而来
2.无状态组件不可以做业务逻辑等语句，只为了单纯地渲染页面，
有状态组件可以进行业务逻辑
3.有状态组件有this指向，所以可以直接通过this.props来接收父组件传递过来的数据，但是无状态组件不可以，需要通过去挂载props来接收

那么为什么还要无状态组件的存在呢？
因为无状态组件只是为了单纯地渲染页面，而有状态组件除了渲染页面还需要进行业务逻辑，所以渲染的速度就相对较慢，所以无状态组件的存在还是有意义的。