props的缺点
通常情况下，组件之间的数据传递可以通过props传递，但是props数据的传递是必须是一一传递，比如有三个组件：A、B、C, 其中B组件是A组件的子组件，C组件是B组件的子组件，如果A组件的数据要传递给C组件，就需要A->B->C,数据的传递不能跨级，用起来就比较麻烦
Context的优点
组件之间的数据传递是可以跨级的，只有起点和终点
使用步骤
- 创建context.js,内容如下：
import React from 'react'
//创建context对象
const MyContext=React.createContext();
//Provider:生产商(提供公共数据)
//Consumer:用户(用户使用公共数据)
const {Provider,Consumer}=MyContext
export {MyContext,Provider,Consumer}
- 创建Father.js(A组件)
import React, { useState } from 'react';
import {Provider} from './context';
import Son from './Son'
const Facther = () => {
// hook state定义数据和修改数据
const [username,setUsername]=useState('小明')
return (
// value里定义的就是公共数据或者方法
<Provider value={{
username,setUsername
}}>
<Son />
</Provider>
);
}
export default Facther;
- 创建Son组件(C组件)
import React from 'react';
import {Consumer} from './context'
const Son = () => {
return (
<Consumer>
{/*Comsumer中带有一个回调函数，参数就是context(我们的上下文数据) {username,setUsername}=context,进行了es6语法结构*/}
{({username,setUsername})=>{
return <p onClick={()=>{setUsername('王老五')}}>{username}</p>
}}
</Consumer>
);
}
export default Son;
这样就通过了A组件到C组件之间的数据传递
