何时使用基于ES6类的React组件和功能性ES6 React组件? [英] When to use ES6 class based React components vs. functional ES6 React components?

问题描述

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

After spending some time learning React I understand the difference between the two main paradigms of creating components.

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

My question is when should I use which one and why? What are the benefits/tradeoffs of one over the other?

ES6类:

import React, { Component } from 'react';

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

---

功能:

---

Functional:

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

我认为只要没有该组件可以操纵的状态，它就会起作用吗?

I’m thinking functional whenever there is no state to be manipulated by that component, but is that it?

我猜我是否使用任何生命周期方法，最好使用基于类的组件.

I’m guessing if I use any life cycle methods, it might be best to go with a class based component.

推荐答案

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

You have the right idea. Go with functional if your component doesn't do much more than take in some props and render. You can think of these as pure functions because they will always render and behave the same, given the same props. Also, they don't care about lifecycle methods or have their own internal state.

由于它们很轻巧，因此将这些简单的组件作为功能组件来编写是很标准的.

Because they're lightweight, writing these simple components as functional components is pretty standard.

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

If your components need more functionality, like keeping state, use classes instead.

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

编辑:在引入React Hooks之前，上述大部分内容都是正确的.

EDIT: Much of the above was true, until the introduction of React Hooks.

可以使用useEffect(fn)复制

• componentDidUpdate，其中fn是在重新呈现时运行的功能.

• componentDidUpdate can be replicated with useEffect(fn), where fn is the function to run upon rerendering.

componentDidMount方法，其中fn是在重新渲染时运行的函数，并且[]是对象将针对其进行渲染的对象数组，当且仅当自上次渲染以来，至少有一个更改了值.由于没有，useEffect()在第一次安装时运行一次.

componentDidMount methods can be replicated with useEffect(fn, []), where fn is the function to run upon rerendering, and [] is an array of objects for which the component will rerender, if and only if at least one has changed value since the previous render. As there are none, useEffect() runs once, on first mount.

state，其返回值可以被解构为状态的引用和可以设置状态的函数(即const [state, setState] = useState(initState)).一个示例可能会更清楚地解释这一点:

state can be replicated with useState(), whose return value can be destructured to a reference of the state and a function that can set the state (i.e., const [state, setState] = useState(initState)). An example might explain this more clearly:

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正式建议

Regarding the recommendation on when to use class over functional components, Facebook officially recommends using functional components wherever possible. As a small aside, I have heard a number of people discussing not using functional components for the performance reasons, specifically that

事件处理功能在功能组件中按每个渲染进行了重新定义"

"Event handling functions are redefined per render in functional components"

尽管如此，但请考虑您的组件是否真的以值得关注的速度或体积进行渲染.

Whilst true, please consider if your components are really rendering at such a speed or volume that this would be worth concern.

如果是，则可以使用useCallback和useMemo挂钩防止重新定义功能.但是，请记住，这可能会使您的代码(微观而言)性能更差.

If they are, you can prevent redefining functions using useCallback and useMemo hooks. However, bear in mind that this may make your code (microscopically) worse in performance.

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

But honestly, I have never heard of redefining functions being a bottleneck in React apps. Premature optimisations are the root of all evil - worry about this when it's a problem

这篇关于何时使用基于ES6类的React组件和功能性ES6 React组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！