reactjs 在React / React Native中使用构造函数与getInitialState有什么区别?

aiazj4mn  于 2022-12-26  发布在  React
关注(0)|答案(8)|浏览(120)

我见过两者交替使用。
两者的主要用例是什么?有优点/缺点吗?其中一个是更好的实践吗?

wlwcrazw

wlwcrazw1#

这两种方法是不可互换的,当使用ES6类时,应该在构造函数中初始化状态,当使用React.createClass时,应该定义getInitialState方法。
请参阅官方React文档中关于ES6类的主题。

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

相当于

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

yc0p9oo02#

constructorgetInitialState之间的差异就是ES6ES5本身之间的差异。
getInitialStateReact.createClass一起使用,并且
constructorReact.Component一起使用。
因此,问题归结为使用ES6ES5的优缺点。
让我们看看代码中的差异

    • 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 thread
React社区正在向ES6靠拢,也被认为是最佳实践。
React.createClassReact.Component之间有一些不同,例如,在这些情况下如何处理this,阅读更多关于in this blogpost和facebook关于自动绑定的内容
constructor也可以用来处理这种情况。要将方法绑定到组件示例,可以在constructor中预先绑定。This是做这种很酷的事情的好材料。
关于最佳做法的更多好材料
Best Practices for Component State in React.js
Converting React project from ES5 to 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([])
阅读更多about react hooks from the official docs

uhry853o

uhry853o3#

好的,最大的区别是从它们的来源开始,所以constructor是JavaScript中类的构造函数,另一方面,getInitialStateReactlifecycle的一部分。
constructor是类初始化的地方...

构造函数

构造函数方法是一种特殊方法,用于创建和初始化用类创建的对象。一个类中只能有一个名为“constructor”的特殊方法。如果该类包含多个构造函数方法,则会引发SyntaxError。
构造函数可以使用super关键字调用父类的构造函数。
在React v16文档中,他们没有提到任何首选项,但是如果您使用createReactClass(),则需要getInitialState ...

设置初始状态

在ES6类中,您可以通过在构造函数中分配以下.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};
  },
  // ...
});

访问此处了解更多信息。
还创建了下图,以显示React组件的几个生命周期:

vjhs03f7

vjhs03f74#

如果您使用ES6编写React-Native类,将遵循以下格式。它包括RN对进行网络调用的类的生命周期方法。

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

});
2hh7jdfx

2hh7jdfx5#

现在我们不需要在组件内部调用构造函数-我们可以直接调用state={something:""},否则之前我们必须先用super()声明构造函数,以继承React.Component类中的每一个东西,然后在构造函数内部初始化我们的状态。
如果使用React.createClass,则使用getInitialState方法定义初始化状态。

hgb9j2n6

hgb9j2n66#

最大的区别是从它们的来源开始,所以constructor是JavaScript中类的构造函数,另一方面,getInitialState是React生命周期的一部分。constructor方法是一个特殊的方法,用于创建和初始化用类创建的对象。

kyxcudwk

kyxcudwk7#

如果有人仍然在寻找答案,那么这个链接将是有帮助的Link
React中的构造函数和getInitialState都用于初始化状态,但它们不能互换使用。
我们将getInitialState与React.createClass一起使用,并将构造函数与React.Component一起使用。
构造函数是设置组件初始状态的理想位置,您需要直接分配初始状态,而不是在其他方法中使用setState()。

class Hello extends React.Component { 
   constructor(props) { 
   super(props); 
   this.setState({ 
  title: 'This is the first test' 
   }); 
}   
  render() { 
    return <div>{this.state.title} </div> 
  } 
}   
ReactDOM.render(<Hello />, document.getElementById('container'));

ES5和ES6之间的主要根本区别在于新的class关键字。ES5没有提供将React组件定义为类的便利,但ES提供了将react组件定义为类的便利。
更简单的是,getInitialState是ES5友好的方法,用于定义React组件的初始状态。我们将getInitialState与React.createClass一起使用,并将构造函数与React.Component一起使用
示例:

class Goodmorning extends React.Component { 
  render() { 
    return <span>Good Morning</span>; 
  } 
}
It would rely on helper module called create-react-class: 
var createGoodmorningReactClass = require('create-react-class'); 
var Goodmorning = createReactClass({ 
  render: function() { 
    return <span>Good Morning</span>; 
  } 
}); 
The object passed into create-react-class that is defined in initial stage by calling the getInitialState attribute: 
 var Goodmorning = createReactClass({ 
  getInitialState: function() { 
    return {name: this.props.name}; 
  }, 
  render: function() { 
    return <span>Good {this.state.name}</span>; 
  } 
}); 
In ES6 implementation: 
class Goodmorning extends React.Component { 
  constructor(props) { 
    super(props); 
    this.state = { 
      name: props.name 
    } 
  } 
  render() { 
    return <span>Good {this.state.name}</span>; 
  } 
}

如果有人还在寻找答案,也可以阅读这篇文章。Link

uxhixvfz

uxhixvfz8#

在构造函数中,我们应该总是初始化状态。

相关问题