react中context的使用

react中context的使用

context的作用：

Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。

使用步骤

一：在react中通过我们的createContext方法创建我们的context

二：一个context中包含一个provider和consumer

三：创建我们的store文件，定义我们的提供者，返回我们的Context.Provider组件和Consumer组件，并在我们的Context.Provider组件给定value属性，必须给这个属性，通过value属性，我们便可以进行传值（包括一些数据和方法），然后定义我们的子组件的位置（插槽）

// useMemo => React.useMemo
// 在react中使用createContext方法构建一个上下文
// React.createContext<T>((defaultValue): T): React.Context<T>
// interface Context<T> {
//     Provider: Provider<T>; // 提供者
//     Consumer: Consumer<T>; // 消费者
//     displayName?: string;
// }

const Store = ({children}) => {
    const [title, setTitle] = useState('新标题')
    const changeTitle = num => {
        setTitle('新标题+' + num)
    }
    return (
        <Context.Provider value={{title, changeTitle}}>
            <div>
                <header>Store Title</header>
                <article>
                    { children }
                </article>
            </div>
        </Context.Provider>
    )
}
const Comsumer = Context.Consumer
export {
    Store,
    Comsumer
}

四：store注册为全局

将我们的store注册为全局，在我们的index入口文件中，引入store

import { Store } from './store'
// React.createElement(
//     'Store',
//     {},
//     <App header={"新标题"}/> => children
// )
render(
    <Store>
        <App header={"新标题"}/>
    </Store>,
    document.getElementById('root')
)

五：通过consumer组件获取传递值

context的consumer组件的子组件必须为一个方法

并且在provider上定义的数据会在方法上以入参的形式提供给使用者

import { Comsumer } from '../store'

{/* context的Consumer组件的子组件必须为一个方法 */}
            {/* 并且在Provider上定义的数据会在方法上以入参的形式提供给使用者 */}
            {/* <Context.Consumer>
            </Context.Consumer> */}
            <Comsumer>
                {
                    args => {
                        return <h4 onClick={
                            () => {
                                args.changeTitle(Math.random())
                            }
                        }>{args.title}</h4>
                    }
                }
            </Comsumer>

六：注意事项

一个context中，provider和comsumer必须配套使用，不能分开，（虐狗组件。。。。），或者不能获取到相应的数据和方法