我應該在 React 中使用什么類型的組件：函數式組件還是類基組件？

Question

讓我感到困惑的是，功能組件和基於類的組件現在都可以使用State和Props但實現方式不同。 我更喜歡基於類的組件，因為我是 angular 開發人員，我發現使用這些類型的組件更舒服。 但是我搜索了這個，許多專家說最好盡可能多地使用功能組件。

我想知道當有人申請 React 開發人員職位時，這對科技公司是否真的很重要。 他們會看這些東西嗎？ 由於它們在實現上有很大不同......

Answer 1

方法組件和類組件之間存在一些差異。

方法組件：

在 React 中聲明組件的最簡單方法。 您只需要聲明一個返回jsx的方法。 例子：

const MessageComponent = ({ name }) => { return <h1>Hi {name}</h1> }

除了引入 React Hooks 之外，您還可以使用方法組件完成大部分功能

componentDidUpdate => useEffect(fn)

componentDidMount => useEffect(fn, [])

state => useState()

類組件：

組件的健壯版本。 使用類組件，您可以做更多事情。 默認情況下， Props將在類上下文中this.props 。 您可以為組件使用狀態、局部變量。 您可以添加許多共享相同狀態的類的方法。

export default class MessageComponent  extends Component {
  state = {
    message: 'default message'
  }

  renderMessage = () => {
    return (
      <h1>
        Hi {this.props.name}
      </h1>
    )
  }

  render() {
    return (
      <div>
        {this.renderMessage()}
      </div>
    )
  }
}

類組件 VS 方法組件

不使用類組件的主要原因是您只需要一個簡單的組件，如button 、 card或代表性組件。 如果您的組件不需要復雜的狀態、復雜的邏輯，那么method component最適合您。

Answer 2

功能組件是新標准。 讓它們保持輕量級和可讀性更容易。 在高質量的代碼中，任何組件都不應該需要如此多的邏輯，以至於它總是超過 30-50 行，這樣可以保持簡潔明了，考慮到這一點，類組件只是又大又笨重

Answer 3

最初使用類組件，React 仍然支持。 根據 React 開發人員的說法，沒有停止支持他們的計划。 在現有的代碼庫中，沒有理由花費資源將類組件轉換為功能組件。

話雖如此，功能組件是新代碼的更好選擇。 它們還支持 React Hooks，它是基於類的生命周期方法的替代品。

如果您正在編寫新代碼，可能會專注於編寫功能組件。 但是，如果您正在申請工作，則現有代碼庫很有可能同時具有類和函數組件。 您需要對兩者都感到滿意，並能夠將其中一種轉化為另一種。

Answer 4

好吧，組織現在傾向於使用最新的，並雇用與任何新事物產生共鳴的人。

具有新 Hook 的功能組件也取代了生命周期方法

• 更容易管理
• 更大的兼容性，尤其是打字稿
• 更少和更干凈的代碼

Answer 5

如今，大多數開發人員正在轉向功能組件而不是類組件，因為可能有很多原因，但一些最有益的點是

1. 與基於類的組件相比，它們更具可讀性。
2. 易於測試和調試，因為它需要更少的代碼。
3. 根據指南，它可能會提高性能。

我想您應該將新組件編寫為功能組件。 因為現在公司將為舊代碼管理基於類的組件，但他們將繼續使用功能組件。 因此，您應該了解這兩種編碼約定。