React系列七：父子组件通信

前言

这节我们将介绍 React 中父子组件通信的方法，父与子通信、子与父通信的方法。

本文会向你介绍以下内容：

• 初识组件的嵌套
• 父组件向子组件通信
• 子组件向父组件通信

初识组件的嵌套

让我们回顾一下在之前的学习中，我们说过：

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思

为什么要进行组件嵌套呢？

如果一个应用程序的所有逻辑全存在于一个组件中，那这个组件会变的相当臃肿且让维护人员望而却步。

所以我们通常是组件化开发，而组件化开发的核心思想便在于将一个大组件拆分成许多小组件，然后再将这些组件组合嵌套在一起，形成我们的应用程序。

分析一下下面代码的嵌套逻辑

class App extends React.Component {
  render(){
    return (
        <div>
          <Comment />
          <Avatar  />
      </div>
    )
  }
}

function Comment (){
  return(
    <div>评论：你真好看</div>
  )
}

function Avatar (){
  return(
      <img src=""></img>
    <div>小明</div>
  )
}

层级是这样的

当组件仅用来展示时，这对我们开发者来说是相当友好了，可组件要相互进行通信呢？

• 比如 App 中进行了网络请求获取了数据，现在要将数据传递下去，让 Comment 组件拿到相应数据进行渲染
• 也可能是子组件中发生了某些事件，需要由父组件来完成某些操作，那就需要子组件向父组件传递事件

来了，来了，本章的主题来了！

父组件向子组件通信

当子组件为 Class 组件

class App extends React.Component {
  render(){
    return (
        <div>
          <Comment comment='评论：你真好看！'/>
          <Avatar  src='https://xhs-rookies.com/' name='小明'/>
      </div>
    )
  }
}

class Comment extends React.Component {
  constructor(props){
    super(props);
  }
  return(
    <div>{this.props.comment}</div>
  )
}

class Avatar extends React.Component {
  constructor(props){
    super(props);
  }
  return(
      <img src={this.props.src}></img>
    <div>{this.props.name}</div>
  )
}

注意：props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件。它是外部传进来的配置参数，组件内部无法控制也无法修改。除非外部组件主动传入新的 props，否则组件的 props 永远保持不变。

所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。

当子组件为 function 组件

当我们的组件为 function 时又是怎样的呢？

class App extends React.Component {
  render(){
    return (
        <div>
          <Comment comment='评论：你真好看！'/>
          <Avatar  src='https://xhs-rookies.com/' name='小明'/>
      </div>
    )
  }
}

function Comment (props){
    const {comment} = props;

  return(
    <div>{comment}</div>
  )
}

function Avatar (props){
    const {src , name} = props;

  return(
      <img src={src}></img>
    <div>{name}</div>
  )
}

function 组件相对来说比较简单，因为不需要有构造方法，也不需要有 this 的问题。

子组件向父组件通信

某些情况下，我们需要从子组件向父组件传递消息。

在 React 中同样是通过 props 传递消息，只是此时由父组件传递给子组件一个回调函数，在子组件中调用此函数即可。

让我们看看怎么实现这个需求呢？

• 在 Comment 组件中有点赞按钮
• 当点击点赞按钮时，评论组件中需显示点赞数+1

class Comment extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      counter:0
    }
  }

  changeCoutenr(count){
    this.setState({
      counter: this.state.counter + count
    })
  }

  return(
    <div>
         <div>{this.props.comment}</div>
             <p>{'当前点赞数'+this.state.counter}
      <thumsButton btnClick={e => this.changeCounter(1)}></thumsButton>
    </div>

  )
}

function thumsButton (props){
  const {btnClick} = props;
  return <button onClick={btnClick}>点赞</button>
}

下节预告

在这一节我们学习了React中父子组件通信，在下一节中，我们将给大家介绍React中非父子组件通信的功能知识，敬请期待！