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


Posted in Javascript onMay 31, 2017

这篇文章主要是写关于学习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”呗,然而你错了,它的结果为:

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

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

基于react框架使用的一些细节要点的思考
你可能又会问了:要是我在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
但是结果为:,证明它是异步的
基于react框架使用的一些细节要点的思考
这下好理解了吧,配合这幅图:

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

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被修改了

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

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

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框架使用的一些细节要点的思考
【(。・`ω´・)虽然听起来有点怪怪的但是大家别介意哈】
实现是实现了,但你想想,假设不是从“爷爷”组件,而是从“太太太太爷爷”组件传下来,这多可怕!不过没关系,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的区别
基于react框架使用的一些细节要点的思考
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框架使用的一些细节要点的思考就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
表单JS弹出填写提示效果代码
Apr 16 Javascript
JavaScript中发布/订阅模式的简单实例
Nov 05 Javascript
node.js中的fs.link方法使用说明
Dec 15 Javascript
jQuery+AJAX实现无刷新下拉加载更多
Jul 03 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
vue组件实例解析
Jan 10 Javascript
js自制图片放大镜功能
Jan 24 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 Javascript
前端 javascript 实现文件下载的示例
Nov 24 Javascript
JS Object构造函数之Object.freeze
Apr 28 Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 #Javascript
使用原生js写ajax实例(推荐)
May 31 #Javascript
Javascript创建类和对象详解
May 31 #Javascript
Javascript继承机制详解
May 30 #Javascript
Vue2.x中的Render函数详解
May 30 #Javascript
jQuery实现动态删除LI的方法
May 30 #jQuery
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 #Javascript
You might like
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
ThinkPHP框架下微信支付功能总结踩坑笔记
2019/04/10 PHP
php curl操作API接口类完整示例
2019/05/21 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
2010/05/06 Javascript
基于jquery的direction图片渐变动画效果
2010/05/24 Javascript
jquery可见性过滤选择器使用示例
2013/06/24 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
JavaScript初学者建议:不要去管浏览器兼容
2014/02/04 Javascript
jQuery中:first-child选择器用法实例
2014/12/31 Javascript
jQuery中wrapInner()方法用法实例
2015/01/16 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
JS实现简单路由器功能的方法
2015/05/27 Javascript
使用Bootstrap typeahead插件实现搜索框自动补全的方法
2016/07/07 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
Node.js中流(stream)的使用方法示例
2017/07/16 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
vue代理和跨域问题的解决
2018/07/18 Javascript
JavaScript执行环境及作用域链实例分析
2018/08/01 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
layui表格内放置图片,并点击放大的实例
2019/09/10 Javascript
layui: layer.open加载窗体时出现遮罩层的解决方法
2019/09/26 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
javaScript实现一个队列的方法
2020/07/14 Javascript
[03:28]2014DOTA2国际邀请赛 走近EG战队天才中单Arteezy
2014/07/12 DOTA
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
Python绘制并保存指定大小图像的方法
2019/01/10 Python
如何卸载python插件
2020/07/08 Python
Python 如何在字符串中插入变量
2020/08/01 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
python requests库的使用
2021/01/06 Python
免费获得微软MCSD证书赶快行动吧!
2012/11/13 HTML / CSS
竞选团支书演讲稿
2014/04/28 职场文书
法律专业自荐信
2014/06/03 职场文书
Python爬取奶茶店数据分析哪家最好喝以及性价比
2022/09/23 Python