javascript - react 组件两种声明方式疑问

问题描述

问 题

方式一：

import React from 'react';

class GameView extends  React.Component{
}

export default GameView;

方式二：

import React from 'react';

const GameView = ({}) => {
}

export default GameView;

第一种方式是es6的，我经常见，但是最近看别人代码，发现了第二种定义方式。
第二种导入了React库，却没使用，也定义成功了，怎么实现的？

非常感谢 @cheoyx @eyesofkids 详细解答，我突然发现，我基本没有看过React的文档，我来公司之后，学习React都是参考的公司前辈，大神们的源码。看源码确实学习的非常快，但是基础的东西却不清楚。之后，我会认真的看一下官方文档的。谢谢大家。

解决方案

在React v15中，我们共有三种方式可以定义一个组件。大概是React的设计者们认为，多几种方式可以让不同需求的开发者增加来使用React的诱因，菜色不同但都可以吃好吃饱。另一方面也可以在不同情况下使用不同定义方式，各有一些好处，简单的效率好，复杂的弹性多。

第一种是你说的ES6方式，因为它里面有超出ES6标准的语法，通常称为ES6+的类定义方式，是使用继承自React.Component类别的语法，这样式又可以称为建构式样式(constructor pattern)。因为现在可以直接执行ES6+相关语法与API的浏览器，通常会需要要新版本的浏览器，而且还不见得会100%相容。所以我们一般都会先经由babel工具帮忙先转成ES5语法再执行，这样在浏览器各种不同版本与品牌中，可以得到最大的相容程度。不过ES6+是一种未来将会普及的语法，也是时间早晚的问题而已。现在官方已经都换这种方式来写文件或教程了。

第二种是ES5的语法，这是为了要能相容于只支援ES5的浏览器，所使用的一种方式。最早React的版本中只有这种方式，所以网上的范例有很多都是用这种语法，如果你连JSX语法也不使用的话，那么是完全可以不需要babel工具，就可以在各种支援ES5标准的浏览器中执行。这种样式又可以称之为工厂样式(factory pattern)。下面是例子代码:

var HelloWorld = React.createClass({
  render: function() {
    return <h1>{this.props.text}</h1>
  }
});

第三种是是函数(函式)定义样式，这只能在无状态的功能性元件(Stateless functional components)上使用，像我们上面的HelloWorld组件就是无状态的(stateless)，里面没有定义state值与相关生命周期的方法。纯粹是个显示用的简单元件，所以可以用这个语法。这个语法是在React 0.14版本才加入的，也是前不久的事情而已(2015.10)。通常这个样式还会使用ES6中的箭头函式语法，让程式码更简洁，不过它看起来不太像是个很厉害的组件，纯粹是个函数(式)而已:

 const HelloWorld = (props) => (
   <h1>{props.text}</h1>
 )

注: React的最近版本是从0.14直接大跳板号到15.0的。

注: 箭头函式的后面使用括号(())是只有单个语句时使用的，会自动加上return在语句前。如果是多行语句要用花括号({})，而且要加上return的语句。

函数(函式)定义方式有一些限制与规则，大致如下，太细可能要查文档:

• 里面不能有state(状态)。

• 里面不能用生命周期的方法，例如componentDidMount全部不行。

• propTypes屬性可以用，但要写在寫在函式區塊的"外面"

• 有用到JSX语句还是要import(引入)React函式库，JSX语法相当于要调用React.createElement方法，所以需要。

这个函式定义方式现在在redux中有变化应用方式出现，就是拿来再区分为容器组件(Container Components)与呈现组件(Presentational Components)，即是以函数型的组件解决方式，完全舍弃类(建构式样式)或工厂样式，是一种更简洁的体现。

这篇关于javascript - react 组件两种声明方式疑问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！