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

637
Nader Dabit 2015-06-06 03:53.

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?

6 answers

941
Alexandre Kirszenberg 2015-06-06 04:06.

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 */ };
  },
});
161
sudo bangbang 2016-03-20 12:05.

Sự khác biệt giữa constructorgetInitialStatelà sự khác biệt giữa ES6ES5 .
getInitialStateđược sử dụng với React.createClass
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.createClassReact.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àynộ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

33
Alireza 2017-10-04 03:56.

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:

9
Анураг Пракаш 2017-03-10 21:25.

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({

});
2
Noname 2019-03-18 23:57.

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.

1
Apurva Aggarwal 2020-08-17 20:58.

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.

Related questions

MORE COOL STUFF

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett chia tay chồng sau 3 ngày bên nhau và vẫn kết hôn với anh ấy 25 năm sau

Cate Blanchett đã bất chấp những lời khuyên hẹn hò điển hình khi cô gặp chồng mình.

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Tại sao Michael Sheen là một diễn viên phi lợi nhuận

Michael Sheen là một diễn viên phi lợi nhuận nhưng chính xác thì điều đó có nghĩa là gì?

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Hallmark Star Colin Egglesfield Các món ăn gây xúc động mạnh đối với người hâm mộ tại RomaDrama Live! [Loại trừ]

Ngôi sao của Hallmark Colin Egglesfield chia sẻ về những cuộc gặp gỡ với người hâm mộ ly kỳ tại RomaDrama Live! cộng với chương trình INSPIRE của anh ấy tại đại hội.

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Tại sao bạn không thể phát trực tuyến 'chương trình truyền hình phía Bắc'

Bạn sẽ phải phủi sạch đầu đĩa Blu-ray hoặc DVD để xem tại sao Northern Exposure trở thành một trong những chương trình nổi tiếng nhất của thập niên 90.

Where in the World Are You? Take our GeoGuesser Quiz

Where in the World Are You? Take our GeoGuesser Quiz

The world is a huge place, yet some GeoGuessr players know locations in mere seconds. Are you one of GeoGuessr's gifted elite? Take our quiz to find out!

8 công dụng tuyệt vời của Baking Soda và Giấm

8 công dụng tuyệt vời của Baking Soda và Giấm

Bạn biết đấy, hai sản phẩm này là nguồn điện để làm sạch, riêng chúng. Nhưng cùng với nhau, chúng có một loạt công dụng hoàn toàn khác.

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Hạn hán, biến đổi khí hậu đe dọa tương lai của thủy điện Hoa Kỳ

Thủy điện rất cần thiết cho lưới điện của Hoa Kỳ, nhưng nó chỉ tạo ra năng lượng khi có nước di chuyển. Bao nhiêu nhà máy thủy điện có thể gặp nguy hiểm khi các hồ và sông cạn kiệt?

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Quyên góp tóc của bạn để giúp giữ nước sạch của chúng tôi

Tóc tỉa từ các tiệm và các khoản quyên góp cá nhân có thể được tái sử dụng như những tấm thảm thấm dầu và giúp bảo vệ môi trường.

BoJack Horseman vẫn gan ruột và gan dạ hơn bao giờ hết trong phần 3

BoJack Horseman vẫn gan ruột và gan dạ hơn bao giờ hết trong phần 3

BoJack Horseman (Ảnh: Netflix) BoJack Horseman bắt đầu mùa thứ ba với sự xuất hiện của nhân vật tiêu biểu, người vẫn đang theo đuổi những lời khen ngợi từ giới phê bình trong một nỗ lực tuyệt vọng để tìm ra ý nghĩa trong cuộc sống của mình. Mùa thứ hai về số phận bi kịch của Raphael Bob-Waksberg dày đặc những trò đùa cũng như tuyệt vọng.

Xem cách tính năng lái tự động cập nhật của Tesla bùng phát như thế nào khi bạn bỏ qua các cảnh báo của nó

Xem cách tính năng lái tự động cập nhật của Tesla bùng phát như thế nào khi bạn bỏ qua các cảnh báo của nó

Bản nâng cấp Phiên bản 8.0 gần đây của Tesla đối với hệ thống Lái xe tự động được thiết kế để cải thiện hệ thống và mối quan hệ của nó với người lái.

UnREAL, Chương trình Truyền hình Về Truyền hình Thực tế Chúng tôi Không biết Chúng tôi Cần

UnREAL, Chương trình Truyền hình Về Truyền hình Thực tế Chúng tôi Không biết Chúng tôi Cần

