Sui Move 前端共学笔记(六)-Context

HOH水分子社区，是一个专注于编程、教育和创新的社区。

需求

使用服务调用者模式完成笔记四需求。

Context模式

如图所示，Provider在范围内提供服务，调用者在服务提供范围内获取服务。

核心代码

const GlobalContext=React.createContext()

创建上下文，用于定义服务和调用者。

<GlobalContext.Provider service={提供的服务}>
       {组件代码}
</ GlobalContext.Provider>

<GlobalContext.Consumer>
    {(value)=>{调用者组件代码}}
</GlobalContext.Consumer>

定义供应商，和消费者，消费者代码部分必须使用回调函数。

需求实现代码

import React, {Component} from 'react';
import axios  from "axios";
import "../css/film_state_up.css"


const GlobalContext=React.createContext()
// 创建上下文


class APP extends Component {
    constructor() {
        super();
        this.state={
            filmList:[],
            filmDetail:""
        }
        axios.get("/test.json").then(
            res => {
                console.log(res.data.data.films);
                this.setState({filmList:res.data.data.films});
            }
        )
    }
    // 组件初始化

    render() {
        return (
            <GlobalContext.Provider value={
                {filmDetail:this.state.filmDetail, changeDetail:(value)=>{this.setState({filmDetail:value})}
                }}>
                // 定义provider，提供获取状态filmDetail和修改状态filmDetail的服务。
                <div>
                    {this.state.filmList.map(item=>
                        <FilmList key={item.filmId} {...item}></FilmList>
                    )}

                    <FilmDetail/>
                </div>
            </GlobalContext.Provider>
        );
    }
}

class FilmList extends Component{
    render() {
        let {name,poster,grade,synopsis }=this.props
        return (
            <GlobalContext.Consumer>
            // 定义调用者
                {
                    (value)=>{
                        return (
                            <div className={"filmItem"} onClick={() => {
                                console.log(synopsis);
                                value.changeDetail(synopsis);
                                // 调用者调用修改filmDetail状态的服务。
                            }}>
                                <img src={poster} alt={name}/>
                                <h4>{name}</h4>
                                <div>观众评分：{grade}</div>
                            </div>
                        )
                    }
                }
            </GlobalContext.Consumer>
        )
    }
}

class FilmDetail extends Component {
    render() {
        return (
            <GlobalContext.Consumer>
            // 定义调用者
                {
                    (value)=>
                        <div className={"filmDetail"}>
                            {value.filmDetail}
                            // 调用者调用获取filmDetail状态的服务。
                        </div>
                }
            </GlobalContext.Consumer>
        )
    }
}

export default APP;

在该模式中，电影组件与电影概述组件，同为消费者，首页组件作为服务提供者，提供修改电影概述和获取电影概述的服务，当用户点击电影列表时，电影组件调用setState修改filmDetail的值，此时因为filmDetail状态被修改，首页组件重新渲染，电影概述组件调用获取filmDetail服务显示电影概述内容，效果同笔记（四）。