反应中函数组件与类组件有什么区别

这篇文章给大家分享的是有关反应中函数组件与类组件有什么区别的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

区别:1,函数组件是一个纯函数,它接收一个道具对象返回一个反应元素,而类组件需要去继承反应。组件并且创建渲染函数返回元反应素。2,函数组件没有生命周期和状态状态,而类组件有。

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

定义一个组件最简单的方式就是使用JavaScript <代码> 函数:

从& # 39;进口反应反应# 39; 　　const欢迎=(道具)=比;{ 　　返回& lt; h2>欢迎,{props.name} & lt;/h2> 　　} 　　出口默认欢迎

这个函数接收一个<代码>道具> 元反应素

你也可以使用<代码> ES6类语法去写一个组件:

从& # 39;进口反应反应# 39; 　　类欢迎延伸反应。组件{ 　　构造函数(道具){ 　　超级(道具) 　　} 　　呈现(){ 　　返回& lt; h2>欢迎,{this.props.name} & lt;/h2> 　　} 　　} 　　 　　出口默认欢迎

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

<强>

两者最明显的不同就是在语法上,函数组件是一个纯函数,它接收一个<代码>道具> 元反应素。而类组件需要去继承<代码>反应。组件> 渲染函数返回<代码> 元反应素,这将会要更多的代码,虽然它们实现的效果相同。

我们更深入的了解下,使用<代码> babel7> 函数组件转译结果:

“使用strict"; 　　 　　var _interopRequireDefault=要求(“@babel/运行/帮助/interopRequireDefault"); 　　 　　Object.defineProperty(出口,“__esModule", { 　　值:true 　　}); 　　出口(“default")=无效0; 　　 　　var _react=_interopRequireDefault(要求(“react")); 　　 　　var欢迎=function欢迎(道具){ 　　(“default")返回_react .createElement (“h2", null,“欢迎,“,props.name); 　　}; 　　 　　var _default=欢迎; 　　出口(“default")=_default;

类组件转译结果:

“使用strict"; 　　 　　var _interopRequireDefault=要求(“@babel/运行/帮助/interopRequireDefault"); 　　 　　Object.defineProperty(出口,“__esModule", { 　　值:true 　　}); 　　出口(“default")=无效0; 　　 　　var _classCallCheck2=_interopRequireDefault(要求(“@babel/运行/帮助/classCallCheck")); 　　 　　var _createClass2=_interopRequireDefault(要求(“@babel/运行/帮助/createClass")); 　　 　　var _possibleConstructorReturn2=_interopRequireDefault(要求(“@babel/运行/帮助/possibleConstructorReturn")); 　　 　　var _getPrototypeOf2=_interopRequireDefault(要求(“@babel/运行/帮助/getPrototypeOf")); 　　 　　var _inherits2=_interopRequireDefault(要求(“@babel/运行/帮助/inherits")); 　　 　　var _react=_interopRequireDefault(要求(“react")); 　　 　　欢迎var=/* # __PURE__ */函数(_React组件美元){ 　　(0,_inherits2 [“default"])(欢迎,_React组件); 　　 　　函数欢迎(道具){ 　　(0,_classCallCheck2 [“default"])(这,欢迎); 　　返回(0,_possibleConstructorReturn2 [“default"]) (, (0, _getPrototypeOf2 [“default"])(欢迎)。调用(这一点,道具)); 　　} 　　 　　(0,_createClass2 [“default"])(欢迎,[{ 　　关键:“render", 　　价值:函数呈现(){ 　　(“default")返回_react .createElement (“h2", null,“欢迎,“,this.props.name); 　　} 　　})); 　　返回欢迎; 　　}(_react [“default"] .Component); 　　 　　var _default=欢迎; 　　出口(“default")=_default;

可以看到类组件转译成<代码> ES5>

<强>

因为函数组件是一个纯函数,你不能在组件中使用<代码>设置状态()>

如果你需要在你的组件中使用<代码> ,你可以选择创建一个类组件或者将<代码> 状态提升到你的父组件中,然后通过<代码>道具>

<强>

你不能在函数组件中使用生命周期钩子,原因和不能使用

反应中函数组件与类组件有什么区别