React函数组件和类组件的区别及说明
更新时间：2022年08月08日 09:24:21 作者：前端精髓
这篇文章主要介绍了React函数组件和类组件的区别及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
React函数组件和类组件区别
定义组件有两个要求：
- 组件名称必须以大写字母开头
- 组件的返回值只能有一个根元素
函数组件
function Welcome (props) {
return <h1>Welcome {props.name}</h1>
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));函数组件接收一个单一的 props 对象并返回了一个React元素
类组件
class Welcome extends React.Component {
render() {
return (
<h1>Welcome { this.props.name }</h1>
);
}
}
ReactDOM.render(<Welcome name='react' />, document.getElementById('root'));- 无论是使用函数或是类来声明一个组件，它决不能修改它自己的 props。
- 所有 React 组件都必须是纯函数，并禁止修改其自身 props 。
- React是单项数据流，父组件改变了属性，那么子组件视图会更新。
- 属性 props 是外界传递过来的，状态 state 是组件本身的，状态可以在组件中任意修改
- 组件的属性和状态改变都会更新视图。
区别
函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。
| 区别 | 函数组件 | 类组件 |
|---|---|---|
| 是否有 this | 没有 | 有 |
| 是否有生命周期 | 没有 | 有 |
| 是否有状态 state | 没有 | 有 |
React函数式组件和类组件的优缺点
1.类组件的性能消耗比较大
因为类组件需要创建类组件的实例，而且不能销毁。
2.函数式组件性能消耗小
因为函数式组件不需要创建实例，渲染的时候就执行一下，得到返回的react元素后就直接把中间量全部都销毁。
函数式组件是不能有状态的，但是现在有了react hooks，也可能有状态了。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在V6版本中，<Switch>组件被替换成<Routes>组件，同时，component属性被element属性替换，这篇文章主要介绍了react-router v6新特性总结,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了react-router-dom5如何升级到6问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-01-01
本文主要介绍了实现React服务端渲染,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2025-01-01
这篇文章主要介绍了在 React Native 中给第三方库打补丁的过程解析,有时使用了某个React Native 第三方库，可是它有些问题，我们不得不修改它的源码，本文介绍如何修改源码又不会意外丢失修改结果的方法，需要的朋友可以参考下2022-08-08
这篇文章主要为大家介绍了React中如何处理承诺demo，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-12-12
这篇文章主要介绍了如何在React中调用多个onClick函数,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
导航组件Navigator可以让我们客户端在不同的页面见进行切换，下面这篇文章主要给大家介绍了关于React Native中Navigator的使用方法，文中通过图文介绍的非常详细，需要的朋友可以参考借鉴，下面随着小编来一起学习学习吧。2017-10-10
useState 通过在函数组件里调用它来给组件添加一些内部 state，React 会在重复渲染时保留这个 state，接下来通过一个示例来看看怎么使用 useState吧2021-06-06
笔者最近用react useEffect闭包，其中踩到了一些坑在此与大家分享一下。需要的朋友们下面随着小编来一起学习学习吧2021-06-06
这篇文章主要介绍了作为老司机使用 React 总结的 11 个经验教训,需要的朋友可以参考下2017-04-04
最新评论