reactjs - react react native差異

好的，最大的區別是從它們的來源開始，所以 constructor 是JavaScript中類的構造器，另一方面， getInitialState 是 React lifecycle 的一部分。

constructor 是您的類被初始化的地方...

建設者

構造函數方法是用於創建和初始化使用類創建的對象的特殊方法。 在一個類中，只能有一個名為“ constructor”的特殊方法。 如果該類包含多個構造函數方法，則將引發SyntaxError。

構造函數可以使用super關鍵字來調用父類的構造函數。

在React v16文檔中，他們沒有提到任何首選項，但是如果您使用 createReactClass() 則需要 getInitialState ...

設定初始狀態

在ES6類中，可以通過在構造函數中分配this.state來定義初始狀態：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {count: props.initialCount};
  }
  // ...
}

使用createReactClass（）時，您必須提供一個單獨的getInitialState方法，該方法返回初始狀態：

var Counter = createReactClass({
  getInitialState: function() {
    return {count: this.props.initialCount};
  },
  // ...
});

訪問 here 獲取更多信息。

還創建了下面的圖像，以顯示React組件的幾個生命週期：

如今，我們不必在組件內部調用構造函數-我們可以直接調用 state={something:""} ，否則以前我們首先要使用 super() 聲明構造函數以繼承 React.Component 類的所有內容。在構造函數中，我們初始化狀態。

如果使用 React.createClass 則使用 getInitialState 方法定義初始化狀態。

這兩種方法不可互換。 使用ES6類時，應在構造函數中初始化狀態，並使用 React.createClass 時定義 getInitialState 方法。

請參閱關於ES6類的官方React文檔 。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { /* initial state */ };
  }
}

相當於

var MyComponent = React.createClass({
  getInitialState() {
    return { /* initial state */ };
  },
});

constructor 和 getInitialState 之間的區別是 ES6 和 ES5 本身之間的區別。
getInitialState 與 React.createClass 和
constructor 與 React.Component 一起 React.Component 。

因此，問題歸結為使用 ES6 或 ES5的 優缺點。

讓我們看一下代碼的區別

ES5

var TodoApp = React.createClass({ 
  propTypes: {
    title: PropTypes.string.isRequired
  },
  getInitialState () { 
    return {
      items: []
    }; 
  }
});

ES6

class TodoApp extends React.Component {
  constructor () {
    super()
    this.state = {
      items: []
    }
  }
};

關於這一點，有一個有趣的 reddit線程 。

React社區越來越靠近 ES6 。 也被認為是最佳實踐。

React.createClass 和 React.Component 之間有一些區別。 例如，在這些情況下如何處理。 在此博客文章 和facebook的 自動綁定內容中 了解有關此類差異的更多信息

constructor 也可以用來處理這種情況。 要將方法綁定到組件實例，可以在 constructor 預綁定方法。 This 是做這些很酷的事情的好材料。

一些有關最佳做法的好材料
React.js中組件狀態的最佳實踐
將React項目從ES5轉換為ES6

更新：2019年4月9日 ：

隨著Javascript類API的新變化，您不需要構造函數。

你可以做

class TodoApp extends React.Component {

    this.state = {items: []}
};

這仍然會轉換為構造函數格式，但是您不必擔心。 您可以使用這種更具可讀性的格式。

帶React掛鉤

從React 16.8版本開始，有一個稱為鉤子的新API。

現在，您甚至不需要類組件即可擁有狀態。 它甚至可以在功能組件中完成。

import React, { useState } from 'react';

function TodoApp () {
  const items = useState([]);

注意，初始狀態作為參數傳遞給 useState ； useState([])

從官方文檔中 了解更多關於react hooks 的信息