小编典典

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

javascript

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

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


ES6课程:

import React, { Component } from 'react';

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

功能性:

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

我认为只要没有状态可以由该组件操纵,功能就可以了,是吗?

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


阅读 372

收藏
2020-05-01

共1个答案

小编典典

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

因为它们是轻量级的,所以将这些简单的组件作为功能组件编写是相当标准的。

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

编辑 :以上大部分是正确的,直到引入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应用程序的瓶颈。过早的优化是万恶之源-遇到问题时请担心

2020-05-01