前言：正在做React最新的B端项目。由于项目没有使用Redux等数据管理库，所以涉及到很多组件之前的数据传输方式以及嵌套组件的传输方式。志信特此整理记录。常用搭建通信方式：父子组件通信、子父组件通信、兄弟组件通信、孙子通信（嵌套组件）等代码环境：react:^16.13.0react-dom:^16.8.2parent-child组件通信：一般来说是父组件通过props、refs等调用子组件的方法和属性；props：子组件接受父组件的值更新视图类组件：importReact,{Component}from'react'//子组件类ChildextendsComponent{constructor(props){super(props)this.state={}}render(){const{mun}=this.props;return(<>这里是子子组件:
{mun}
)}}//父组件类ParentextendsComponent{constructor(props){super(props)this.state={mun:1}}handleParent=()=>{this.setState({mun:this.state.mun+1})}render(){const{mun}=this.statereturn(<>
我是父组件的按钮。你可以点我
)}}exportdefaultParentHookscomponent:importReact,{useState}from'react'constChild=(props)=>{const{mun}=道具；return(<>这里是子子组件：{mun}
)}constParent=()=>{const[mun,setMun]=useState(0)consthandleParent=()=>{setMun((value)=>{returnvalue+1})}return(<>我是父组件的按钮。可以点我
)}exportdefaultParentrefs：父组件通过声明ref获取子组件的对象，操作对象方法类子组件的Component:importReact,{Component,createRef}from'react'//子组件类ChildextendsComponent{constructor(props){super(props)this.state={mun:1}}//子组件积累accumulation=()=>{this.setState({mun:this.state.mun+1})}render(){const{mun}=this.statereturn(<>这里是子组件：{mun}
)}}//父组件类ParentextendsComponent{constructor(props){super(props)//通过ref控制this.createRef=createRef()this.state={}}handleParent=()=>{this.createRef&&this.createRef.current.accumulation()}render(){return(<>我是父组件的按钮。可以点我
)}}导出默认的ParentHooks组件：注意：在hooks中，需要通过forwardRef转发获取ref的值，然后将子组件的useImperativeHandlethrows方法传递给父组件。importReact,{useRef,useState,useImperativeHandle,forwardRef}from'react'constChild=forwardRef((_,ref)=>{const[mun,setMun]=useState(0)//累加方法constaccumulation=()=>{setMun((value)=>{returnvalue+1})}//向父组件抛出方法useImperativeHandle(ref,()=>({accumulation,}),[accumulation]);return(<>hereIt是子子组件：{mun}
)})constParent=()=>{constChildRef=useRef(null);consthandleParent=()=>{ChildRef.current&&ChildRef.current.accumulation()}return(<>我是父组件的按钮。可以点我
)}exportdefaultParent子父组件通信：子组件通过CallBack回调函数获取父组件的方法或Attributes和其他Class组件：importReact,{Component,createRef}from'react'//sub-componentclassChildextendsComponent{constructor(props){super(props)this.state={mun:0}}//子组件累加accumulation=()=>{const{handleParent}=this.propsconst{mun}=this.statethis.setState({mun:this.state.mun+1},()=>{handleParent(this.state.mun)})}render(){const{mun}=this.propsreturn(<>这是子组件：{/*{mun}
*/}我是子组件的按钮，你可以点我)}}//父组件classParentextendsComponent{constructor(props){super(props)//通过ref=createRef()控制this.ChildRefthis.state={getChildmun:0}}handleParent=(_mun)=>{this.setState({getChildmun:_mun})}render(){const{getChildmun}=this.statereturn(<>我是父组件
由子组件值：{getChildmun}
)}}exportdefaultParentHooksComponent:importReact,{useState,useEffect}from'react'constChild=(props)=>{const{handleParent}=props;const[mun,setMun]=useState(0)//子组件累加constaccumulation=()=>{setMun((value)=>{returnvalue+1})}useEffect(()=>{if(mun!==0){handleParent(mun)}},[mun]);return(<>这里是子子组件:I是子组件的按钮，可以点我)}constParent=()=>{const[getChildmun,setChildmun]=useState(0);return(<>我是父组件
子组件控制值：{getChildmun}
setChildmun(mun)}/>)}exportdefault父兄弟组件通信：兄弟组件通信一般为两个兄弟父组件下同级组件，以父组件为中介传递Class组件：importReact,{Component,createRef}from'react'//子组件1classChild1extendsComponent{constructor(props){super(props)this.state={mun:0}}render(){const{brother}=this.propsreturn(<>IamChild1component:{brother}
)}}//子组件1classChild2extendsComponent{constructor(props){super(props)this.state={mun:0}}//改变自己的值，通过父组件传递累加=()=>{const{brotherCallback}=this.propsthis.setState({mun:this.state.mun+1},()=>{brotherCallback(this.state.mun)})}render(){const{mun}=this.propsreturn(<>我是Child2组件t:
<按钮onClick={this.accumulation}>点我更改[Child1]组件的值)}}//父组件classParentextendsComponent{constructor(props){super(props)//由ref控制this.ChildRef=createRef()this.state={brother:0}}//使用中介brotherCallback=(mun)=>{this.setState({brother:mun})}render(){const{brother}=this.statereturn(<>我是父组件
)}}导出默认的ParentHooks组件：importReact,{useState,useEffect}from'react'constChild1=(props)=>{const{brother}=props;return(<>IamChild1component:{brother}
)}constChild2=(props)=>{const[mun,setMun]=useState(0)const{brotherCallback}=道具//改变自己的值，通过父组件传递constaccumulation=()=>{setMun((value)=>{returnvalue+1})}useEffect(()=>{if(mun!==0){brotherCallback(mun)}},[mun])return(<>我是Child2组件：
点我改变[Child1]组件的值)}constParent=()=>{const[brother,setBrother]=useState(0);return(<>我是父组件
setBrother(mun)}/>)}exportdefaultParent(grandfatherandgrandsoncomponents)nestedcomponents：嵌套组件其实可以使用父子组件的传递方式，但是如果层级太深，显然不好维护，所以推荐使用Context来维护数据源的状态。详情请参考：上下文文档详细描述Classcomponent:importReact,{Component,createRef}from'react'//可以放到js文件中，以后维护constThemeContext=React.createContext();//GrandsoncomponentclassGrandsonextendsComponent{constructor(props){super(props)this.state={}}staticcontextType=ThemeContext;shouting=()=>{const{grandsonCallback}=this.contextgrandsonCallback({mass:"我累了，让我们销毁"})}render(){const{parentObj}=this.contextreturn(<>我是孙子组件
接收值：{parentObj.name}年龄{parentObj.age}岁
呼喊)}}//子组件classChildextendsComponent{constructor(props){super(props)this.state={}}render(){return(<>我是子组件
)}}//父组件类ParentextendsComponent{constructor(props){super(props)this.state={parentObj:{name:"Iamyourgrandpa",age:88},//接受数据grandson:{}}}grandsonCallback=(data)=>{this.setState({grandson:data})}render(){const{parentObj,grandson}=this.state;return(<>我是父组件
{(grandson&&grandson.massge)?grandson.massge:''}
)}}exportdefaultParentHookscomponent:importReact,{useState,useContext}from'react'//你可以放在一个js文件中稍后维护constThemeContext=React.createContext();constGrandson=()=>{constcontext=useContext(ThemeContext)const{parentObj,grandsonCallback}=context;constshouting=()=>{grandsonCallback({mass:"我累了，毁了它"})}return(<>我是孙组件
接收值：{parentObj.name}age{parentObj.age}岁
喊出来)}constChild=()=>{return(<>我是儿子组件
<孙子/>)}constParent=()=>{const[grandson,setGrandson]=useState({});const[parentObj,setParentObj]=useState({name:"我是你的爷爷",age:88});constgrandsonCallback=(data)=>{setGrandson(data)}return(<>我是父组件
{(grandson&&grandson.massge)?grandson.massge:''}
)}exportdefaultParentFinally其实在普通的组件通信中，上面的方法绰绰有余，但是面对复杂的大型项目，建议使用redux等状态存储对象进行统一管理，如如果redux的灵活性不高，也推荐使用dva来管理，就像它的特点：快速上手，易学易用