Chắc chắn khi con cái chúng ta xem lại các chương trình chúng ta đã xem vào khoảng năm 2015, chúng sẽ thấy UnREAL, một chương trình truyền hình mới chiếu vào tối Thứ Hai của Lifetime — bạn sẽ thấy đúng lúc, sẽ phát sóng ngay sau khi The Bachelor kết thúc — như một chương trình không thể được thực hiện vào bất kỳ thời điểm nào khác trong lịch sử truyền hình, nhưng một chương trình cảm thấy cần thiết để xem bây giờ. UnREAL có sự tham gia của Shiri Appleby trong vai Rachel, một nhà sản xuất truyền hình cho một chương trình về cơ bản là The Bachelor, mặc dù trong thế giới này, nó được gọi là Vĩnh viễn.

Sau tất cả, Josh Trank sẽ không đạo diễn bộ phim tuyển tập Star Wars thứ hai

Sau tất cả, Josh Trank sẽ không đạo diễn bộ phim tuyển tập Star Wars thứ hai

Thông báo chính thức đến trực tiếp từ trang web của Star Wars: Fantastic Four, đạo diễn Josh Trank, một người bí ẩn không xuất hiện tại đại hội Star Wars Celebration gần đây, sẽ không chỉ đạo phần hai Star Wars Anthology. Đây là tuyên bố được đăng ngày hôm qua: Tất cả thực sự là ngôn ngữ rất lịch sự, nhưng một bài báo của Hollywood Reporter cho thấy tất cả đều không tốt ở hậu trường, gọi sự ra đi là "một vụ sa thải" một phần dựa trên "hành vi bất thường" của Trank trong khi quay Fantastic Four: The Bài báo trích dẫn các nguồn gọi là Trank “đôi khi thiếu quyết đoán và thiếu sáng tạo,” và lưu ý rằng Fantastic Four, khởi chiếu vào ngày 7 tháng 8, đã được khởi động lại vào cuối tháng 4.

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

Edwin McCain ra mắt Grand Ole Opry: Quay cảnh hậu trường với nhạc sĩ 'I'll Be'

McCain, người đang làm việc cho một album mới, lần đầu tiên bước vào vòng kết nối vào tối thứ Sáu ở Nashville

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Forced to Borrow Paris' 'I Love Paris' Sweatshirt After 'Airline Loses All [My] Luggage'

Nicky Hilton Rothschild's luggage got lost, but luckily she has an incredible closet to shop: Sister Paris Hilton's!

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa

Kate Middleton dành một ngày bên bờ nước ở London, cùng với Jennifer Lopez, Julianne Hough và hơn thế nữa. Từ Hollywood đến New York và mọi nơi ở giữa, hãy xem các ngôi sao yêu thích của bạn đang làm gì!

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

17 tuổi bị đâm chết trong khi 4 người khác bị thương trong một cuộc tấn công bằng dao trên sông Wisconsin

Các nhà điều tra đang xem xét liệu nhóm và nghi phạm có biết nhau trước vụ tấn công hay không

Tôi viết như thế nào

Tôi viết như thế nào

Đối với tôi, mọi thứ là về dòng đầu tiên đó và nó sẽ đưa bạn đến đâu. Một số nhà văn bị điều khiển bởi cốt truyện, sự sắp xếp tinh tế của các quân cờ, trong khi những người khác bị lôi cuốn bởi một nhân vật và khả năng thực hiện một cuộc hành trình với một người bạn hư cấu mới.

Đường băng hạ cánh

Đường băng hạ cánh

Cuối hè đầu thu là mùa hoài niệm. Những chiếc đèn đường chiếu ánh sáng của chúng qua những con đường đẫm mưa, và những chiếc lá dưới chân - màu đỏ cam tắt trong bóng chạng vạng - là lời nhắc nhở về những ngày đã qua.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Hãy tưởng tượng tạo ra một chiến lược nội dung thực sự CHUYỂN ĐỔI. Nó có thể.

Vào năm 2021, tôi khuyến khích bạn suy nghĩ lại mọi thứ bạn biết về khách hàng mà bạn phục vụ và những câu chuyện bạn kể cho họ. Lùi lại.

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Sự mất mát của voi ma mút đã mở ra trái tim tôi để yêu

Vào ngày sinh nhật thứ 9 của Felix The Cat, tôi nhớ về một trong những mất mát lớn nhất trong cuộc đời trưởng thành của tôi - Sophie của tôi vào năm 2013. Tôi đã viết bài luận này và chia sẻ nó trên nền tảng này một thời gian ngắn vào năm 2013.

Language