当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 基于react框架使用的一些细节要点的思考

基于react框架使用的一些细节要点的思考

2018年04月28日  | 移动技术网IT编程  | 我要评论

这篇文章主要是写关于学习react中的一些自己的思考：

1.setstate到底是同步的还是异步的？

2.如何在子组件中改变父组件的state

3.context的运用，避免“props传递地狱”

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

1.setstate到底是同步的还是异步的？

class mycomponent extends react.component{
 constructor(props) {
  super(props)
  this.state ={
  value:0
  }
 }
handleclick = () => {
  this.setstate({value:1})
   console.log('在handleclick里输出' + this.state.value);
}
render(){
   console.log('在render()里输出' + this.state.value);
return (<div>
   <button onclick ={this.handleclick}>按钮</button>
  </div>)
  }
}
export default mycomponent
//省略渲染过程，下面也一样

在这里我们点击按钮时，调用handleclick函数，首先调用this.setstate()设置value,随即把this.state.value输出，结果是什么？

你可能会想，这还不简单——“在handleclick里输出1”呗，然而你错了，它的结果为：

事实上，setstate()的调用是异步的，这意味着，虽然你调用了setstate({value:0})，但this.state.value并不会马上变成0，而是直到render()函数调用时，setstate()才真正被执行。结合图说明一下：

你可能又会问了：要是我在render()前多次调用this.setstate()改变同一个值呢？（比如value）

我们对handleclick做一些修改，让它变得复杂一点，在调用handleclick的时候，依次调用handlestatechange1 ，handlestatechange2，handlestatechange3，它们会调用setstate分别设置value为1,2,3并且随即打印

handlestatechange1 = () => {
  this.setstate({value:1})
  console.log('在handleclick里输出' + this.state.value);
}
handlestatechange2 = () => {
  this.setstate({value:2})
  console.log('在handleclick里输出' + this.state.value);
}
handlestatechange3 = () => {
  this.setstate({value:3})
  console.log('在handleclick里输出' + this.state.value);
}
handleclick = () => {
  this.handlestatechange1();
  this.handlestatechange2();
  this.handlestatechange3();
}
那么输出结果会是什么呢？如果setstate是同步调用的，那么结果显然为
在handleclick里输出1
在handleclick里输出2
在handleclick里输出3
但是结果为：，证明它是异步的
这下好理解了吧，配合这幅图：

2.如何在子组件中改变父组件的state呢？

这是我们经常会遇到的问题之一，解决办法是：在父组件中写一个能改变父组件state的方法，并通过props传入子组件中
class son extends react.component{
 render(){
  return(<div onclick = {this.props.handleclick}>
    {this.props.value}
    </div>)
   }
}
class father extends react.component{
 constructor(props){
   super(props)
   this.state ={
    value:'a'
    }
  }
 handleclick = () => {
   this.setstate({value:'b'})
  }
 render(){
   return (<div style ={{margin:50}}>
      <son value = {this.state.value} handleclick = {this.handleclick}/>
     </div>)
   }
}
点击子组件son，内容由a变成b，说明父组件的state被修改了

3.context的运用，避免“props传递地狱”
3.1假设一个比较极端的场景：你需要从你的子组件里调用父父父父父组件的属性或方法，怎么办！当组件嵌套层级过深的时候，不断地传props作为实现方式简直就是噩梦！我称之为“props传递地狱”（这个词是我瞎编的，参考自“回调函数地狱”）
我们接下来实现的是这样一个需求，把gene属性（基因）从组件grandfather -->father --> son传递，如果用props传递：
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）

以上这篇基于react框架使用的一些细节要点的思考就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网