、
本文操作环境：windows7系统、dell g3电脑、react17.0.1版。
在本文中我将向你展示函数组件和类组件有什么不同，并且在编码过程中应该如何选择？
定义一个组件最简单的方式就是使用javascript函数：
import react from 'react'const welcome = (props) => { return <h1>welcome, {props.name}</h1>}export default welcome
这个函数接收一个props对象并返回一个react元素
你也可以使用es6 class语法去写一个组件：
import react from 'react'class welcome extends react.component { constructor(props) { super(props) } render() { return <h1>welcome, {this.props.name}</h1> }}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/runtime/helpers/interoprequiredefault);object.defineproperty(exports, __esmodule, { value: true});exports[default] = void 0;var _classcallcheck2 = _interoprequiredefault(require(@babel/runtime/helpers/classcallcheck));var _createclass2 = _interoprequiredefault(require(@babel/runtime/helpers/createclass));var _possibleconstructorreturn2 = _interoprequiredefault(require(@babel/runtime/helpers/possibleconstructorreturn));var _getprototypeof2 = _interoprequiredefault(require(@babel/runtime/helpers/getprototypeof));var _inherits2 = _interoprequiredefault(require(@babel/runtime/helpers/inherits));var _react = _interoprequiredefault(require(react));var welcome =/*#__pure__*/function (_react$component) { (0, _inherits2[default])(welcome, _react$component); function welcome(props) { (0, _classcallcheck2[default])(this, welcome); return (0, _possibleconstructorreturn2[default])(this, (0, _getprototypeof2[default])(welcome).call(this, props)); } (0, _createclass2[default])(welcome, [{ key: render, value: function render() { return _react[default].createelement(h1, null, welcome, , this.props.name); } }]); return welcome;}(_react[default].component);var _default = welcome;exports[default] = _default;
可以看到类组件转译成es5后代码更多更长，但这不是区分它们的主要因素，仅仅了解一下。
2、状态管理
因为函数组件是一个纯函数，你不能在组件中使用setstate()，这也是为什么把函数组件称作为无状态组件。
如果你需要在你的组件中使用state，你可以选择创建一个类组件或者将state提升到你的父组件中，然后通过props对象传递到子组件。
3、生命周期钩子
你不能在函数组件中使用生命周期钩子，原因和不能使用state一样，所有的生命周期钩子都来自于继承的react.component中。
因此，如果你想使用生命周期钩子，那么需要使用类组件。
注意：在react16.8版本中添加了hooks，使得我们可以在函数组件中使用usestate钩子去管理state，使用useeffect钩子去使用生命周期函数。因此，2、3两点就不是它们的区别点。从这个改版中我们可以看出作者更加看重函数组件，而且react团队曾提及到在react之后的版本将会对函数组件的性能方面进行提升。
4、调用方式
如果sayhi是一个函数，react需要调用它：
// 你的代码 function sayhi() { return <p>hello, react</p> } // react内部 const result = sayhi(props) // » <p>hello, react</p>
如果sayhi是一个类，react需要先用new操作符将其实例化，然后调用刚才生成实例的render方法：
// 你的代码 class sayhi extends react.component { render() { return <p>hello, react</p> } } // react内部 const instance = new sayhi(props) // » sayhi {} const result = instance.render() // » <p>hello, react</p>
可想而知，函数组件重新渲染将重新调用组件方法返回新的react元素，类组件重新渲染将new一个新的组件实例，然后调用render类方法返回react元素，这也说明为什么类组件中this是可变的
5、获取渲染时的值
这一点是他们最大差异，但又常常被人们忽略。
考虑以下组件：
function profilepage(props) { const showmessage = () => { alert('followed ' + props.user); } const handleclick = () => { settimeout(showmessage, 3000); } return ( <button onclick={handleclick}>follow</button> )}
userprofile组件很简单，就一个follow按钮，该按钮使用了settimeout模拟网络请求。用户点击这个按钮之后会弹出一个警告框。如果props.user为'dan'，它将在三秒钟后显示'followed dan'。
我们如何将其编写为类？天真的翻译可能像这样：
class profilepage extends react.component { showmessage() { alert('followed ' + this.props.user); } handleclick() { settimeout(this.showmessage.bind(this), 3000); } render() { return <button onclick={this.handleclick.bind(this)}>follow</button> }}
通常认为这两个代码段是等效的。人们经常在这些模式之间自由重构，而没有注意到它们的含义
但是，这两个代码段是完全不同的。好好看看他们。你看到区别了吗？
分别按下面的顺序来操作follow按钮：
先点击follow按钮在3s之前更改下拉选择项的选项阅读弹出的警告框内容你会发现函数组件和类组件是有区别的：
函数组件：按上面所列的三个步骤操作时，当用户在3s前更改下拉选择框的选项时，h1的用户名会立马改变，而3s后弹出的警告框中的用户名并不会改变
类组件：按上面所列的三个步骤操作时，当用户在3s前更改下拉选择框的选项时，h1中的用户名会立马改变，而3s后弹出的警告框中的用户名也会改变
那么，为什么我们的类示例会这样表现呢？
让我们仔细看一下showmessage类中的方法：
showmessage() { alert('followed ' + this.props.user); }
在showmessage方法中读取了this.props.user(也是我们要输出的用户名称)。而react中的props是不可变的，但是this是可变的，而且是一直是可变的。这也是类组件中this的目的。react自身会随着时间的推移对this进行修改，以便你可以在render函数或生命周期中读取新的版本。
因此，如果组件在请求重新渲染时，this.props将会改变。showmessage方法会从新的props中读取user。你所看到的效果也正是因为这个原因。
在react中的组件，ui在概念上可以理解是程序当前状态的函数，那么事件处理就是让ui的渲染结果一部分一部分可视化输出。我们的事件处理程序属于具有特定props和state的特定渲染。但是，当回调超时的话，this.props就会打破这种联系。示例中的showmessage方法在回调时没有绑定到任何特定的渲染，因此它会丢失真正的props。
那么我们有没有一种较好的方式可以使用正确的props来修复render和showmessage回调之间的联系。我们可以在事件发生的早期，将this.props传递给超时完成的处理程序来尝试着解决这个问题。这种解决方式属于闭包的范畴。
class profilepage extends react.component { showmessage(user) { alert('followed ' + user); } handleclick() { cosnt {user} = this.props settimeout(this.showmessage.bind(this, user), 3000); } render() { return <button onclick={this.handleclick.bind(this)}>follow</button> }}
我们使用闭包机制将上一状态的值保存下来待showmessage方法调用。即使this.props发生变化，但并不改变user
这种方法虽然解决我们前面所提到的问题，但是这种方法代码会随着props的个数增加，代码也会变得更加冗余也易于出错。如果我们也需要访问state。如果showmessage调用另一个方法，该方法会读取this.props.something或this.state.something。我们又会碰到同样的问题。所以我们必须通过this.props作为showmessage的参数来修复它们之间存在的问题。
但这么做会破坏类提供的特性。也令人难于记住或执行。另外，在handleclick中内联alert中的代码并不能解决更大的问题。我们希望以一种允许代码分解成更多方法的方式来构造代码，同时还可以读取与其相关的render所对应的props和state。
或许，我们可以在类的构造函数中绑定这些方法：
class profilepage extends react.component { render() { // 获取props cosnt props = this.props // 它们不是类方法 const showmessage = () => { alert('followed ' + props.user); } const handleclick = () => { settimeout(showmessage, 3000) } return <button onclick={handleclick}>follow</button> }}
这样一来，函数组件和类组件所达到的效果都一样了。在类组件中可以捕获渲染时的props。效果上看上去是一样了，但看起来怪怪的。如果在类组件中的render中定义函数而不是使用类方法，那么还有使用类的必要性？
更多编程相关知识，请访问：编程课程！！
以上就是react中函数组件与类组件的区别是什么？的详细内容。