我见过两者交替使用。两者的主要用例是什么?有优点/缺点吗?其中一个是更好的实践吗?
wlwcrazw1#
这两种方法是不可互换的,当使用ES6类时,应该在构造函数中初始化状态,当使用React.createClass时,应该定义getInitialState方法。请参阅官方React文档中关于ES6类的主题。
React.createClass
getInitialState
class MyComponent extends React.Component { constructor(props) { super(props); this.state = { /* initial state */ }; } }
相当于
var MyComponent = React.createClass({ getInitialState() { return { /* initial state */ }; }, });
yc0p9oo02#
constructor和getInitialState之间的差异就是ES6和ES5本身之间的差异。getInitialState与React.createClass一起使用,并且constructor与React.Component一起使用。因此,问题归结为使用ES6或ES5的优缺点。让我们看看代码中的差异
constructor
React.Component
var TodoApp = React.createClass({ propTypes: { title: PropTypes.string.isRequired }, getInitialState () { return { items: [] }; } });
class TodoApp extends React.Component { constructor () { super() this.state = { items: [] } } };
关于这一点,有一个有趣的reddit thread。React社区正在向ES6靠拢,也被认为是最佳实践。React.createClass和React.Component之间有一些不同,例如,在这些情况下如何处理this,阅读更多关于in this blogpost和facebook关于自动绑定的内容constructor也可以用来处理这种情况。要将方法绑定到组件示例,可以在constructor中预先绑定。This是做这种很酷的事情的好材料。关于最佳做法的更多好材料Best Practices for Component State in React.jsConverting React project from ES5 to ES6
this
随着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
useState
useState([])
uhry853o3#
好的,最大的区别是从它们的来源开始,所以constructor是JavaScript中类的构造函数,另一方面,getInitialState是React的lifecycle的一部分。constructor是类初始化的地方...
React
lifecycle
构造函数
构造函数方法是一种特殊方法,用于创建和初始化用类创建的对象。一个类中只能有一个名为“constructor”的特殊方法。如果该类包含多个构造函数方法,则会引发SyntaxError。构造函数可以使用super关键字调用父类的构造函数。在React v16文档中,他们没有提到任何首选项,但是如果您使用createReactClass(),则需要getInitialState ...
createReactClass()
设置初始状态
在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组件的几个生命周期:
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({ });
2hh7jdfx5#
现在我们不需要在组件内部调用构造函数-我们可以直接调用state={something:""},否则之前我们必须先用super()声明构造函数,以继承React.Component类中的每一个东西,然后在构造函数内部初始化我们的状态。如果使用React.createClass,则使用getInitialState方法定义初始化状态。
state={something:""}
super()
hgb9j2n66#
最大的区别是从它们的来源开始,所以constructor是JavaScript中类的构造函数,另一方面,getInitialState是React生命周期的一部分。constructor方法是一个特殊的方法,用于创建和初始化用类创建的对象。
kyxcudwk7#
如果有人仍然在寻找答案,那么这个链接将是有帮助的LinkReact中的构造函数和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
uxhixvfz8#
在构造函数中,我们应该总是初始化状态。
8条答案
按热度按时间wlwcrazw1#
这两种方法是不可互换的,当使用ES6类时,应该在构造函数中初始化状态,当使用
React.createClass
时,应该定义getInitialState
方法。请参阅官方React文档中关于ES6类的主题。
相当于
yc0p9oo02#
constructor
和getInitialState
之间的差异就是ES6和ES5本身之间的差异。getInitialState
与React.createClass
一起使用,并且constructor
与React.Component
一起使用。因此,问题归结为使用ES6或ES5的优缺点。
让我们看看代码中的差异
关于这一点,有一个有趣的reddit thread。
React社区正在向ES6靠拢,也被认为是最佳实践。
React.createClass
和React.Component
之间有一些不同,例如,在这些情况下如何处理this
,阅读更多关于in this blogpost和facebook关于自动绑定的内容constructor
也可以用来处理这种情况。要将方法绑定到组件示例,可以在constructor
中预先绑定。This是做这种很酷的事情的好材料。关于最佳做法的更多好材料
Best Practices for Component State in React.js
Converting React project from ES5 to ES6
随着Javascript类API的新变化,您不再需要构造函数。
你可以
这仍然会被转换成构造函数格式,但你不必担心它。你可以使用这种更可读的格式。
带React挂钩
从React版本16.8开始,有一个新的API叫做钩子.
现在,你甚至不需要一个类组件来拥有一个状态,它甚至可以在一个函数组件中完成。
注意,初始状态作为参数传递给
useState
;useState([])
阅读更多about react hooks from the official docs
uhry853o3#
好的,最大的区别是从它们的来源开始,所以
constructor
是JavaScript中类的构造函数,另一方面,getInitialState
是React
的lifecycle
的一部分。constructor
是类初始化的地方...构造函数
构造函数方法是一种特殊方法,用于创建和初始化用类创建的对象。一个类中只能有一个名为“constructor”的特殊方法。如果该类包含多个构造函数方法,则会引发SyntaxError。
构造函数可以使用super关键字调用父类的构造函数。
在React v16文档中,他们没有提到任何首选项,但是如果您使用
createReactClass()
,则需要getInitialState
...设置初始状态
在ES6类中,您可以通过在构造函数中分配以下.state来定义初始状态:
对于createReactClass(),您必须提供一个单独的getInitialState方法来返回初始状态:
访问此处了解更多信息。
还创建了下图,以显示React组件的几个生命周期:
vjhs03f74#
如果您使用ES6编写React-Native类,将遵循以下格式。它包括RN对进行网络调用的类的生命周期方法。
2hh7jdfx5#
现在我们不需要在组件内部调用构造函数-我们可以直接调用
state={something:""}
,否则之前我们必须先用super()
声明构造函数,以继承React.Component
类中的每一个东西,然后在构造函数内部初始化我们的状态。如果使用
React.createClass
,则使用getInitialState
方法定义初始化状态。hgb9j2n66#
最大的区别是从它们的来源开始,所以constructor是JavaScript中类的构造函数,另一方面,getInitialState是React生命周期的一部分。constructor方法是一个特殊的方法,用于创建和初始化用类创建的对象。
kyxcudwk7#
如果有人仍然在寻找答案,那么这个链接将是有帮助的Link
React中的构造函数和getInitialState都用于初始化状态,但它们不能互换使用。
我们将getInitialState与React.createClass一起使用,并将构造函数与React.Component一起使用。
构造函数是设置组件初始状态的理想位置,您需要直接分配初始状态,而不是在其他方法中使用setState()。
ES5和ES6之间的主要根本区别在于新的class关键字。ES5没有提供将React组件定义为类的便利,但ES提供了将react组件定义为类的便利。
更简单的是,getInitialState是ES5友好的方法,用于定义React组件的初始状态。我们将getInitialState与React.createClass一起使用,并将构造函数与React.Component一起使用
示例:
如果有人还在寻找答案,也可以阅读这篇文章。Link
uxhixvfz8#
在构造函数中,我们应该总是初始化状态。