18 Context与组合的应用场景与使用问题

最新推荐文章于 2024-10-22 09:55:15 发布

Stephy_Yy

最新推荐文章于 2024-10-22 09:55:15 发布

阅读量143

点赞数

分类专栏：系统学习 # react 文章标签： react.js

本文链接：https://blog.csdn.net/weixin_43503511/article/details/120641793

版权

系统学习同时被 2 个专栏收录

112 篇文章 1 订阅

订阅专栏

react

35 篇文章 0 订阅

订阅专栏

这篇博客探讨了React中的Context API与组件组合两种数据传递方式。文章指出，Context API适合于多个组件需要共享同一数据但避免层层传递的情况，然而它可能削弱组件的纯度，降低复用性。另一方面，组件组合在层级不深时可以有效传递数据，保持组件的简洁。示例代码展示了如何使用Context API创建上下文，并在组件中使用，同时也展示了通过组合组件来达到相同效果的方法。

摘要由CSDN通过智能技术生成

contextType

指定context类型为创建的上下文，此时不需要用Consumer组件包裹，使用this.context即可访问
会向上找最近的上下文并取值
最适合的场景：杂乱无章的组件都需要同一些数据；若单纯为了不层层传递属性，使用context是不合适的
Context弱点：弱化及污染组件的纯度，导致组件复用性降低
使用组合组件（组件嵌套），则不需要使用context

使用context

const CityContext = React.createContext({
    value: 'hongkong',
    label: '香港'

})
// 渲染文字
class Content extends React.Component {
    render() {
        return (
            <h1>{this.props.label}</h1>
        )
    }
}
// 下拉选
class Selector extends React.Component {
    static contextType = CityContext
    render() {
        return (
            <>
                <select
                    value={this.context.name}
                    onChange={(e) => {
                        this.props.changeCity({
                            value: e.target.value,
                            label: e.target[e.target.selectedIndex].label
                        })
                    }}>
                    <option value="hongkong">香港</option>
                    <option value="hangzhou">杭州</option>
                    <option value="fujian">福建</option>
                    <option value="manila">马尼拉</option>
                </select>
            </>
        )
    }
}
class Main extends React.Component {
    state = {
        cityInfo: {
            value: 'hongkong',
            label: '香港'
        }
    }
    changeCity = (obj) => {
        this.setState({
            cityInfo: obj
        })
    }
    render() {
        return (
            <>
                <CityContext.Provider value={this.state.cityInfo}>
                    <Content label={this.state.cityInfo.label} />
                    <Selector changeCity={this.changeCity} />
                </CityContext.Provider>
            </>
        )
    }
}
ReactDOM.render(<Main />, document.getElementById('app'))

使用组合组件

层级嵌套不深时

// 渲染文字
class Content extends React.Component {
    render() {
        return (
            <div>
                <h1>{this.props.label}</h1>
                <div>{this.props.selector}</div>
            </div>
        )
    }
}
// 下拉选
class Selector extends React.Component {
    render() {
        return (
            <>
                <select
                    value={this.props.dataForSelector.name}
                    onChange={(e) => {
                        this.props.changeCity({
                            value: e.target.value,
                            label: e.target[e.target.selectedIndex].label
                        })
                    }}>
                    <option value="hongkong">香港</option>
                    <option value="hangzhou">杭州</option>
                    <option value="fujian">福建</option>
                    <option value="manila">马尼拉</option>
                </select>
            </>
        )
    }
}
class Main extends React.Component {
    state = {
        cityInfo: {
            value: 'hongkong',
            label: '香港'
        }
    }
    changeCity = (obj) => {
        this.setState({
            cityInfo: obj
        })
    }
    render() {
        return (
            <>
                <Content label={this.state.cityInfo.label} 
                selector={<Selector changeCity={this.changeCity} dataForSelector={this.state.cityInfo} />} />
                {/* 组合组件 在这里传入了数据 */}
            </>
        )
    }
}
ReactDOM.render(<Main />, document.getElementById('app'))