react笔记（五）—— 组件通讯父传子

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第5天，点击查看活动详情

前言

大家好呀，我是L同学。在上篇文章react笔记（四）—— 事件处理中，我们学习了类组件的状态、事件处理、setState修改状态、react核心理念-状态不可变等相关知识点。在这篇文章中，我们将学习到组件通信、props基本使用、props注意点、父传子等相关知识点。

组件通讯

组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些数据。为了实现这些功能，就需要打破组件的独立封闭性，让其与外界沟通。这个过程就是组件通讯。组件中的状态是私有的，也就是说，组件的状态只能在组件内部使用，无法直接在组件外使用。

props基本使用

使用props接收（其他组件）传递给当前组件的数据。给组件标签添加属性，就表示给组件传递数据。函数组件通过参数 props 接收数据，类组件通过 this.props。props是实现组件通讯的关键，在实现组件通讯之前，需要先掌握props的基本语法。

函数组件获取props。

// 接收数据：
// props 的值就是：{ name: 'jack', age: 19 }
function Hello(props) {
  return (
    <div>接收到数据:{props.name}</div>
  )
}

// 传递数据：
// 可以把传递数据理解为调用函数 Hello，即：Hello({ name: 'jack', age: 19 })
<Hello name="jack" age={19} />
复制代码

类组件获取props。

// 接收数据：
// class 组件需要通过 this.props 来获取
class Hello extends Component {
  render() {
    return (
      <div>接收到的数据:{this.props.age}</div>
    ) 
  }
}

// 传递数据：
<Hello name='jack' age={19} />
复制代码

props的注意点

props 是只读对象，只能读取对象中的属性，无法修改。单向数据流，也叫做：自上而下的数据流。父组件中的数据可以通过 props 传递给子组件，并且，当父组件中的数据更新时，子组件就会自动接收到最新的数据。父组件的数据更新会流动到子组件，不能反过来，子组件直接去修改父组件的数据。就像瀑布的水一样只能从上往下流动，并且，当上游的水变浑浊，下游的水也会受到影响。props可以传递任意数据（数字字符串布尔类型数组对象函数 jsx）

组件通讯-父传子

父组件提供要传递的state数据，给子组件标签添加属性，值为 state 中的数据，子组件中通过 props 接收父组件中传递的数据。

父组件提供数据并且传递给子组件。

class Parent extends React.Component {
    state = { lastName: '王' }
    render() {
        return (
            <div>
                传递数据给子组件：<Child name={this.state.lastName} />
            </div>
        )
    }
}
复制代码

子组件接收数据。

function Child(props) {
	return <div>子组件接收到数据：{props.name}</div>
}
复制代码