React Components - 創建它們的正確方法是什么？

Question

我正在學習 React，我遇到了兩種不同的創建組件的方法。 一個是Facebook的，另一個是AirBnB的。 我還在我一直在看的教程中看到了它們。

這可能是一個愚蠢的問題，但哪個更好？

Facebook：

var React = require("react");

var Component = React.createClass({
    render: function(){
        return (
            <div>{this.props.item}</div>
        );
    }
});

module.exports = Component;

民宿：

import React from "react";

export default class Component extends React.Component {
    render() {
        return (
            <div>{this.props.item}</div>
        );
    }
}

免責聲明：我可能在代碼中有錯誤，所以請原諒我，只關注樣式。

Answer 1

反應組件：

您有 4 種創建 可重用 React 組件的基本方法：

• 使用const MyComponent = () => {}或function MyComponent() + Hooks的函數組件 - 創建反應組件的當前標准。 該組件是一個返回要渲染的 JSX 的函數。 鈎子取代了類組件的生命周期方法。

• class MyComponent extends React.Component {} - ES6 創建有狀態組件的方式。 需要通過 babel 進行轉譯，它也處理 JSX。 如果您需要狀態和生命周期方法 - 使用它。

• class MyComponent extends React.PureComponent {} - React 15.3.0中的新功能。 與 React.Component 相同，但具有類似PureRenderMixin的功能，因為 ES6 組件不支持 mixin。

• React.createClass({}) - 舊方法，不需要轉譯，但由於您可能會使用 JSX，所以無論如何您都需要轉譯。 仍然出現在舊的 React 教程中，但最終會被棄用。

JS模塊：

Nodejs 語法（commonjs）使用require()而 ES6 使用import 。 你可以使用任何你喜歡的東西，甚至將兩者混合使用，但是 ES6 模塊的導入/導出方式對於反應組件來說更“標准”。 現在import實際上被 babel 轉譯為require 。 require和import都需要某種捆綁工具，例如 webpack 或 browserify 才能在瀏覽器中工作。

渲染（）與 .render：

render()是在 ES6 類中定義方法的 ES6 方式。

React.createClass({})需要一個 JS 對象字面量。 在 ES5 中，在對象字面量中定義方法使用prop: function() {}語法，例如render: function()語法。 順便說一句 - 在 ES6 中，您實際上可以將文字中的方法編寫為render() 。

Answer 2

來自 AirBnB 的那個使用 ES6 方式，但需要像 Babel 這樣的轉譯器。

ES6 是 Javascript 語言的下一個版本

閱讀更多： https ://toddmotto.com/react-create-class-versus-component/

Answer 3

正如他們所說，給貓剝皮的方法不止一種。 碰巧，創建 React 組件的方法也不止一種，它對動物更友好！

當 React 最初發布時，沒有在 JavaScript 中創建類的慣用方法，因此提供了“React.createClass” 。

后來，類作為 ES2015 的一部分被添加到該語言中，其中添加了使用 JavaScript 類創建 React 組件的能力。 除了函數式組件，JavaScript類現在是在 React 中創建組件的首選方式。

對於現有的“createClass”組件，建議您將它們遷移到 JavaScript 類。 但是，如果您有依賴於 mixin 的組件，則轉換為類可能不會立即可行。 如果是這樣，可以在 npm 上使用 create-react-class 作為替代品。

React 組件的最簡單版本是一個普通的 JavaScript 函數，它返回一個 React 元素：

功能組件：

function Label() {
  return <div>Super Helpful Label</div>
}

當然，有了 ES6 的奇跡，我們可以把它寫成一個箭頭函數。

const Label = () => <div>Super Helpful Label</div>

這些是這樣使用的：

const Label = () => <div>Super {props.title} Helpful Label</div>

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
         <Label title="Duper" />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

使用函數，您還可以解構函數簽名中的屬性。 它使您不必一遍又一遍地編寫道具。

組件也可以是 ES6 類。 如果您希望您的組件具有本地狀態，那么您需要有一個類組件。類還有其他優點，例如能夠使用生命周期掛鈎和事件處理程序。

類組件：

class Label extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return <div>Super {this.props.title} Helpful Label</div>
  }
}

class App extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div>
        <Label title="Duper" />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'))

這兩種風格各有利弊，但功能組件在可預見的將來會取代現代 React。

功能組件編寫得更短更簡單，這使得開發、理解和測試更容易。
類組件可能會與this的許多用途混淆。 使用函數式組件可以輕松避免這種混亂並保持一切清潔。

React 團隊正在為功能組件支持更多的 React 鈎子，以替換甚至改進類組件。 React 團隊早些時候提到，他們將通過避免不必要的檢查和內存分配來對功能組件進行性能優化。
盡管聽起來很有希望，但最近為諸如useState或useEffect 之類的功能組件引入了新的鈎子，同時還承諾它們不會過時類組件。 團隊正在尋求在較新的案例中逐步采用帶有鈎子的功能組件，這意味着無需將現有的使用類組件的項目切換到使用功能組件進行整體重寫，從而保持一致。