React上下文对象(Context)初步使用_rn context 撖寡情-优快云博客

本文链接：https://blog.youkuaiyun.com/lxn_zyl/article/details/117361567

这篇博客介绍了React上下文对象(Context)的基本概念和适用场景，特别适用于跨级组件通信。通过创建和使用Context，可以避免传统props传递的问题。文章详细展示了如何创建Context对象，以及在父组件和子组件中如何使用Provider和Consumer进行数据传递。同时提到了在大型项目中可能更适合使用Redux或Mobx。最后，博客提到了`useContext`钩子的使用，但警告了它可能影响性能优化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初学者初识:

上下文对象:跨级通信

概念:

传统的层级组件通信,需要每一层组件都要写props传递,如果其中没一层组件没有写props,就导致断开通信

适用:

中小型项目.

大型项目还是适用redux或者mobx机会总管理

上下文对象需要跟元素提供数据,如果数据源来自多个组件的话,就不适合使用context了

当数据源是单一的情况下,适用context比较方便

## 语法

```js

//context.js创建共享的上下文对象

const context = React.createContext()

```

```js

//根组件:数据提供者

<Context.Provider value={data}>

    <MySub />

</Context.Provider>

```

```js

// 数据的使用者:后代组件MySub.jsx

// *Consumer里面必须是一个带返回值的函数

<Context.Consumer>

    {

        (data)=>{

            return <div>

                {...data}

            </div>

        }

    }

</Context.Consumer>

```

## useContext

使用它可以省略掉Consumer组件,直接获取到Provider提供的数据,但是会配怀性能优化的memo和shouldComponentUpdate

代码:

创建Context.js文件:

import React from 'react'
export default React.createContext()

创建父组件:

import React, { Component } from 'react'
//引入context文件
import Context from './MyContext'
//引入子组件
import Com from './Com copy'
class App extends Component {
    constructor() {
        super()
        this.state = {
            resume: {
                base: {
                    name: '',
                    age: '',
                    genders: 'male'
                },
                exp: {
                    year: '',
                    comp: '',
                    job: '',
                    detail: '',
                    area: 'lime'
                }
            }
        }
    }

    render() {
        console.log(this.state.resume)
        return (
            <div>
                <Context.Provider value={{resume:this.state.resume}}>
                    <Com />
                </Context.Provider>
            </div>
        )
    }
}
export default App

创建子组件:(函数组件)

import React, { Component, useContext } from 'react'
//引入context文件
import Context from './MyContext'
const App = (props) => {
    console.log(props)
    //获取context文件内容
    const resume = useContext(Context)
    console.log(resume.resume.base.genders)
    return (
        <div>
            <p>
                {/* 使用 */}
                {
                    resume.resume.base.genders
                }
            </p>
        </div>
    )
}
export default App

声明: useContext(Context)

创建组件:(类组件)

import React, { Component, useContext } from 'react'
//引入context文件
import Context from './MyContext'
class App extends Component {
    render() {
        // const { resume } = Context()
        // console.log(resume)
        return (
            <div>
                <Context.Consumer>
                    {
                        (resume) => {
                            return <div>
                                {resume.resume.base.genders}
                            </div>
                        }

                    }
                </Context.Consumer>
            </div>
        )
    }
}
export default App