react组件定义（react组件constructor）



刚开始学习React没多久，在老师的教程里看到了类组件的使用示例，但是和资料上有些冲突，而引发了一些疑问：

• 类组件中到底要不要定义构造函数constructor（）？
• super（）里边到底要不要传入props参数？
• 绑定事件到底要不要在构造函数constructor（）中进行？

查找资料，总结如下：

定义组件可以使用函数定义组件和类定义组件（）   （推荐一篇随笔，创建组件的三种方式： https://www.cnblogs.com/wonyun/p/5930333.html）

简单说一下 函数定义组件和类定义组件的区别：

• 函数组件中无法使用state，也无法使用组件的生命周期方法；
• 函数组件都是展示性组件，接受props，渲染DOM；
• 函数组件中没有this，但在类组件中仍要绑定this这个琐碎的事，如：在render（）方法中要使用this.props来替换props；
• 类组件中可以使用局部状态state和生命周期方法。

类定义组件实例：

ES6中新增了类的概念，一个类必须要有constructor方法，如果在类中没有显示定义，则一个空的constructor方法会被默认添加；

一般需要在构造函数中初始化state和绑定事件，因此当需要初始化state或绑定事件时，需要显示定义constructor方法，并在constructor方法中初始化state和绑定事件

首先说明一点，若显示声明了constructor方法，则必须要调用super，即仅当存在constructor方法时，必须调用super

又是遇到一些示例中super（）中没有传入参数props，super（）和super(props)到底该怎么使用？

React会自行将props设置在组件中的 除了constructor方法 的任何地方 因此在组件的 非constructor方法中 使用props时，可不用传入，直接使用，

但当想要在constructor内使用props，则必须要将props传入super中，这样才能在constructor中访问到props，否则可以不用传入。

前面说了一般需要在构造函数中绑定事件，但需要使用bind，如果不想调用bind，也可以使用以下方法：

1、使用箭头函数初始化方法，则上边的例子就变为：

但箭头函数里的this指针，指向其拥有者，也就是class ，因此一个简易的方式是，在类中尽可能使用箭头函数定义函数

2、在回调函数中使用箭头函数

注意：当回调函数作为一个属性值传入低阶组件，上述这种方法可能会进行额外的重新渲染。

我们通常建议在构造函数中绑定或使用属性初始化器语法来避免这类性能问题。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/yd-react-native/17045.html