1.状态提升(中间人模式)的定义
React中的状态提升概括来说,就是将多个组件需要共享的状态提升到它们最近的父组件
上.在父组件上改变这个状态然后通过props分发给子组件。
2.状态提升的使用
简单讲解一下下面的代码，下面模拟了一个电影列表和详情页面。
进行通信的是列表的item和详情组件。
可以看到先在父组件APP中进行ajax请求拿到所有的列表item数据，然后通过父传子传给item，
同时传递一个getDetail函数给item组件作为它点击事件的回调。这个方法接受了一个存放详情信息的形参。
然后在父组件定义一个State detail 用来传递给详情组件作为它的属性来渲染详情信息。
getDetail方法会用接受的行参数来进行setState改变detail，这时就会重新执行render。
详情信息就从item传递到了详情。实现了兄弟组件的通信。
可以看到在中间人模式下，兄弟组件的所有属性都是由父组件来分发的。并且都能通过父组件的setState来控制。
所以说本质上中间人模式也就是父子通信的应用。
import React, { Component } from 'react'
import axios from 'axios'
export default class App extends Component {
constructor() {
super()
this.state = {
filmList: [],
detail: ""
}
}
componentDidMount() {
axios.get('http://localhost:3000/filmlist.json').then(res => {
console.log(res.data.data.films)
this.setState({
filmList: res.data.data.films
})
})
}
render() {
return (
<div>
{this.state.filmList.map(item => {
return (
<FilmItem getFilmDetail={
(detail) => {
/*
父组件接收到之后，执行this.getFilmDetail(detail)
更新状态，然后分发给FilmDetail组件，
通过父组件为中间人模式实现兄弟传参
*/
this.getFilmDetail(detail)
}
} {...item} key={item.filmId}></FilmItem>
)
})}
<FilmDetail detail={this.state.detail} ></FilmDetail>
</div>
)
}
getFilmDetail(detail) {
console.log(detail)
this.setState({
detail: detail
})
}
}
/* 受控组件 */
class FilmItem extends Component {
render() {
console.log(this.props);
return (
<div style={{ overflow: 'hidden', padding: '10px' }} onClick={
() => {
/*
先将detail通过回调函数传给父组件
*/
console.log(this.props.synopsis)
this.props.getFilmDetail(this.props.synopsis)
}
}>
<img style={{ width: '100px', float: "left" }} src={this.props.poster} alt="" />
<h4>{this.props.name}</h4>
<h5>观众评分:{this.props.grade}</h5>
</div>
)
}
}
class FilmDetail extends Component {
render() {
return (
<div style={{ position: 'fixed', right: '0', top: '100px', background: 'yellow', width: "200px", padding: "10px" }}
>{this.props.detail}</div>
)
}
}