参考：blog.csdn.net/p445098355/… www.jianshu.com/p/e74202ec3… blog.csdn.net/weixin_4360…

一、父组件向子组件传值

方法一：直接传值（类组件与函数组件）

在父组件渲染子组件时，直接向子组件传递参数值
在子组件的props内部获取父组件传递过来的参数值

方法二：使用上下文（类组件与函数组件）

Context不仅可以用来进行父传子，也可以用来作为跨级传递数据

useContext可以在组件之间共享状态

主要实现方式为

在父组件调用react.CreateContext创建context对象
使用Provider将子组件包裹起来，将子组件共享的参数写在value值中
在子组件中，使用useContext即可获取共有状态

二、子组件向父组件传值

方法一：父组件向子组件传递方法，子组件通过调用父组件的方法，将改变的值传递给父组件

React将子组件的ref传递给父组件的方法

方法一：在子组件初始化时将ref通过事件传递给父组件

React提供的ref属性可以用来操纵React组件实例或者DOM元素的接口。注意function函数组件是没有办法用ref获取的，原因是ref回调函数会在组件被挂载时，将组件实例传递给函数，但是使用function定义的函数并没有实例。但是仍然可以获取函数组件中的DOM元素。类组件可以获取组件实例，因此ref会在组件挂载的时候将实例传递给组件。

定义一个ref回调函数
将其父组件的this绑定给这个回调函数
将该回调函数传递给子组件
子组件将该函数赋值给到需要获取DOM元素的ref

方法二： React16之后用的Forwarding Refs

React.forwardRef，参数是一个function，这个function包含props和ref,返回组件，这个ref可以用于任何子组件或者DOM。父组件的代码

import react,{Component} from 'react';
import Children from '../components/children';

export default class Test extends Component{
   constructor(props){
      super(props);
      this.buttonRef = React.createRef();
   }
   render(){
      return(
         <div>
            父组件
            <p onClick={()=>{console.log(this.buttonRef)}}>我要获取子组件的buttonRef</p>
            <Children ref={this.buttonRef}>子组件</Children>
         </div>
      )
   }
}

子组件代码

import React from 'React';

const children = React.forwardRef((props,ref)=>{
  return(
     <button ref={ref}>{props.children}</button>
  )
})

export default Children;

方法三：高阶组件转发ref

一个高阶组件就是包装了另外一个React组件的React组件。高阶组件可以进行代码复用、逻辑抽象、渲染劫持、State抽象和更改以及props更改。

三、同级组件之间传值

子组件将值传递给父组件，父组件将值传递给另外的子组件。

四、其他

采用状态管理机制，react-redux,redux-saga,dva

React中的状态传递