功能组件或类组件

时间:2019-07-19 13:45:43

标签: reactjs react-hooks react-component

在React 16.8之后,React Hook在功能组件中为我们提供了处理状态。现在,推荐在React App中使用哪个组件?

3 个答案:

答案 0 :(得分:1)

使用钩子时,最好使用功能组件。这就是他们在其官方页面上提到的-

  

类会使人与机器混淆
  除了使代码重用和代码组织变得更加困难之外,我们还发现类可能是学习React的一大障碍。您必须了解它在JavaScript中的工作方式,这与大多数语言中的工作方式截然不同。您必须记住绑定事件处理程序。如果没有不稳定的语法建议,代码将非常冗长。人们可以很好地理解道具,状态和自上而下的数据流,但仍会遇到类问题。 React中功能和类组件之间的区别以及何时使用每个组件之间的区别甚至导致经验丰富的React开发人员之间也存在分歧。

     

此外,React已经停产了大约五年,我们希望   确保它在未来五年内保持相关性。作为斯维尔特,   Angular,Glimmer等显示了提前编译   组件具有很大的未来潜力。特别是如果不是   仅限模板。最近,我们一直在尝试   使用Prepack进行元件折叠,我们发现早期很有希望   结果。但是,我们发现类组件可以鼓励   导致这些优化的无意识模式可归结为   较慢的路径。课堂也提出了当今工具的问题。对于   例如,类的缩小效果不佳,并且会导致热加载   片状且不可靠。我们想提供一个使它更加强大的API   代码可能会停留在可优化的路径上。

     

要解决这些问题挂钩可让您使用React的更多功能   没有课程。从概念上讲,React组件始终是   更接近功能。挂钩包含功能,但不牺牲   React的实践精神。钩子可以访问命令   逃脱舱门,不需要您学习复杂的功能或   反应式编程技术。

要详细了解-https://reactjs.org/docs/hooks-intro.html

答案 1 :(得分:0)

使用挂钩,所有组件都是功能组件,但是有相似之处。例如;

  1. 如果您使用的是 useEffect钩子,它就像生命周期方法一样,您可以监听道具更改并相应地触发一些功能。但是它仍然是一个功能组件,它没有扩展React.Component

  2. 如果您使用的是 useState钩子,则会在组件中保留一个状态,但是它是一个功能组件,它不会扩展React.Component类

  3. 如果您不使用任何挂钩,即仅获取道具并显示相关数据,那么它是一个功能组件,您就是不使用任何挂钩

答案 2 :(得分:-1)

由您决定,我会尽一切可能为您的团队做最好的事情。我的团队习惯于使用面向对象的语言,例如java和c#,因此我们坚持使用类,因为它们对于javascript新手来说更易于理解。

There are no plans to remove react classes,因此无需将来通过切换到函数来证明您的代码。