reactjs - react react native差異




在React/React Native中使用構造函數與getInitialState有什麼區別? (4)

我已經看到兩者可以互換使用。

兩者的主要用例是什麼? 有優點/缺點嗎? 是更好的做法嗎?


好的,最大的區別是從它們的來源開始,所以 constructor 是JavaScript中類的構造器,另一方面, getInitialStateReact 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 */ };
  },
});

constructorgetInitialState 之間的區別是 ES6 ES5 本身之間的區別。
getInitialStateReact.createClass
constructorReact.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.createClassReact.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([]);

注意,初始狀態作為參數傳遞給 useStateuseState([])

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





constructor