当前位置: 首页 > Web前端 > HTML

React中的Class和Function组件该选哪个?

时间:2023-03-27 23:15:15 HTML

React中的Class和Function组件选哪个?在深入比较之前,让我们回顾一下什么是React组件。每个React组件作为JavaScript本机支持允许将一些可重用代码片段插入到更大的代码片段中的功能。因此,它是应用程序的一种构建块。通过这种方式,React组件将UI划分为可重用的部分并返回HTML。所以它们是UI的一种子功能综上所述,什么是React组件就很清楚了。它们是JS代码和返回的HTML片段的单独组合。这里JS的主要目的是提供业务逻辑并允许创建正确的HTML,以便它可以插入到DOM中。在ReactJS中有两种创建组件的方法:类和功能组件。尽管它们存在差异,但它们做同样的事情,它们返回一些通过混合JS和HTML创建的HTML。所以现在让我们仔细看看并理解它们之间的主要区别类组件类组件是您在代码中这样定义的JS类:classMyComponentextendsReact.Component{constructor(props){super(props)this.state={}}render(){return

{"欢迎来到React世界"}
;通常,类组件扩展React.Component类。这些对象的状态定义了React.Component对象中的数据,并且可以在其生命周期内发生变化。因此,这些对象可以响应生命周期方法,例如ComponentWillUnMount、ComponentDidUpdate和ComponentDidMount,它们捕获状态变化并开始重新渲染,这反过来又会修改HTML并使用它更新DOM。此外,类组件将属性作为参数传递给构造函数(props)。这些道具应该通过调用super(props)传递给父组件类。通常,所有props在对象的生命周期内都是可访问的。最重要的是我们需要在类组件中实现render()方法。这个方法会返回我们必要的HTML功能组件简单来说,功能组件就是JS函数,可以通过两种方式创建:箭头函数或者简单的函数声明functionMyComponent(props){return
{"WelcometoReactworld"}
}constMyCoponentTwo=(props)=>{return(
{"欢迎来到React世界"}

祝你有美好的一天!

)}通常,功能组件返回单个HTML,但由div或React.Fragment包装。但是你必须记住,使用React.Fragment与div有点不同,React.Fragment元素不会呈现,因此它不会出现在DOM中,因此使用功能组件与类组件相比如何,因为它们是只是JS函数?他们无法跟踪状态及其更新,因为他们没有扩展React.Component?这曾经是这种情况,但表明他们创建了ReactHooks。使用它们允许以更简单的方式使用与类组件中相同的功能。这样我们就可以使用Reacthooks为类组件和功能组件维护和管理功能组件中的状态更新和生命周期事件。比较函数式组件类组件函数式组件只是简单的纯JavaScript纯函数,将props作为参数并返回一个React元素(JSX)类组件需要从React扩展。该组件创建一个渲染函数并返回一个React元素。功能组件中没有使用渲染方法,或者它本身就是render。它必须有一个render方法来返回JSX函数组件从运行到结束。一旦返回被释放,类组件被实例化。不同的生命周期方法保持存活并根据类的不同阶段运行和调用组件也被称为无状态组件,因为它们只是接受数据并以某种形式显示数据,它们主要负责渲染UI也被称为有状态组件,因为它们实现了逻辑和state不能使用React生命周期方法(例如componentDidMount),但那是之前的事。React生命周期方法可以在类组件中使用,因为这是为它设置的钩子可以很容易地用在组件中使用的函数中,使它们有状态它需要在类组件中使用不同的语法来实现钩子不要使用构造函数使用构造函数初始化存储状态使用哪一个?就这两个组件做同样的事情而言,越来越多的开发人员倾向于函数式编程,原因如下:1.相同的功能。函数式组件虽然是无状态的,但是类组件能做的事都可以用钩子做,更容易使用和实现2.简单。开发时间起着巨大的作用,编写功能组件有助于节省时间。它们编写起来更容易、更快,更重要的是,它们更易于阅读和理解。通常开发人员读的代码比写的多,理解每一段代码对整个开发过程都有很大的影响3.更好的测试。在功能组件中,一切都是显式和预定义的,您不必担心隐藏状态。所以,总而言之,功能组件更容易测试4.性能更好。通常,类组件更大、更复杂,这会对大型应用程序的性能和速度产生负面影响。此外,它们不那么灵活,并且扩展您的软件变得更加困难。在这方面,功能组件速度更快、可扩展性更强、更灵活。这为您的React应用程序提供了更好的性能和速度5.减少耦合。如果实体相互依赖,则意味着如果您更改一段代码中的某些内容,它将立即影响另一段代码。但如果脚本是松散耦合的,编辑和缩放它就会简单得多,不会造成任何麻烦。结论从上面你可以假设我倾向于使用组件。老实说,因为它更容易、更快,并且提供更好的代码质量。此外,即使是React团队也尽一切可能使功能组件更好,并将其应用到更广泛的用途。他们创建了像钩子这样的新特性,并尝试以多种方式鼓励使用功能组件。所以现在大多数开发者都使用这种组件,如果你在你的项目中看到一些类组件,现在更多的是认为它是遗留代码。不过,类组件并没有过时,你总是可以自由选择你的方法