1.状态提升(中间人模式)
React中的状态提升概括来说,就是将多个组件需要共享的状态提升到他们最近的父组件上,在父组件上去改变这个状态,然后通过props分发给子组件。
2.发布订阅模式实现
var bus = {
// 订阅
list: [],
subscribe(callback) {
console.log(callback);
this.list.push(callback)
},
// 发布
publish(text) {
console.log(this.list);
this.list.forEach(callback => {
callback && callback(text)
})
}
}
// 订阅者
bus.subscribe((value) => {
console.log("11111", value);
})
bus.subscribe((value) => {
console.log("22222", value);
})
bus.publish("厉害了")
3.context状态树传参
import React, { Component } from 'react'
// 创建context对象
const GlobalContext = React.createContext()
export default class setState extends Component {
render() {
return (
<GlobalContext.Provider value={{
tell: "123456"
}}>
<div>
<State></State>
</div>
</GlobalContext.Provider>
)
}
}
class State extends Component {
render() {
return (<GlobalContext.Consumer>
{
(value) => {
return (
<div>
{value.tell}
</div>
)
}
}
</GlobalContext.Consumer>)
}
}
4.插槽
import React, { Component } from 'react'
export default class setState extends Component {
render() {
return (
<div>
<State>
<div>1111</div>
<div>2222</div>
<div>3333</div>
</State>
</div>
)
}
}
class State extends Component {
render() {
// props中的children属性
// console.log(this.props.children);
return (
<div>
{/* 会将三个div都显示出来 */}
{this.props.children}
{/* 可以根据数组的特性选择,也能调整显示不同顺序 */}
{this.props.children[1]}
</div>
)
}
}