context的作用

看下面的一个简单的组件：

import React from 'react'

class Sidebar extends React.Component {
render(){
return(<div>
<p>我是Sidebar</p>
<ul>
<li>
<Navbar user={this.props.user}></Navbar>
</li>
</ul>
</div>)
}
}

class Navbar extends React.Component {
render(){
return(<div>
<p>{this.props.user}:Navbar</p>
</div>)
}
}

class Page extends React.Component {
render(){
const user = 'qiqi'
return(<div>
<p>我是{user}</p>
<Sidebar user={user}></Sidebar>
</div>)
}
}
export default Page

#############################

一级一级向下传递数据，浪费性能，而且在Sidebar组件中user并没有什么作用，造成了浪费，所以要进行进一步的优化：利用context，修改如下：

必须结合prop-types才可以：

import React from 'react'
import PropTypes from 'prop-types';
class Sidebar extends React.Component {
render(){
return(<div>
<p>我是Sidebar</p>
<ul>
<li>
<Navbar></Navbar>
</li>
</ul>
</div>)
}
}

class Navbar extends React.Component {
static contextTypes = {
user:PropTypes.string
}
render(){
return(<div>
<p>{this.context.user}:Navbar</p>
</div>)
}
}

class Page extends React.Component {
static childContextTypes = {
user:PropTypes.string
}
constructor(props){
super(props)
this.state = {user:'qiqi'}
}
getChildContext(){
return this.state
}
render(){
return(<div>
<p>我是{this.state.user}</p>
<Sidebar></Sidebar>
</div>)
}
}
export default Page

 

转载于:https://www.cnblogs.com/qiqi105/p/8651002.html