【react学习】关于react框架使用的一些细节要点的思考 - 外婆的彭湖湾(2)_H5之家

class Son extends React.Component{ render(){ return (<h3 style ={{marginTop:30}}>我从我的爷爷那里得到了基因--{this.props.gene}</h3>) } } class Father extends React.Component{ render(){ return (<Son gene = {this.props.gene}/>) } } class GrandFather extends React.Component{ constructor(props) { super(props) this.state ={ gene:'[爷爷的基因]' } } render(){ return (<Father gene = {this.state.gene}/>) } }

demo:

【(。`ω)虽然听起来有点怪怪的但是大家别介意哈】

实现是实现了，但你想想，假设不是从“爷爷”组件，而是从“太太太太爷爷”组件传下来，这多可怕！不过没关系，react提供了一个叫做context(上下文)的API，你在顶层组件的context中定义的属性，可以在所有的后代组件中，通过this.context.属性去引用！让我们一睹为快：

class Son extends React.Component{ render(){ console.log(this.context.color); return (<h3 style ={{marginTop:30}}>我从我的爷爷那里得到了基因--{this.context.gene}</h3>) } } Son.contextTypes ={ gene:React.PropTypes.string } class Father extends React.Component{ render(){ return (<Son/>) } } class GrandFather extends React.Component{ getChildContext(){ return {gene:'[爷爷的基因]'} } render(){ return (<Father />) } } GrandFather.childContextTypes = { gene: React.PropTypes.string }; export default GrandFather

demo效果同上！这个时候你发现，我们在<GrandFather>组件和<Father>组件中都没有向下传递props，我们就从最下层的Son组件中获取了gene属性，是不是很方便！

解释下代码：

getChildContext()是你在顶层组件中定义的钩子函数，这个函数返回一个对象——你希望在后代组件中取用的属性就放在这个对象中，譬如这个例子中我希望在Son组件中通过this.context.gene取属性，所以在getChildContext()中返回{gene:'[爷爷的基因]'}

GrandFather.childContextTypes和Son.contextTypes 用于规定顶层组件和取顶层组件context的后代组件的属性类型

【注意】GrandFather.childContextTypes和Son.contextTypes 这两个对象必须要规定！否则context只能取到空对象！一开始我犯的这个错误简直让我狂吐三升血。。。。

有图有真相之context和props的区别

3.2context是否推荐使用？

虽然上面这个例子说明了context多么好用，但注意：官方并不推荐经常使用它，因为它会让你的应用架构变得不稳定(官方文档原话If you want your application to be stable, don't use context),在我看来，为什么在大多数情况下要使用props而不是实现数据流呢，因为props凭借组件和组件间严密的逻辑联系，使得你能够清晰地跟踪应用的数据流(it's easy to track the flow of data through your React components with props)当然了，如果你遇到上述的例子的情况，context还是大有裨益的

3.3需要改变context中的属性时候，不要直接改变它，而是使用this.state作为媒介，如果你试图在顶层组件的state中放入一个可变的属性你可以这样做：

getChildContext(){ return {type:this.state.type} }

3.4在上述我限制gene的类型时候我是这样写的：gene: React.PropTypes.string，使用了React内置的React.PropTypes帮助属性，此时我的版本为 "react": "15.4.2",在15.5的版本后这一帮助属性被废弃，推荐使用props-types库，像这样：

const PropTypes = require("Prop-Types"); GrandFather.childContextTypes = { gene: PropTypes.string };

当然，在这之前你需要npm install prop-types

4组件类里有私有变量a，它到底改放在this.a中还是this.state对象中（作为属性a）呢？

这得根据它是否需要实时的重渲染决定，如果该变量需要同步到变化的UI中，你应该把它放在this.state对象中，如果不需要的话，则把它放在this中（无代码无demo）

【完】--喜欢这篇文章的话不妨关注一下我哟