React 介绍使用ES6和使用create-react-class的方式

原文链接:https://blog.csdn.net/younghaiqing/article/details/79562980

通常情况下你可以用普通的 JavaScript 类定义一个组件:在这里插入图片描述
如果你不使用 ES6 ,你可以使用 create-react-class 方法代替:在这里插入图片描述

除了一些例外,ES6 classes(类) API 非常类似于函数 createReactClass() 。

声明默认 Props

在函数和 ES6 classes(类) 中,defaultProps 被定义为组件本身的属性:
这里写图片描述

createReactClass() 中,你需要在所传递的对象中定义 getDefaultProps() 方法:
在这里插入图片描述

设置初始化 State(状态)

在 ES6 classes(类) 中,你可以在构造函数通过给 this.state 赋值来定义初始状态:

这里写图片描述

createReactClass() 函数中,你可以提供一个指定的 getInitialState 方法来返回初始状态:

这里写图片描述

自动绑定

在以 ES6 classes(类) 方式声明的 React 组件中,方法遵循与普通 ES6 的 class 中相同的语义。也就是说方法不会自动绑定 this 到实例中,你必须在构造函数中显式的使用 .bind(this):

这里写图片描述

createReactClass() 中,并不需要这么做,因为方法可以自动绑定。

这里写图片描述
这意味着在使用 ES6 classes(类) 方式下对于事件处理函数你需要编写更多的样本代码 ,但是在大型应用中具有更好的性能。 如果你不想使用样本代码,你可以使用 Babel 启用 实验性的类属性语法提案:

这里写图片描述
请注意,上述语法是实验性的,并且这个语法将来可能会发生变化,或者这个提案可能不会纳入语言范畴。

  1. 如果你想更稳妥的方法,你有以下选择:
  2. 在构造函数中绑定方法。
  3. 使用箭头函数,例如,onClick={(e) => this.handleClick(e)}
  4. 保持使用 createReactClass
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值