React 组件通讯详解

一、什么是props

props是组件之间通讯的纽带。props也是组件中内置的一个属性，通过父级组件传入。在类组件里，可以直接通过this.props获取。

注意：

props是不可变的。如果想要修改props则需要从传入props的组件修改

props改变视图会重新渲染

二、父组件往子组件传值

在父组件里的子组件标签上定义属性，在子组件里使用props接收

1、父组件

import React from "react";
// 引入子组件
import LearnPropsChild from "./learn-props-child";

export default class LearnProps extends React.Component {
  state = {
    num: 1
  }
  render () {
    return (
      <div>
        <h1>我是父组件</h1>
        {/* 
          给LearnPropsChild 传递一个name属性
          在标签上定义属性后面跟上要传的值
        */}
        <LearnPropsChild name="张三"></LearnPropsChild>
        {/* 
          如果要传动态属性
          则需要在{}里面传值
          并且 num 改变子组件会重新渲染
        */}
        <LearnPropsChild num={this.state.num}></LearnPropsChild>
      </div>
    )
  }
}

2、子组件

import React from "react";

export default class LearnPropsChild extends React.Component {
  render () {
    return (
      <div>
        <h1>我是子组件</h1>
        {/* 
          使用this.props加上对应的属性名接收
        */}
        {this.props.name}
      </div>
    )
  }
}

三、子组件往父组件传值

父组件给子组件传入一个方法，子组件接收这个方法，在对应的事件里触发接收到的方法，并且可以传参。子传父本质上来说就是通过观察者去触发了一个回调函数。

1、父组件

import React from "react";
import LearnPropsChild from "./learn-props-child";

export default class LearnProps2 extends React.Component {
  getChildData (data) {
    // 子组件传过来的值
    console.log(data)
  }
  render () {
    return (
      <div>
        <h1>父组件</h1>
        {/* 
          给子组件传入一个属性
          属性值是一个方法
          如果子组件有传值对应的函数可以直接接收参数
        */}
        <LearnPropsChild onHandle={this.getChildData}></LearnPropsChild>
        {/* 
          上面那种方式，函数内部拿不到当前组件的上下文
          可以使用箭头函数的形式，那么箭头函数会接受到子组件
          传来的参数,必须要手动的再给getChildData传一下值
        */}
        <LearnPropsChild onHandle={(params) => this.getChildData(params)}></LearnPropsChild>
      </div>
    )
  }
}

2、子组件

import React from "react";

export default class LearnPropsChild extends React.Component {
  setParentData () {
    /**
     * 使用this.props拿到父组件传过来的方法
     * 然后可以触发并传参
     */
    this.props?.onHandle('子组件传父组件')
  }
  render () {
    return (
      <div>
        <h1>我是子组件</h1>
        {/* 
          使用this.props加上对应的属性名接收
        */}
        {this.props.name}
        {/* 
          通过事件传递
        */}
        <button onClick={() => this.setParentData()}>往父组件传值</button>
      </div>
    )
  }
}

四、组件嵌套

组件标签中间如果有其他组件或者标签，则在组件内使用this.props.children展示

组件标签

import React from "react";
import Component from "./component";
import Content from "./Content";

export default class LearnPropsChild2 extends React.Component {
  render() {
    return (
      <div>
        <Component>
          {/* 可以放标签 */}
          <div>在组件内部的内容</div>
          {/* 也可以直接放组件 */}
          <Content></Content>
        </Component>
      </div>
    );
  }
}

组件内部展示

import React from "react";

export default class Component extends React.Component {
  render() {
    return (
      <div>
        <div>头部</div>
        {this.props.children}
        <div>底部</div>
      </div>
    );
  }
}

五、受控组件

1、概念

在HTML中，表单元素的标签<input>、<textarea>、<select>等，这些值改变通常是根据用户输入进行更新。那么在React中，可变状态通常保存在组件的状态属性中，并且只能使用 setState() 进行更新， 如果这个组件里面存放着一些表单控件我们也可以手动的进行组件更新，那么以这种由React控制的输入表单元素而改变其值的方式，称为受控组件。

比如，给表单元素input绑定一个onChange事件，当input状态发生变化时就会触发onChange事件，从而更新组件的state

2、实例

import React from 'react'

export default class MyInput extends React.Component {
  state = {
    value: 0
  }
  handleChange = (event)=>{
    this.setState({
      value: event.target.value
    })
  }
  render(){
    return(
      <div>
          <input
              type="text"
              value={this.state.value}
              onChange={this.handleChange}
           />
      </div>
    )
  }
}

3、受控组件更新state的流程

1、 可以通过初始state中设置表单的默认值

2、每当表单的值发生变化时，调用onChange事件处理器

3、事件处理器通过事件对象event拿到改变后的状态，并更新组件的state

4、一旦通过setState方法更新state，就会触发视图的重新渲染，完成表单组件的更新

六、状态提升

1、概念

在React框架中，当多个组件需要反映相同的变化数据，这时建议将共享状态提升到最近的共同父组件中去。一般我们将该操作称为状态提升。由此我们可以很清楚的明白React状态提升主要就是用来处理父组件和子组件的数据传递的；他可以让我们的数据流动的形式是自顶向下单向流动的，所有组件的数据都是来自于他们的父辈组件，也都是由父辈组件来统一存储和修改，再传入子组件当中。

2、例子

有两个组件一个可以输入米，一个可以输入厘米，并且两个组件之间可以相互转换

3、总结

在React应用中，对应任何可变数据理应只有一个单一“数据源”。通常，状态都是首先添加在需要渲染数据的组件中。此时，如果另一个组件也需要这些数据，你可以将数据提升至离它们最近的父组件中。你应该在应用中保持 自上而下的数据流，而不是尝试在不同组件中同步状态。

状态提升比双向绑定方式要写更多的“模版代码”，但带来的好处是，你也可以更快地寻找和定位bug的工作。因为哪个组件保有状态数据，也只有它自己能够操作这些数据，发生bug的范围就被大大地减小了。此外，你也可以使用自定义逻辑来拒绝或者更改用户的输入