内容简介:1.安装并引入prop-types2.父组件中设置getChildContext()
React Context
绝大多数应用程序不需要使用 context.如果你想让你的应用更稳定,别使用context。因为这是一个实验性的API,在未来的React版本中可能会被更改。
一、如何使用
1.安装并引入prop-types
2.父组件中设置getChildContext()
class A extends React.Component {
getClildContext () {
return {
info: 'test'
/** some code */
}
}
}
3.父子组件设置childContextTypes
import PropTypes from 'prop-types';
A.childContextTypes = {
info: PropTypes.string
}
4.子组件定义contextTypes获取context中获取并定义变量类型
B.contextTypes = {
info: PropTypes.string
}
5.子组件获取context变量
class B extends React.Component {
render () {
return <div>{this.context.info}</div>
}
}
完整demo
import PropTypes from 'prop-types';
import React, { Component } from 'react';
class A extends React.Component {
getClildContext () {
return {
info: 'test'
/** some code */
}
}
render () {
return <B />
}
}
A.childContextTypes = {
info: PropTypes.string
}
class B extends React.Component {
render () {
return <div>{this.context.info}</div>
}
}
B.contextTypes = {
info: PropTypes.string
}
二、使用要点
1.如果一个组件中定义了contextTypes,在下面的生命周期会获得额外的参数
constructor(props, context); componentWillReceiveProps(nextProps, nextContext); shouldComponentUpdate(nextProps, nextState, nextContext); componentWillDidUpdate(nextProps, nextState, nextContext); componentDidUpdate(prevProps, PrevState, prevContext);
2.无状态下引用context
import PropTypes from 'prop-types'
const C = ({ children }, context) => {
return (
<h2>{context.info}</h2>
)
}
C.contextTypes = {
info: PropTypes.string
}
3.千万不要更新context,可以通过与state绑定更新context,有风险的如果中间父组件通过shouldComponentUpdate返回false,那么接下来的组件中的context是不会更新得。
class A extends React.PureComponent {
constructor () {
super();
this.state = {
info: 'test'
}
}
getChildContext () {
return {
info: this.state.info
}
}
}
4.PureComponent检测不到context的改变
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
HTML5权威指南
[美] Adam Freeman / 谢廷晟、牛化成、刘美英 / 人民邮电出版社 / 2014-1 / 129.00元
《HTML5 权威指南》是系统学习网页设计的权威参考图书。本书分为五部分:第一部分介绍学习本书的预备知识和HTML、CSS 和JavaScript 的最新进展;第二部分讨论HTML 元素,并详细说明了HTML5中新增和修改的元素;第三部分阐述CSS,涵盖了所有控制内容样式的CSS 选择器和属性,并辅以大量代码示例和图示;第四部分介绍DOM,剖析如何用JavaScript 操纵HTML 内容;第五部......一起来看看 《HTML5权威指南》 这本书的介绍吧!