Sự khác biệt giữa sử dụng constructor và getInitialState trong React / React Native là gì?

Tôi đã thấy cả hai được sử dụng thay thế cho nhau.

Các trường hợp sử dụng chính cho cả hai là gì? Có ưu / nhược điểm không? Một trong những thực hành tốt hơn?

Hai cách tiếp cận không thể thay thế cho nhau. Bạn nên khởi tạo trạng thái trong getInitialStatephương thức khởi tạo khi sử dụng các lớp ES6 và xác định phương thức khi sử dụng React.createClass.

Xem tài liệu React chính thức về chủ đề của các lớp ES6 .

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

tương đương với

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

Sự khác biệt giữa constructorvà getInitialStatelà sự khác biệt giữa ES6 và ES5 .
getInitialStateđược sử dụng với React.createClass và
constructorđược sử dụng với React.Component.

Do đó, câu hỏi tập trung vào những ưu điểm / nhược điểm của việc sử dụng ES6 hoặc ES5 .

Hãy xem xét sự khác biệt trong mã

ES5

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

ES6

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

Có một chủ đề reddit thú vị liên quan đến điều này.

Cộng đồng React đang tiến gần hơn đến ES6 . Ngoài ra nó được coi là thực hành tốt nhất.

Có một số khác biệt giữa React.createClassvà React.Component. Ví dụ, làm thế nào thisđược xử lý trong những trường hợp này. Đọc thêm về những khác biệt như vậy trong bài đăng blog này và nội dung của facebook về tính năng tự động

constructorcũng có thể được sử dụng để xử lý các tình huống như vậy. Để liên kết các phương thức với một cá thể thành phần, nó có thể được liên kết trước trong constructor. Đây là một vật liệu tốt để làm những thứ tuyệt vời như vậy.

Một số tài liệu hay khác về các phương pháp
hay nhất Các phương pháp hay nhất cho trạng thái thành phần trong dự án React.js
Chuyển đổi React từ ES5 sang ES6

Cập nhật: 09 tháng 4 năm 2019, :

Với những thay đổi mới trong API lớp Javascript, bạn không cần hàm tạo.

Bạn có thể làm

class TodoApp extends React.Component {

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

Điều này sẽ vẫn được chuyển sang định dạng hàm tạo, nhưng bạn sẽ không phải lo lắng về điều đó. bạn có thể sử dụng định dạng dễ đọc hơn này.

Với React Hooks

Từ phiên bản React 16.8, có một API Called hooks mới.

Bây giờ, bạn thậm chí không cần một thành phần lớp để có trạng thái. Nó thậm chí có thể được thực hiện trong một thành phần chức năng.

import React, { useState } from 'react';

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

Lưu ý rằng trạng thái ban đầu được truyền như một đối số cho useState;useState([])

Đọc thêm về phản ứng móc nối từ các tài liệu chính thức

OK, sự khác biệt lớn là bắt đầu từ nơi chúng đến từ, constructorphương thức khởi tạo của lớp của bạn trong JavaScript cũng vậy, ở phía bên kia, getInitialStatelà một phần lifecyclecủa React.

constructor là nơi lớp học của bạn được khởi tạo ...

Constructor

Phương thức khởi tạo là một phương thức đặc biệt để tạo và khởi tạo một đối tượng được tạo bằng một lớp. Chỉ có thể có một phương thức đặc biệt với tên "constructor" trong một lớp. Một SyntaxError sẽ được ném ra nếu lớp chứa nhiều hơn một lần xuất hiện của một phương thức khởi tạo.

Một hàm tạo có thể sử dụng từ khóa super để gọi hàm tạo của một lớp cha.

Trong tài liệu React v16, họ không đề cập đến bất kỳ tùy chọn nào, nhưng bạn cần phải có getInitialStatenếu sử dụng createReactClass()...

Đặt trạng thái ban đầu

Trong các lớp ES6, bạn có thể xác định trạng thái ban đầu bằng cách gán this.state trong hàm tạo:

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

Với createReactClass (), bạn phải cung cấp một phương thức getInitialState riêng để trả về trạng thái ban đầu:

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

Truy cập tại đây để biết thêm thông tin.

Cũng tạo hình ảnh bên dưới để hiển thị một vài vòng đời của React Compoenents:

Nếu bạn đang viết lớp React-Native với ES6, định dạng sau sẽ được tuân theo. Nó bao gồm các phương thức vòng đời của RN cho lớp thực hiện các cuộc gọi mạng.

import React, {Component} from 'react';
import {
     AppRegistry, StyleSheet, View, Text, Image
     ToastAndroid
} from 'react-native';
import * as Progress from 'react-native-progress';

export default class RNClass extends Component{
     constructor(props){
          super(props);

          this.state= {
               uri: this.props.uri,
               loading:false
          }
     }

     renderLoadingView(){
          return(
               <View style={{justifyContent:'center',alignItems:'center',flex:1}}>
                    <Progress.Circle size={30} indeterminate={true} />
                    <Text>
                        Loading Data...
                    </Text>
               </View>
          );
     }

     renderLoadedView(){
          return(
               <View>

               </View>
          );
     }

     fetchData(){
          fetch(this.state.uri)
               .then((response) => response.json())
               .then((result)=>{

               })
               .done();

               this.setState({
                         loading:true
               });
               this.renderLoadedView();
     }

     componentDidMount(){
          this.fetchData();
     }

     render(){
          if(!this.state.loading){
               return(
                    this.renderLoadingView()
               );
          }

          else{

               return(
                    this.renderLoadedView()
               );
          }
     }
}

var style = StyleSheet.create({

});

Ngày nay, chúng ta không phải gọi hàm tạo bên trong thành phần - chúng ta có thể gọi trực tiếp state={something:""}, nếu không, trước đây, trước tiên chúng ta phải khai báo hàm tạo với super()để kế thừa mọi thứ từ React.Componentlớp sau đó bên trong hàm khởi tạo chúng ta khởi tạo trạng thái của mình.

Nếu sử dụng React.createClassthì xác định trạng thái khởi tạo với getInitialStatephương thức.

Sự khác biệt lớn là bắt đầu từ nơi chúng đến, vì vậy hàm tạo là hàm tạo lớp của bạn trong JavaScript, mặt khác, getInitialState là một phần của vòng đời của React. Phương thức khởi tạo là một phương thức đặc biệt để tạo và khởi tạo một đối tượng được tạo bằng một lớp.