React学习笔记21-非父子通信(状态提升)

合集 - React学习记录(23)

1.React学习笔记01-React的基本认识2023-10-162.React学习笔记02-创建React项目2023-10-163.React学习笔记03-编写第一个react应用程序2023-10-164.React学习笔记04-JSX语法2023-10-175.React学习笔记05-类组件2023-10-196.React学习笔记06-函数式组件2023-10-197.React学习笔记07-组件嵌套2023-10-198.React学习笔记08- 组件的样式2023-10-199.React学习笔记09- 事件处理2023-10-2010.React学习笔记10- Ref的应用2023-10-2011.React学习笔记11-状态(state)2023-10-2012.React学习笔记12-循环渲染2023-10-2013.React学习笔记13-小案例toList(状态,状态维护,条件渲染渲染)2023-10-2114.React学习笔记14-dangerousSetinnerHtml指令2023-10-2115.React学习笔记15-setState同步异步问题2023-10-3116.React学习笔记16-属性props2023-11-0317.React学习笔记17-属性VS状态2023-11-0318.React学习笔记18-非受控组件2023-11-0419.React学习笔记19-受控组件2023-11-0420.React学习笔记20-父子通信(子传父)2023-11-08

21.React学习笔记21-非父子通信(状态提升)2023-11-08

22.React学习笔记22-订阅发布模式2023-11-0823.React学习笔记23-非父子通信(订阅发布模式)2023-11-08

收起

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>
        )
    }
}