何时使用基于ES6类的React组件和功能性ES6 React组件?

2020/10/13 16:21 · javascript ·  · 0评论

在花了一些时间学习React之后,我了解了创建组件的两个主要范例之间的区别。

我的问题是,什么时候应该使用哪个?为什么?一个人相对于另一个人的利益/取舍是什么?


ES6课程:

import React, { Component } from 'react';

export class MyComponent extends Component {
  render() {
    return (
      <div></div>
    );
  }
}

功能性:

const MyComponent = (props) => {
    return (
      <div></div>
    );
}

我正在考虑什么时候只要该组件没有状态要操作就可以了,是吗?

我猜如果我使用任何生命周期方法,最好使用基于类的组件。

你有正确的主意。如果您的组件只做一些道具和渲染,那么功能就可以了。您可以将它们视为纯函数,因为在给定相同的道具的情况下,它们将始终呈现并表现相同的行为。而且,他们不在乎生命周期方法或拥有自己的内部状态。

因为它们很轻巧,所以将这些简单的组件作为功能组件来编写是很标准的。

如果您的组件需要更多功能(例如保持状态),请改用类。

更多信息:https : //facebook.github.io/react/docs/reusable-components.html#es6-classes


编辑:以上大部分是正确的,直到引入React Hooks。

  • componentDidUpdate可以使用复制useEffect(fn),其中fn在重新渲染时要运行的功能。

  • componentDidMount可以使用复制方法useEffect(fn, []),其中方法fn是在重新渲染时运行的函数,并且[]是且仅当自上次渲染以来至少一个值已更改的情况下,组件才能为其重新渲染的对象数组。由于没有useEffect(),因此在第一次安装时运行一次。

  • state可以复制为useState(),其返回值可以解构为状态的引用和可以设置状态的函数(即const [state, setState] = useState(initState))。一个例子可以更清楚地解释这一点:

const Counter = () => {
  const [count, setCount] = useState(0)

  const increment = () => { 
    setCount(count + 1);
  }

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
    </div>
  )
}

default export Counter

关于何时在功能组件上使用类的建议,Facebook正式建议尽可能使用功能组件顺便说一句,我听到很多人讨论出于性能原因不使用功能组件,特别是

“事件处理功能在功能组件中按渲染重新定义”

虽然正确,但请考虑您的组件是否真的以值得关注的速度或体积进行渲染。

如果是这样,则可以防止使用useCallbackuseMemo挂钩重新定义功能但是,请记住,这可能会使您的代码(微观上)的性能变差

但老实说,我从未听说过重新定义功能是React应用程序的瓶颈。过早的优化是万恶之源-遇到问题时请担心此事

尽可能尝试使用无状态功能(功能组件)。在某些情况下,您需要使用常规的React类:

  • 组件需要保持状态
  • 组件重新渲染过多,您需要通过进行控制 shouldComponentUpdate
  • 您需要一个容器组件

更新

现在有一个称为React的类PureComponent,您可以扩展(而不是Component)来实现它自己的该类可以shouldComponentUpdate为您比较浅层的道具。阅读更多

2019年3月更新

https://overreacted.io/how-are-function-components-different-from-classes/

2019年2月更新:

随着React钩子的引入,似乎React团队希望我们尽可能使用功能组件(更好地遵循JavaScript的功能性质)。

他们的动力:

1.) It’s hard to reuse stateful logic between components
2.) Complex components become hard to understand
3.) Classes confuse both people and machines

带有钩子的功能组件几乎可以执行类组件可以执行的所有操作,而无需上面提到的任何缺点。

我建议您尽快使用它们。

原始答案

功能组件比基于类的组件轻巧得多,“它们的表现完全与类相同”。- https://github.com/facebook/react/issues/5677#issuecomment-241190513

上面的链接有些过时了,但是React 16.7.0的文档说功能和类组件:

“从React的角度来看是等效的。” - https://reactjs.org/docs/components-and-props.html#stateless-functions

除了语法之外,功能组件和仅实现render方法的类组件之间基本上没有区别。

将来(引用上面的链接)“我们[反应]可能会添加此类优化。”

如果您试图通过消除不必要的渲染来提高性能,则两种方法都可以提供支持。memo用于功能组件和PureComponent类。

- https://reactjs.org/docs/react-api.html#reactmemo

- https://reactjs.org/docs/react-api.html#reactpurecomponent

完全取决于您。如果您想要更少的样板,请继续使用。如果您喜欢函数式编程并且不喜欢类,请使用函数式。如果要在代码库中的所有组件之间保持一致性,请使用类。如果您在需要诸如的东西时已经厌倦了从功能性组件重构为基于类的组件state,请使用类。

从React 16.8开始,术语无状态功能组件具有误导性,应避免使用它们,因为它们不再不再是无状态的(React.SFC不推荐使用Dan Abramov on React.SFC),它们可以具有状态,可以具有钩子(充当钩子)生命周期方法),它们或多或少与类组件重叠

基于类的组件

功能组件:

为什么我更喜欢功能组件

  • 反应提供useEffect挂钩,是结合了非常清晰和简洁的方式componentDidMountcomponentDidUpdate以及componentWillUnmount生命周期方法
  • 使用钩子,您可以提取可以在组件之间轻松共享测试的逻辑
  • 减少范围界定上的混乱

反应动机为何使用挂钩(即功能组件)。

表单更易于使用,因为您可以重复使用表单输入字段,并且可以使用React显示条件将它们分开。

类是不可分解或重用的一大组件。它们更适合功能繁重的组件,例如在弹出模块中执行算法的组件或其他组件。

最佳实践是功能组件的可重用性,然后使用小型功能组件组装完整的部分,例如,将表单输入字段导入到React表单的文件中。

另一个最佳实践是在执行此操作时不要嵌套组件。

本文地址:http://javascript.askforanswer.com/heshishiyongjiyues6leidereactzujianhegongnengxinges6-reactzujian.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!