Context-组件间共享值
Context
提供了一个无需为每层组件手动添加的props,借助它能在组件树中进行数据传递。
API简单介绍
React.CreateContext(defaultValue)
创建一个Context对象。由于提供和使用时都需要导入Context
,所以需要单独抽离。
javascript
import React from 'react';
const MyContext = React.createContext({name:"wlk",age:25});
export default MyContext;
Context.Provider
为Provider
组件包裹的组件树提供上下文数据。当 Provider 的 value
值发生变化时,它内部的所有消费组件都会重新渲染。
javascript
import React from 'react';
import ReactDOM from 'react-dom';
import ContextConsum from './components/ContextConsum';
import MyContext from './components/MyContext'
ReactDOM.render(
<React.StrictMode>
<MyContext.Provider value={{name:"wanglk",age:24}}>
<ContextConsum />
</MyContext.Provider>
</React.StrictMode>,
document.getElementById('root')
);
Class.contextType
使用Provider
组件提供的上下文数据的方式一。
static contextType = MyContext;
这一行代码是必不可少的,有了它之后在组件的任何生命周期函数中就可以通过this.context
获取到Provider
组件提供的值.
javascript
import React from 'react';
import MyContext from './MyContext'
class ContextConsum extends React.Component{
static contextType = MyContext;
render() {
return <div>
{this.context.name}----{this.context.age}
</div>;
}
}
export default ContextConsum;
Context.Consumer
使用Provider
组件提供的上下文数据的方式二。
Context.Consumer
通过插值的形式获取上下文数据。
注意的是,插值中接受一个函数,该函数的参数就是Provider
提供的数据。
javascript
import React from 'react';
import MyContext from './MyContext'
class ContextConsum extends React.Component{
render() {
return <div>
<MyContext.Consumer>
{value=>{
return value.name+"---"+value.age;
}}
</MyContext.Consumer>
</div>;
}
}
export default ContextConsum;
注意点
使用React.createContext(defaultValue)
提供的默认值的条件是组件树中没有匹配到Provider
组件,而不是不提供Provider
组件的value值。
Context.Provider
API接受代码中改成如下就会使用默认值:
javascript
import React from 'react';
import ReactDOM from 'react-dom';
import ContextConsum from './components/ContextConsum';
ReactDOM.render(
<React.StrictMode>
<ContextConsum />
</React.StrictMode>,
document.getElementById('root')
);