React 數(shù)據(jù)流管理：組件之間數(shù)據(jù)是如何傳遞的？
截至到目前，我們已經(jīng)掌握了組件的概念、組件的傳值、以及組件狀態(tài)的相關(guān)內(nèi)容。有興趣的寶子可以翻看俺之前發(fā)布的內(nèi)容，筆芯。
你應(yīng)該發(fā)現(xiàn)了，我們學(xué)習 React ，除了環(huán)境搭建和不多的 JSX 語法外，極大的篇幅都在學(xué)習 React 中的數(shù)據(jù)流管理。
但是，我們在前面學(xué)習組件傳值時，一直都是將值從父級組件傳入子級組件中，從來沒有將子級組件的值傳入到父級組件，也沒有在多個兄弟組件間傳值。
而根據(jù)單向數(shù)據(jù)流的內(nèi)容推測，我們也不敢確定數(shù)據(jù)是否可以從子組件傳入父級組件。
為什么沒有在之前就說呢？因為我們的基礎(chǔ)知識掌握的還不夠，現(xiàn)在學(xué)完組件狀態(tài)，就可以了，那到底應(yīng)該怎么做呢？
組件數(shù)據(jù)傳遞
子組件向父組件傳值
我們先來看子級組件如何向父級組件傳遞數(shù)據(jù)：其本質(zhì)上就是使用回調(diào)函數(shù)。
具體怎么做呢？
父級組件引入子級組件后，在 JSX 中依然使用 Props 的方式，將提前寫好的父級組件的函數(shù)，傳入子級組件，在子級組件中使用 this.props 接收傳入的函數(shù)并調(diào)用，在函數(shù)的調(diào)用中，將需要出入父級組件的值，傳入函數(shù)調(diào)用的實參。
父組件：
import React, { Component } from 'react'import States from './States'export class App extends Component {state = {name:'lisi'}callBack = (req)=>{this.setState({name:req})}render() {return (<div><h1>APP</h1><p>{this.state.name}</p>{/* 將父級組件中的函數(shù)，以 Props 的方式傳入子級組件 */}{/* 子級組件調(diào)用函數(shù)，以回調(diào)函數(shù)的方式將子組件的值傳回給父級組件 */}<States fun={this.callBack} /></div>)}}export default App
子組件：
import React, { Component } from 'react'export class States extends Component {render() {return (<div>{/* 子組件使用 Props 接收父級組件傳入的函數(shù)并調(diào)用 */}{/* 將需要傳入父級組件的值，以實參的方式傳入到函數(shù)調(diào)用 */}<button onClick={()=>{this.props.fun('xliling')}}>點我</button></div>)}}export default States
父級組件向子級組件通信，我們使用的是 Props 屬性，子級組件向父級組件通信則是結(jié)合了 Props 和回調(diào)函數(shù)進行實現(xiàn)的，集合這兩點，我們就可以實現(xiàn)兄弟組件的通信了。
兄弟組件通信
兄弟組件的通信原理其實也很簡單，就是使用回調(diào)函數(shù)的方式，先將數(shù)據(jù)傳入父級組件，再由父級組件使用 Props 的方式將數(shù)據(jù)傳入子級組件，如下圖所示：
而具體代碼的實現(xiàn)，并沒有什么新的知識點內(nèi)容，無非就是兩者結(jié)合一下而已：
我們在父級組件中，引入子級組件的內(nèi)容，然后將函數(shù)傳入數(shù)據(jù)來源的子級組件，同樣使用 Props 再將數(shù)據(jù)傳入另一個組件中。
父級組件的代碼如下：
import React, { Component } from 'react'import States from './States'import Brother from './Brother'export class App extends Component {state = {name:'lisi'}callBack = (req)=>{this.setState({name:req})}render() {return (<div><h1>APP</h1><p>{this.state.name}</p><States fun={this.callBack} /><Brother fromApp={this.state.name}></Brother></div>)}}export default App
接著我們看數(shù)據(jù)來源組件中，通過 Props 獲取回調(diào)函數(shù)，調(diào)用并傳入數(shù)據(jù)：
import React, { Component } from 'react'export class States extends Component {render() {return (<div><button onClick={()=>{this.props.fun('xliling')}}>點我</button></div>)}}export default States
然后再接收數(shù)據(jù)的子組件中，獲取數(shù)據(jù)：
import React, { Component } from 'react'export class Brother extends Component {render() {return (<div><h2>Brother </h2><p>{this.props.fromApp}</p></div>)}}export default Brother
總結(jié)
子組件向父級組件傳值就是簡單的回調(diào)函數(shù)，并沒有復(fù)雜的手法。，而利用回調(diào)函數(shù)和 Props 也可以輕松的實現(xiàn)兄弟組件間的數(shù)據(jù)傳遞，至此，我們利用 Props 完成了對 React 數(shù)據(jù)流管理的所有內(nèi)容的學(xué)習。
而之前提到的關(guān)于 JSX 交互部分，用戶的頁面操作，都是由表單承接的。那么接下來的表單的處理就是重點了，下周再更，嘻嘻(●'?'●)
推薦閱讀：
React 面試不完全指南：為什么要學(xué)數(shù)據(jù)流管理？
數(shù)據(jù)流管理方案 | Redux 和 MobX 哪個更好？
拆解高頻面試題：你是如何理解單向數(shù)據(jù)流的？
恭喜你又在前端道路上進步了一點點。
點個“在看”和“贊”吧！