前言
承接上一篇对于React Context技术的文章。React Context技术在页面主题批改利用上提供了较好的办法,同时React还提供了ContextType技术,用于实现对Context技术进行简化书写。本篇文章对这两个概念进行解说,最初再解说Context默认值的应用办法。
在开始正式解说之前, 再次强调React Context的性能:实现组件之间的数据传递。
一、案例:更改页面的主题
1、案例要求
页面中有两个超级链接,用于管制页面中内容的主题色彩。两个超级链接别离是“浅色主题”和“深色主题”。为了拆穿主题的更改,在页面中还设置了一个div容器,深浅色主题对应该div容器不同的背景色彩。div容器中有文本和一个命令按钮,深浅色主题也对应着文本的不同色彩和按钮的不同款式。案例的最终效果图如下所示。
2、案例剖析
首先,咱们要在所有组件以外预设好两个主题的参数。依据对效果图的察看,两个不同的主题次要对应的是背景色彩、文本色彩、按钮色彩三个组成部分。布局具体的主题参数如下所示。
在上述表中,为按钮色彩布局的是Bootstrap框架中的两种不同的按钮背景色彩类。如果不应用Bootstrap,也能够在CSS文件中独立书写这两个类,并为这两个类设置不同的外观。
依照上述表中的外观布局,定义一个themes的对象,蕴含两种主题款式,代码如下所示。
const themes={
light:{
className:'btn btn-primary',
backgroundColor:'#ddd',
color:'#000'
},
dark:{
className:'btn btn-danger',
backgroundColor:'#222',
color:'#fff'
}
};
3、案例组件划分
其次,咱们来为这个案例进行组件划分。很显然,咱们能够将其划分为两个组件:
- 父组件<App />:实现扭转主题的超级链接和整个案例的布局。
- 子组件<Content />:实现案例下方的<div>容器和其外部的文本与按钮。
4、<App />组件的实现
在书写组件<App />时,要先创立Context对象,并解构出生产组件和生产组件。
const {Provider,Consumer} = React.createContext();
为了能将用户所选的主题传递给子组件,来让子组件扭转款式,咱们须要在父组件中创立一个state数据,命名为themeData。该数据的默认值为‘light’,示意默认为浅色主题。当用户单击深色主题超级链接时,扭转themeData数据的值为‘dark’。同时将这个themeData作为数据传递给子组件。
<App />组件的代码如下所示。
class App extends Component {
constructor(props){
super(props);
this.state={
themeData:'light'
}
}
changeTheme(data){
this.setState({
themeData:data
})
}
render(){
return (
<Provider value={this.state.themeData}>
<div className="theme">
<a href="#" onClick={()=>this.changeTheme('dark')}>深色主体</a>
<a href="#" onClick={()=>this.changeTheme('light')}>浅色主题</a>
</div>
<Content></Content>
</Provider>
)
}
}
5、<Content />组件的实现
该组件作为<App />组件的生产组件,要是用<Consumer>组件接管<App />组件传来的数据。即接管的数据为一个字符串:‘light’或‘dark’。而后再从示意主题的themes对象中,寻找对应字符串成员的各种款式取值。
<Content />组件的代码如下所示。
class Content extends Component {
render(){
return (
<Consumer>
{
data=>{
return (
<div className="content" style={{backgroundColor:themes[data].backgroundColor,color:themes[data].color}}>
欢送应用Context技术 <button className={themes[data].className}>确定</button>
</div>
)
}
}
</Consumer>
)
}
}
二、ContextType技术
ContextType技术是React设定的Context技术的简写模式,应用ContextType技术能够省略书写<Consumer>标记对。
ContextType的书写格局有如下规定:
- 必须为创立的Context对象设置一个对象名,且无需解构出Consumer。
- 在生产组件的render()函数内部,要定义一个动态变量,并赋值为创立的Context对象名。
- 在生产组件的render()函数外部,return语句之前,应用this.context来接管生产组件传递过去的参数。
把上述案例整体改写为ContextType技术,其书写格局如下所示。
const themeContext=React.createContext();
const {Provider} = themeContext;
class Content extends Component{
static contextType = themeContext;
render(){
const para=this.context; //para就是接管到的生产组件传来的数据
return (
<div className="content" style={{backgroundColor:themes[para].backgroundColor,color:themes[para].color}}>
欢送应用Context技术 <button className={themes[para].className}>确定</button>
</div>
)
}
}
三、Context的默认值
在利用React.createContext()办法创立Context对象时,该办法是具备参数的,该参数是Context的默认值。格局如下所示。
const {Provider,Consumer} = React.createContext(defaultValue);
若想让该默认值失效,则生产组件无需应用进行包裹,这样生产组件只能承受到defaultValue传递过去的数据。即没有被<Provider>包裹的组件只能获取Context的defaultValue,也只能向生产组件传递defaultValue的值。
总结
本文是React系列教程的第十篇文章,在上一讲的根底之上持续解说了React Context的用法。本篇文章次要包含React Context在批改页面主题性能上的利用,以及ContextType技术的简化写法,并为大家解说了带有默认值的Context是如何应用的。
第一讲 初识React框架
第二讲 意识JSX语法格局
第三讲 React组件
第四讲 React 父子组件之间的通信
第五讲 React兄弟组件之间的通信
第六讲 React受控组件的应用
第七讲 React非受控组件的应用
第八讲 React组件的生命周期
第九讲 React Context技术(1)
对于作者
小海前端,具备18年Web我的项目开发和前后台培训教训,在前端畛域著有较为零碎的培训教材,对Vue.js、微信小程序开发、uniApp、React等全栈开发畛域都有较为深的造诣。入住Segmentfault,心愿可能更多地结识Web开发畛域的同仁,将Web开发鼎力地进行遍及。同时也违心与大家进行深刻的技术研究和商业单干。