React 中被忽略的函数组件（Functional Components）

wuyumin 发布于2019-08-20 18:16 / 2191人阅读

摘要：函数组件中没有。目前还是会把函数组件在内部转换成类组件，所以使用函数组件和使用类组件在性能上并无大的差异。函数组件迫使你思考最佳实践。组件的主要职责是渲染，理想情况下，所有的组件都是展示性组件，每个页面都是由这些展示性组件组合而成。

React中有两种组件：函数组件（Functional Components) 和类组件（Class Components）。据我观察，大部分同学都习惯于用类组件，而很少会主动写函数组件，包括我自己也是这样。但实际上，在使用场景和功能实现上，这两类组件是有很大区别的。

来看一个函数组件的例子：

function Welcome = (props) => {
  const sayHi = () => {
    alert(`Hi ${props.name}`);
  }

  return (
      
        Hello, {props.name}
        
      
  )
}

把上面的函数组件改写成类组件：

import React from "react"

class Welcome extends React.Component {
  constructor(props) {
    super(props);
    this.sayHi = this.sayHi.bind(this);
  }
  
  sayHi() {
    alert(`Hi ${this.props.name}`);
  }
  
  render() {
    return (
      
        Hello, {this.props.name}
        
      
    )
  } 
}

下面让我们来分析一下两种实现的区别：

第一眼直观的区别是，函数组件的代码量比类组件要少一些，所以函数组件比类组件更加简洁。千万不要小看这一点，对于我们追求极致的程序员来说，这依然是不可忽视的。

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

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

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

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

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

所以，当你下次在动手写组件时，一定不要忽略了函数组件，应该尽可能多地使用函数组件。

欢迎关注我的公众号：老干部的大前端，领取21本大前端精选书籍！

云服务器 GPU云服务器函数式组件 php忽略警告的设置 Functional Components

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84263.html

[译] React组件是采用Functional 还是 Class编写 ?

摘要：在里面有两种组件类组件和函数式组件两者有明显的区别比如是属于的类是一个函数它返回一个组件什么是先看一段代码这是一个函数式组件它和类组件最关键的区别就是函数式组件没有和一系列的钩子函数这也是函数式组件经常被用作无状态组件的原因在React里面有两种组件, Class components(类组件) 和 Functional components(函数式组件).两者有明显的区别,比如 ...

Integ 2019-08-23 17:07 评论0 收藏0
2017-07-25 前端日报

摘要：前端日报精选三思而后行想提高团队技术，来试试这个套路如何开发一个插件学习笔记块级作用域绑定译文详解带来的个重大变化中文周二放送画图知乎专栏第期新特性译配置译高性能视差滚动行代码构建区块链知乎专栏渲染器修仙之路之拷贝对象已 2017-07-25 前端日报精选 SSR 三思而后行想提高团队技术，来试试这个套路！如何开发一个 Atom 插件ES6学习笔记：块级作用域绑定【译文】详解VUE2...

bluesky 2019-08-20 18:17 评论0 收藏0
2017-07-16 前端日报

摘要：前端日报点赞通道精选听说你没来腾讯前端求职直播课笔试篇淘宝漏洞修补记一次踩坑记录中的对象精读发布中文深入理解笔记块级作用域绑定架构经验分享深入理解笔记字符串和正则表达式架构经验分享深入理解笔记导读架构经验分享第期种使用提升应 2017-07-16 前端日报 GitHub点赞通道精选听说你没来 JSConf 2017腾讯前端求职直播课——笔试篇淘宝 flexible.js 漏洞修补：...

yeyan1996 2019-08-20 18:03 评论0 收藏0
(翻译)Presentational and Container Components

摘要：对于很多中间组件来说，他们并不需要这些，但是他们还必须传递给下一级组件。更倾向于，而更倾向于，当然这并不是绝对的。这是篇文章翻译自的这是篇文章翻译自medium的：Presentational and Container Components 译者语：这篇文章是紧接着对我上一篇翻译的扩充，对Container Component模式描述的更加细，解决了我很多开发中的困惑。 Prese...

mushang 2019-08-22 11:02 评论0 收藏0
【译】组件与Props

摘要：调用组件，并且把作为传递进去。警告组件的名字最好都是大写字母开头的。举个例子，表示一个标签，但表示一个组件并且要求是一个闭合标签。组件能引用他们的组件作为他们的输出。警告组件必须返回一个根组件。让我们把这个组件切割成更小的组件。下面是react官方文档的个人翻译，如有翻译错误，请多多指出原文地址：https://facebook.github.io/re... Components ...

Juven 2019-08-20 14:34 评论0 收藏0