美文网首页React
函数组件与类组件

函数组件与类组件

作者: 自you是敏感词 | 来源:发表于2017-12-01 10:51 被阅读0次

1. 函数组件看似只是一个返回值是DOM结构的函数,其实它的背后是无状态组件(Stateless Components)的思想。函数组件中,你无法使用State,也无法使用组件的生命周期方法,这就决定了函数组件都是展示性组件(Presentational Components),接收Props,渲染DOM,而不关注其他逻辑。

2. 函数组件中没有this。所以你再也不需要考虑this带来的烦恼。而在类组件中,你依然要记得绑定this这个琐碎的事情。如示例中的sayHi。

3. 函数组件更容易理解。当你看到一个函数组件时,你就知道它的功能只是接收属性,渲染页面,它不执行与UI无关的逻辑处理,它只是一个纯函数。而不用在意它返回的DOM结构有多复杂。

4. 性能。目前React还是会把函数组件在内部转换成类组件,所以使用函数组件和使用类组件在性能上并无大的差异。但是,React官方已承诺,未来将会优化函数组件的性能,因为函数组件不需要考虑组件状态和组件生命周期方法中的各种比较校验,所以有很大的性能提升空间。

5. 函数组件迫使你思考最佳实践。这是最重要的一点。组件的主要职责是UI渲染,理想情况下,所有的组件都是展示性组件,每个页面都是由这些展示性组件组合而成。如果一个组件是函数组件,那么它当然满足这个要求。所以牢记函数组件的概念,可以让你在写组件时,先思考这个组件应不应该是展示性组件。更多的展示性组件意味着更多的组件有更简洁的结构,更多的组件能被更好的复用。

React组件复用与组合 中我们会提到,应当避免在底层的展示性组件中混入对于状态的管理,而应该将状态托管于某个高阶组件或者其他的状态容器中。利用函数式声明组件可以彻底保证不会在组件中进行状态操作。

相关文章

  • React函数组件与类组件

    函数组件与类组件 GitHub地址 函数组件与类组件函数组件(functional component)类组件(c...

  • React - 类组件创建

    React创建组件有两种方式 函数式组件 类组件函数式组件已经学过,现在看下类组件怎么写。 函数式组件和类组件区别...

  • 今日总结

    1.函数组件与类组件的区别? 函数组件:没有实例, 没有生命周期,没有state,只能接收props类组件:有实例...

  • React Hooks 实现和由来以及解决的问题

    与React类组件相比,React函数式组件究竟有何不同? 一般的回答都是: 类组件比函数式组件多了更多的特性,比...

  • @芥末的糖-----组件的定义

    1.无状态组件,函数式组件, 影子组件,傻瓜组件,UI组件 2.类的定义 总结:类的组件形式相对于函数化组件更消耗性能

  • 2-useState

    Time: 20200126 函数组件中使用状态。 类组件写法 注意类组件的用法。 函数式组件写法 在事件调用中,...

  • React Hook

    简介 :原本函数组件和类组件同为react组件,但是由于函数组件为无状态组件,react hook 的引入,让函数...

  • React第二天学习

    一、组件的props 1.类组件 定义: 拥有构造函数等生命周期函数(业务组件/状态组件) 类组件中可以定义很多个...

  • React基础知识

    基本 React 中的组件分为函数组件和类组件区分的话,简单的组件我们就用函数,如果复杂就用 class;函数组件...

  • 1-5 函数式组件

    demo1 - 函数式组件 demo2 - 类组件 demo3 - 函数式组件传参 组件里面套组件 - 复合组件 ...

网友评论

    本文标题:函数组件与类组件

    本文链接:https://www.haomeiwen.com/subject/ympibxtx.html