antd 函数组件_react-函数组件和类组件的区别

在本文中我将向你展示函数组件和类组件有什么不同，并且在编码过程中应该如何选择？

定义一个组件最简单的方式就是使用JavaScript函数：

import React from 'react'

const Welcome = (props) => {

return

welcome, {props.name}

}

export default Welcome

这个函数接收一个props对象并返回一个react元素

你也可以使用ES6 class语法去写一个组件：

import React from 'react'

class Welcome extends React.Component {

constructor(props) {

super(props)

}

render() {

return

welcome, {this.props.name}

}

}

export default Welcome

这两个版本是等价的，它们具有相同的输出。那么我们应该去选择哪一种实现方式呢？下面我们来对他们进行比较

1、语法上

两者最明显的不同就是在语法上，函数组件是一个纯函数，它接收一个props对象返回一个react元素。而类组件需要去继承React.Component并且创建render函数返回react元素，这将会要更多的代码，虽然它们实现的效果相同。

我们更深入的了解下，使用babel7分别对他们进行转译

函数组件转译结果：

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {

value: true

});

exports["default"] = void 0;

var _react = _interopRequireDefault(require("react"));

var Welcome = function Welcome(props) {

return _react["default"].createElement("h1", null, "welcome, ", props.name);

};

var _default = Welcome;

exports["default"] = _default;

类组件转译结果：

"use strict";

var _interopRequireDefault = require("@babel/runt