React的组件通信和状态提升

React的组件通信：

父===>子通信 : 父组件将属性(props)传递给子组件
子===>父通信 ：调用父组件传递过来的方法去实现。传递的数据放在参数里面
(父组件将一个改变自身状态的方法传递给子组件，子组件去调用的同时将一些参数传给它)

下面通过一个案例的两种方式讲解组件之间的通信和状态提升问题。
状态提升也就是将state写在父组件里，方便进行管理使用。
这是将状态放在父组件里

import React, { Component } from 'react'
import Todolist from '../todolist/'
import Txt from '../txt'

export default class index extends Component {
  constructor() {
    super()
    this.state = {
   		//父组件定义状态
      list:[]
    }
  }
  //data是Txt组件传递的值
  add = data => {
    this.setState({
      list:[...this.state.list,data]
    })
  }
  render() {
    return (
      <div>
      {/* 通过向子组件传递事件修改state的值 */}
        <Txt add={this.add}/>
        //子组件通过this.state.list取值
        <Todolist list={this.state.list}/>
      </div>
    )
  }
}

在子组件中使用：

Todolist组件
import React, { Component } from 'react'

export default class index extends Component {
  render() {
  //子组件通过props取值父组件传递过来的
    let {list} = this.props
    return (
      <div>
        <ul>
            {
              list.map((item,index)=> {
                return <li key={index}>{item}</li>
              })
            }
        </ul>
      </div>
    )
  }
}


Txt组件
import React, { Component } from 'react'

export default class index extends Component {
  input = (e) => {
      if(e.keyCode === 13) {
        //解构出父组件的函数
        let {add} = this.props;
        // 调用父组件的事件并传递值
        add(e.target.value)
        e.target.value = ''
      }
  }
  render() {
    return (
      <div>
        <input onKeyUp={this.input} type="text"/>
      </div>
    )
  }
}

下面是没有进行状态提升：

状态由子组件自己管理：

父组件
import React, { Component } from 'react'
import List from '../list'
import Txt from '../txt'
export default class index extends Component {
  // 非提升状态
  //父组件向Txt组件传递方法
  change = (data) => {
  //调用父组件change方法时调用List组件方法修改List的state
      this.add.change(data)
  }
  render() {
    return (
      <div>
      //向Txt组件传递方法
        <Txt  add={this.change}/>
        //通过ref绑定DOM
        <List ref={el=>this.add=el}/>
      </div>
    )
  }
}

List组件

List组件
import React, { Component } from 'react'

export default class index extends Component {
  constructor() {
    super()
    this.state = {
      list:[]
    }
  }
//  改变state的方法
  change = (data) => {
    this.setState({
      list:[...this.state.list,data]
    })
  }
  render() {
    return (
      <div>
        <ul>
          {
            this.state.list.map((item,index)=>{
              return <li key={index}>{item}</li>
            })
          }
        </ul>
      </div>
    )
  }
}

Txt组件

Txt组件
import React, { Component } from 'react'

export default class txt extends Component {
  add = (e) => {
        if(e.keyCode===13) {
          console.log(this.props)
          //解构出父组件传递的方法
          let {add} = this.props
          //调用父组件的方法
          add(e.target.value)
          e.target.value=''
        }
  }
  render() {
    return (
      <div>
        <input type="text"  onKeyUp = {this.add}/>
      </div>
    )
  }
}

通过上面的对比 我们可以发现 状态提升更为方便，由父组件管理状态。