react组件写法（react 组件）



React推出后，出于不同的原因先后出现三种定义react组件的方式，殊途同归；具体的三种方式：

虽然有三种方式可以定义react的组件，那么这三种定义组件方式有什么不同呢？或者说为什么会出现对应的定义方式呢？下面就简单介绍一下。

（1）无状态函数式组件

　　创建无状态函数式组件形式是从版本开始出现的。它是为了创建纯展示组件，这种组件只负责根据传入的来展示，不涉及到要状态的操作。具体的无状态函数式组件，其官方指出：

　　无状态函数式组件形式上表现为一个只带有一个方法的组件类，通过函数形式或者ES6 arrow function的形式在创建，并且该组件是无状态的。具体的创建形式如下：案例如下：

　　无状态组件的创建形式使代码的可读性更好，并且减少了大量冗余的代码，精简至只有一个render方法，大大的增强了编写一个组件的便利，除此之外无状态组件还有以下几个显著的特点：

　　无状态组件被鼓励在大型项目中尽可能以简单的写法来分割原本庞大的组件，未来React也会这种面向无状态组件在譬如无意义的检查和内存分配领域进行一系列优化，所以只要有可能，尽量使用无状态组件。

（2）React.createClass

　　案例代码：

　　案例2：

与无状态组件相比，和后面要描述的都是创建有状态的组件，这些组件是要被实例化的，并且可以访问组件的生命周期方法。但是随着React的发展，形式自身的问题暴露出来：

• React.createClass会自绑定函数方法（不像React.Component只绑定需要关心的函数）导致不必要的性能开销，增加代码过时的可能性。
• React.createClass的mixins不够自然、直观；React.Component形式非常适合高阶组件（Higher Order Components--HOC）,它以更直观的形式展示了比mixins更强大的功能，并且HOC是纯净的JavaScript，不用担心他们会被废弃。HOC可以参考无状态组件(Stateless Component) 与高阶组件。

（3）ES6写法React.Component

　　是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代形式；相对于 可以更好实现代码复用。将上面的形式改为形式如下：

.

版权声明：

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

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