React学习笔记——状态提升

废话少说，直接谈主题，React中的兄弟组件简单通信，就是所谓的状态提升。
先定义一个父组件parent和两个子兄弟组件child1和child2。

父组件（父组件因为用到状态，所以考虑用类组件）

import React, { Component } from 'react';
//引入两个子组件
import Child1 from './Child1'
import Child2 from './Child2'
class Parent extends Component {
  constructor(){
    super()
  }
//可以先定义一个空状态data
  state={
    data:''
  }
  //这个data是从child1里面传过来的参数
  onReceiveDataClik = (data)=>{
    return(
   	  //尝试打印子组件1传过来的值
      // console.log(data)
      this.setState({
        data
      })
    )
  }

  render() {
    return (
      <>
      //将onReceiveData 方法传递给child1，
      //每次child调用时都会传过来相应值,
      //这里可以绑定this
        <Child1 onReceiveData = {this.onReceiveDataClik}></Child1>
       //<Child1 onReceiveData = {this.onReceiveDataClik.bind(this)}></Child1>
       //这里是将data传递给child2
        <Child2 data={this.state.data}> </Child2>
      </>
    );
  }
}

export default Parent;

子组件child1（考虑子组件用函数式组件）

import React from 'react';
const Child1 = (props) => {
  return (
  //通过props接受父组件传过来的onReceiveData方法
    <div onClick = {props.onReceiveData.bind(this , 'chen')}>
      child1
    </div>
  );
};

export default Child1;

【重点】状态提升重要的是要考虑怎么把子组件1里面的东西传递给父组件

如果直接这样写,则不能传给父组件参数

 <div onClick = {props.onReceiveData}>

如果直接这样写，则表示直接调用函数，就会直接打印

<div onClick = {props.onReceiveData()}>

所以我们想到需要调用的时候才能调用，这是考虑使用bind，因为bind的原理是返回一个函数，并且不会立即执行，只有调用的时候才执行，这样正好符合我们的需求。

<div onClick = {props.onReceiveData.bind(this , 'chen')}>

子组件child2（考虑子组件用函数式组件）

import React from 'react';
const Child2 = (props) => {
  return (
    <div>
      {
        props.data
      }
    </div>
  );
};

export default Child2;

效果

点击之后

可以发现，子组件1里面的绑定的东西，传递到了子组件2里面。

好了，没有废话，总结完毕。