React 数据流管理:组件之间数据是如何传递的?

时间:2021-12-03 05:30:35

React 数据流管理:组件之间数据是如何传递的?

截至到目前,我们已经掌握了组件的概念、组件的传值、以及组件状态的相关内容。有兴趣的宝子可以翻看俺之前发布的内容,笔芯。

你应该发现了,我们学习 React ,除了环境搭建和不多的 JSX 语法外,极大的篇幅都在学习 React 中的数据流管理。

但是,我们在前面学习组件传值时,一直都是将值从父级组件传入子级组件中,从来没有将子级组件的值传入到父级组件,也没有在多个兄弟组件间传值。

而根据单向数据流的内容推测,我们也不敢确定数据是否可以从子组件传入父级组件。

为什么没有在之前就说呢?因为我们的基础知识掌握的还不够,现在学完组件状态,就可以了,那到底应该怎么做呢?

组件数据传递

子组件向父组件传值

我们先来看子级组件如何向父级组件传递数据:其本质上就是使用回调函数。

具体怎么做呢?

父级组件引入子级组件后,在 JSX 中依然使用 Props 的方式,将提前写好的父级组件的函数,传入子级组件,在子级组件中使用 this.props 接收传入的函数并调用,在函数的调用中,将需要出入父级组件的值,传入函数调用的实参。

父组件:

  1. import React, { Component } from 'react' 
  2. import States from './States' 
  3.  
  4. export class App extends Component { 
  5.   state = { 
  6.     name:'lisi' 
  7.   } 
  8.  
  9.   callBack = (req)=>{ 
  10.     this.setState({name:req}) 
  11.   } 
  12.  
  13.   render() { 
  14.     return ( 
  15.       <div> 
  16.         <h1>APP</h1> 
  17.         <p>{this.state.name}</p> 
  18.         {/* 将父级组件中的函数,以 Props 的方式传入子级组件 */} 
  19.         {/* 子级组件调用函数,以回调函数的方式将子组件的值传回给父级组件 */} 
  20.         <States fun={this.callBack} /> 
  21.       </div> 
  22.     ) 
  23.   } 
  24.  
  25. export default App 

子组件:

  1. import React, { Component } from 'react' 
  2.  
  3. export class States extends Component { 
  4.   render() { 
  5.     return ( 
  6.       <div> 
  7.         {/* 子组件使用 Props 接收父级组件传入的函数并调用 */} 
  8.         {/* 将需要传入父级组件的值,以实参的方式传入到函数调用 */} 
  9.         <button onClick={()=>{this.props.fun('xliling')}}>点我</button> 
  10.       </div> 
  11.     ) 
  12.   } 
  13.  
  14. export default States 

父级组件向子级组件通信,我们使用的是 Props 属性,子级组件向父级组件通信则是结合了 Props 和回调函数进行实现的,集合这两点,我们就可以实现兄弟组件的通信了。

兄弟组件通信

兄弟组件的通信原理其实也很简单,就是使用回调函数的方式,先将数据传入父级组件,再由父级组件使用 Props 的方式将数据传入子级组件,如下图所示:

React 数据流管理:组件之间数据是如何传递的?

而具体代码的实现,并没有什么新的知识点内容,无非就是两者结合一下而已:

我们在父级组件中,引入子级组件的内容,然后将函数传入数据来源的子级组件,同样使用 Props 再将数据传入另一个组件中。

父级组件的代码如下:

  1. import React, { Component } from 'react' 
  2.  
  3. import States from './States' 
  4. import Brother from './Brother' 
  5.  
  6. export class App extends Component { 
  7.   state = { 
  8.     name:'lisi' 
  9.   } 
  10.  
  11.   callBack = (req)=>{ 
  12.     this.setState({name:req}) 
  13.   } 
  14.  
  15.   render() { 
  16.     return ( 
  17.       <div> 
  18.         <h1>APP</h1> 
  19.         <p>{this.state.name}</p> 
  20.         <States fun={this.callBack} /> 
  21.         <Brother fromApp={this.state.name}></Brother> 
  22.       </div> 
  23.     ) 
  24.   } 
  25.  
  26. export default App 

接着我们看数据来源组件中,通过 Props 获取回调函数,调用并传入数据:

  1. import React, { Component } from 'react' 
  2.  
  3. export class States extends Component { 
  4.   render() { 
  5.     return ( 
  6.       <div> 
  7.         <button onClick={()=>{this.props.fun('xliling')}}>点我</button> 
  8.       </div> 
  9.     ) 
  10.   } 
  11.  
  12. export default States 

然后再接收数据的子组件中,获取数据:

  1. import React, { Component } from 'react' 
  2.  
  3. export class Brother extends Component { 
  4.   render() { 
  5.     return ( 
  6.       <div> 
  7.         <h2>Brother </h2> 
  8.         <p>{this.props.fromApp}</p> 
  9.       </div> 
  10.     ) 
  11.   } 
  12.  
  13. export default Brother 

总结

子组件向父级组件传值就是简单的回调函数,并没有复杂的手法。,而利用回调函数和 Props 也可以轻松的实现兄弟组件间的数据传递,至此,我们利用 Props 完成了对 React 数据流管理的所有内容的学习。

而之前提到的关于 JSX 交互部分,用户的页面操作,都是由表单承接的。那么接下来的表单的处理就是重点了,下周再更,嘻嘻

原文链接:https://mp.weixin.qq.com/s/r60kUkRGXTqzdihY_saFLw