React系列之七：父子组件通信
前言本节我们将介绍React中父子组件通信的方法，父子通信的方法，子父子通信。本文将为您介绍以下内容：组件的首次嵌套。父组件与子组件通信。子组件与父组件通信。UI被拆分成独立的可重用代码片段，每个片段都是独立构思的。为什么需要嵌套组件？如果一个应用程序的所有逻辑都存在于一个组件中，那么这个组件将变得非常臃肿并且让维护者望而却步。所以我们通常会进行组件化开发，而组件化开发的核心思想就是将一个大的组件拆分成很多小的组件，然后将这些组件组合嵌套在一起，就形成了我们的应用。分析下面代码的嵌套逻辑:你真好看
)}functionAvatar(){return(
小明
)}层级是这样的当组件只有用于展示，这对我们开发者还是比较友好的，但是对于需要相互通信的组件呢？比如app发起了网络请求获取数据，现在需要将数据传递过去，让Comment组件获取相应的数据进行渲染。也可能是子组件发生了一些事件，一些操作需要父组件来完成。子组件需要将事件传递给父组件。来来来，本章的主题来了！子组件为Class组件时，父组件与子组件通信='https://xhs-rookies.com/'name='小明'/> )}}classCommentextendsReact.Component{constructor(props){super(props);}return(
{this.props.comment}
)}classAvatarextendsReact.组件{构造函数（道具）{超级（道具）；}返回（
{this.props.name}
)}注意：props的主要作用是让使用这个组件的父组件通过inparameters对组件进行配置，是从外部传入的配置参数，在组件内部是无法控制和修改的。组件props永远不会改变，除非外部组件主动传入新的props。所有React组件都必须像纯函数一样保护它们的props免受更改。如果子组件是函数组件而我们的组件是函数呢？classAppextendsReact.Component{render(){return()}}functionComment(props){const{comment}=props;return({comment}
)}functionAvatar(props){const{src,name}=道具;return({name}
)}函数组件比较简单，因为不需要有构造方法，也不需要有这个问题。子组件到父组件的通信在某些情况下，我们需要将消息从子组件传递到父组件。在React中，消息也是通过props传递的，只是此时父组件传递了一个回调函数给子组件，在子组件中可以调用这个函数。让我们看看如何实现这个需求？Comment组件中的Like按钮当点击Like按钮时，评论组件中应该显示点赞数+1this.state={counter:0}}changeCoutenr(count){this.setState({counter:this.state.counter+count})}return({this.props.comment}
{'当前点赞数'+this.state.counter}this.changeCounter(1)}>
