React元件通訊

分類：

​ 父子元件通訊

​ 無論父元件傳遞是props還是state,子元件都是通過props接收

​ 子父元件通訊

​ 父元件傳遞方法給子元件，子元件呼叫父元件傳遞過來的方法

​ 注意： 自己的狀態自己更改

​ 非父子元件通訊

​ ref鏈

​ 1. ref = 『***』 this.refs.***

​ 2. ref = this.*** 【推薦】

​ 跨元件通訊

​ context

​ 使用流程

​ - 建立上下文 react.createcontext()

​ - 使用上下文包裹目標元件的父元件

​ - 通過 this.context來使用資料

多元件狀態共享

​ flux

​ redux

​ mobx 【 阿里 】

父元件與子元件通訊

子元件與父元件通訊

跨元件通訊

在react沒有類似vue中的事件匯流排來解決這個問題，我們只能借助它們共同的父級元件來實現，將非父子關係裝換成多維度的父子關係。react提供了contextapi來實現跨元件通訊, react 16.3之後的contextapi較之前的好用。

例項，使用context實現購物車中的加減功能

// countercontext.js

import react,  from 'react'
const  = createcontext()
class countprovider extends component 
}  increasecount = () => )
}  decreasecount = () => )
}  render() )}}
export

// 定義countbutton元件

const countbutton = (props) => ) =>  = props
const handleclick = type === 'increase' ? increasecount : decreasecount
const btntext = type === 'increase' ? '+' : '-'
return }}
)}

// 定義count元件，用於顯示數量

const count = (prop) => ) => }}
)}

// 組合

render () 
}

複雜的非父子元件通訊在react中很難處理，多元件間的資料共享也不好處理，在實際的工作中我們會使用flux、redux、mobx來實現

功能：​ 1. 進行某些方法或是屬性的復用

​ 2. 讓外層的元件替我們完成任務，那麼裡層元件直接使用就可以了

const newcomponent = higherordercomponent(yourcomponent)

import react, from 'react'

return class newcomponent extends component

}}

// 使用方式

render () 
}

react 元件通訊

父元件通過props向子元件傳遞需要的資訊 parent.jsximport react,from react import son from components test1 class parent extends component render export default parent c...

react元件通訊

元件是封閉的，要接收外部資料應該通過 props 來實現 props的作用 接收傳遞給元件的資料 傳遞資料 給元件標籤新增屬性 接收資料 函式元件通過引數props接收資料，類元件通過 this.props 接收資料 function hello props class hello extends ...

React元件通訊 高階元件

子父元件通訊 非父子元件通訊 跨元件通訊 在react沒有類似vue中的事件匯流排來解決這個問題，我們只能借助它們共同的父級元件來實現，將非父子關係裝換成多維度的父子關係。react提供了contextapi來實現跨元件通訊,react 16.3之後的contextapi較之前的好用。使用流程 im...