React 中被忽略的函数组件(Functional Components)

原创 2017年07月16日 08:23:02

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

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

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

  return (
    <div>
      <h1>Hello, {props.name}</h1>
      <button onClick ={sayHi}>Say Hi</button>
    </div>
  )
}

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

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 (
      <div>
        <h1>Hello, {this.props.name}</h1>
        <button onClick ={this.sayHi}>Say Hi</button>
      </div>
    )
  } 
}

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

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

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

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

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

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

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

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

react创建组件的3种不同方式的区别 createClass ES6Class Statelessfunction

作者头还是晕的,正在努力写….

React—组件生命周期详解

在组件的整个生命周期中,随着该组件的props或者state发生改变,它的DOM表现也将有相应的改变,一个组件就是一个状态机,对于特定的输入,它总会返回一致的输出。 React为每个组件提供了生命周期...
  • slandove
  • slandove
  • 2016年02月26日 11:28
  • 19630

react引入公用js文件

例: test.js中click_alert函数 var CHAT = { click_alert:function(){ alert('触发函数'); }, }; export def...

React-事件处理详解

对于用户界面而言,展示只占整体设计因素的一半,另一半则是相应用户输入,即通过JavaScript处理用户产生的事件。 React通过将事件处理器 绑定到组建上处理事件,事件触发的同时更新组建的内部...
  • slandove
  • slandove
  • 2016年02月28日 23:22
  • 22035

深入理解React中的上下文this

写在前面JavaScript中的作用域scope 和上下文 context 是这门语言的独到之处,每个函数有不同的变量上下文和作用域。这些概念是JavaScript中一些强大的设计模式的后盾。在ES5...

Linux curl命令参数详解

一、Linux curl用法举例: 1. linux curl抓取网页: 抓取百度: 1curl http://www.baidu.com如发现乱码,可以使用iconv转...

epoll实现高并发聊天室

二、项目介绍 本项目是实现一个简单的聊天室,聊天室分为服务端和客户端。本项目将很多复杂的功能都去掉了,线程池、多线程编程、超时重传、确认收包等等都不会涉及。总共300多行代码,让大家真正了解C/S模...

React中文教程 - Advanced Components(组件高级使用)

所谓高级组件均继承ReactCompositeComponent类,ReactCompositeComponent提供一套完善的预处理函数,使用它可以简易的部署很多功能。 1. 生命周期函数...
  • rsspub
  • rsspub
  • 2013年06月05日 10:50
  • 1812

React 高阶组件(Higher-Order Components)

React 高阶组件 Higher-Order Components

React--Components and Props(组件和属性组件)

Components and Props(组件和属性组件) 组件允许你将UI拆分为独立的可重用的部分,并孤立地考虑每个部分。 从概念上讲,组件就像Javascript函数。它接受任意输入(称为...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React 中被忽略的函数组件(Functional Components)
举报原因:
原因补充:

(最多只允许输入30个字)