父元件向子元件通訊
React資料流動是單向的,父元件向子元件通訊也是最常見的;父元件通過props向子元件傳遞需要的資訊
父元件
import React, {PureComponent} from "react"
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
import Child from "views/child"
export default class Parent extends React.Component {
constructor(props) {
super(props)
}
render() {
return (
<div>
<Child name="飛旋的留戀"></Child>
</div>
)
}
}
複製程式碼子元件
import React, {PureComponent} from "react"
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
export default class Child extends React.Component {
constructor(props) {
super(props)
}
render() {
console.log(this.props)
return (
<div>{this.props.name}</div>
)
}
}複製程式碼子元件向父元件通訊
利用回撥函式 利用自定義事件機制,即子元件通過呼叫父元件傳遞到子元件的方法向父元件傳遞訊息的
父元件
import React, {PureComponent} from "react"
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
import Child from "views/child"
export default class Parent extends React.Component {
constructor(props) {
super(props)
this.state = {
name: ""
}
}
sayname = (name) => {
this.setState({
name: name
})
}
render() {
return (
<div>
<Child sayname ={this.sayname} name={this.state.name}></Child>
</div>
)
}
}複製程式碼子元件
import React, {PureComponent} from "react"
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
export default class Child extends React.Component {
constructor(props) {
super(props)
}
componentDidMount() {
console.log(this.props)
this.props.sayname("飛旋的留戀")
}
render() {
return (
<div>{this.props.name}</div>
)
}
}複製程式碼跨級元件通訊（Context 通訊）
context 打破了元件和元件之間通過 props 傳遞資料的規範，極大地增強了元件之間的耦合性,縮短了父元件到子元件的屬性傳遞路徑,就如全域性變數一樣，context 裡面的資料能被隨意接觸就能被隨意修改，每個元件都能夠改 context 裡面的內容會導致程式的執行不可預料。但是這種機制對於前端應用狀態管理來說是很有幫助的，因為畢竟很多狀態都會在元件之間進行共享，context會給我們帶來很大的方便
父元件
import React, {PureComponent} from "react"
import {BrowserRouter as Router, Route, Link,withRouter} from 'react-router-dom'
import PropTypes from 'prop-types'
import User from "views/user"
class Home extends React.Component {
constructor(props){
super(props)
this.state = {
color: "red"
}
}
componentDidMount() {
}
static childContextTypes = {
color:PropTypes.string,
changeColor:PropTypes.func
}
getChildContext() {
return {
color:this.state.color,
changeColor: this.changeColor
}
}
changeColor = () => {
this.setState({
color: "blue"
})
}
render() {
return (
<div>
<User></User>
</div>
)
}
}
export default Home;複製程式碼子元件
import React, {PureComponent} from "react"
import PropTypes from 'prop-types'
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
export default class User extends React.Component {
constructor() {
super()
}
static contextTypes={
color: PropTypes.string,
changeColor: PropTypes.func
}
render() {
console.log(this.context)
return (
<div style={{color:this.context.color}}>
user
<button onClick={this.context.changeColor}>改變color</button>
</div>
)
}
}
複製程式碼注意：
- 如果父元件設定了context，那麼它的子元件都可以直接訪問到裡面的內容，它就像這個元件為根的子樹的全域性變數。
- 父元件可以通過 getChildContext 方法返回一個物件，這個物件就是子樹的 context，提供 context 的元件必須提供 childContextTypes 作為 context 的宣告和驗證。
- 任意深度的子元件都可以通過 contextTypes 來宣告你想要的 context 裡面的哪些狀態，然後可以通過 this.context 訪問到那些狀態。
Redux
這裡就不多說了