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纯组件渲染性能反模式

React纯组件的渲染可以非常高效,但是需要用户将其数据作为不可变的对象,才能正常工作。但是由于JavaScript的原因,有时做到这点可能非常具有挑战性。 反模式是在Render函数或者Redu...
  • fangjuanyuyue
  • fangjuanyuyue
  • 2016年10月30日 19:32
  • 2025

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

作者头还是晕的,正在努力写….
  • sinat_24070543
  • sinat_24070543
  • 2016年09月22日 11:48
  • 1958

React: 傻瓜/展示性组件的简化 (函数型组件及其传参)

React的组件可以分为“聪明组件&傻瓜组件”或“容器组件&展示组件”。这里展示对后者进行简化的案例。...
  • Beijiyang999
  • Beijiyang999
  • 2017年09月07日 17:29
  • 359

总结 React 组件的三种写法 及最佳实践 [涨经验]

React 专注于 view 层,组件化则是 React 的基础,也是其核心理念之一,一个完整的应用将由一个个独立的组件拼装而成。 http://www.mrfront.com/2017/01/11...
  • sinat_17775997
  • sinat_17775997
  • 2017年02月28日 23:14
  • 541

react学习笔记 item3 --- 组件的创建方式

本文介绍了三种创建react 组件的方式:React.createClass、函数式组件和React.Component。通过示例介绍了三种创建方式的具体使用方法。...
  • u014607184
  • u014607184
  • 2016年11月19日 15:58
  • 860

reactJS 干货(reactjs 史上最详细的解析干货)

一.  State和 Props       state是状态机。       应该包括:那些可能被组件的事件处理器改变并触发用户界面更新的数据,譬如需要对用户输入,服务器请求或者时间变化等作出响应。...
  • zwp438123895
  • zwp438123895
  • 2017年04月06日 10:44
  • 5144

reactjs--子组件调用父组件的方法

1、页面中首先引入相关 js src="js/react.js"> src="js/react-dom.js"> src="js/browser.min.js"> src="js/jquery.mi...
  • Take_Dream_as_Horse
  • Take_Dream_as_Horse
  • 2016年10月10日 15:04
  • 6578

react学习笔记 item4 --- 状态(state)

React 把组件看成是一个状态机(State Machines)。本文介绍了react中组件的state(状态),以及常用的关于 state 的两个组件 API : setState 和replac...
  • u014607184
  • u014607184
  • 2016年11月19日 21:35
  • 1998

react组件API的7个方法

React组件API的7个方法:一、setState 设置状态 setState(object nextState[, function callback]) setState是React事件处理函...
  • yanchuan1990
  • yanchuan1990
  • 2017年02月17日 17:15
  • 636

十分详细的React入门实例

学习React不是一蹴而就的事情,入门似乎也没那么简单。但一切都是值得的。今天给大家带来一个详细的React的实例,实例并不难,但对于初学者而言,足够认清React的思考和编写过程。认真完成这个实例的...
  • a153375250
  • a153375250
  • 2016年09月26日 10:06
  • 31282
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:React 中被忽略的函数组件(Functional Components)
举报原因:
原因补充:

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