组件通信

组件通信

一、React组件通讯：

1.父传子
2.子传父
3.兄弟之间

第一种：父传子

  第一步：在父组件（App.js）引入子组件(tab.js)
     例如：import TabCom from './pages/tab'

 第二步：在父组件向子组件传递数据
    例如：

  第三步：子组件如何接收父组件的数据 （主要通过 this.props.属性名实现）

   例如：
        let {num,title}=this.props.info
        console.log('父组件num的值为：',num);
        console.log('父组件title的值为：',title);

第二种：子传父

// Vue实现的子传父 this.$emit('派发的自定义事件',要传递给父组件的数据)

 //React还是通过this.props来实现的，具体是通过传递一个回调函数实现
   第一步：在父组件（App.js）引入子组件(tab.js)
     例如：import TabCom from './pages/tab'

  第二步：在父组件向子组件传递一个回调函数 例如：sendValue（） ｛....｝

    例如：
            

            

  第三步：子组件如何接收父组件的函数（主要通过 this.props.回调函数名实现）

   例如：
         this.props.send(要传递给父组件的值)

第三种：兄弟之间（也称非父子）

 1.通过公共组件作为桥梁，来实现兄弟通讯

 2.通过Redux来实现

ReactDOM.render(

,要插入的位置);

1.如何定义父子通讯的默认属性：defaultProps={ }

 组件内定义

    static defaultProps={
          默认属性:值 
   }
  组件外定义：

    组件名.defaultProps={
        默认属性:值 
   }   

2. 函数式组件肯定是无状态组件，类组件可以是无状态组件也可以是有状态组件

生命周期：？？？？

props和state的区别：

    state:(对内)针对组件内部的状态，组件外外部是访问不到的
props:(对外)是组件之间访问时用到的，组件内部可以通过props来访问到另一个组件的数据

原则：多用props,少用state