React 系列七：父子组件通信

快来加入我们吧！

"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。

"Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！

前言

这节我们将介绍 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>
  )
}