我看到这两种用法可以互换。
两者的主要用例是什么?有什么优点/缺点吗?一种做法更好吗?
我看到这两种用法可以互换。
两者的主要用例是什么?有什么优点/缺点吗?一种做法更好吗?
当前回答
这两种方法是不可互换的。当使用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 */ };
},
});
其他回答
如果有人还在寻找答案,那么这个链接将是有帮助的 链接
React中的构造函数和getInitialState都用于 初始化状态,但它们不能互换使用。 我们在React中使用getInitialState。使用createClass和constructor 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之间主要的根本区别在于新的 类关键字。类型的定义并不方便 React组件作为类,然而ES确实提供了方便 将react组件定义为类。 更简单的是getInitialState是ES5友好的方法 定义React组件的初始状态。我们使用getInitialState 与反应。React使用createClass和constructor。组件
例子:
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>;
}
}
如果有人还在寻找答案,请阅读这篇文章。 链接
这两种方法是不可互换的。当使用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 */ };
},
});
构造函数和getInitialState之间的区别是ES6和ES5本身的区别。 getInitialState与React一起使用。createClass和 构造函数与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之间有一些区别。createClass和React.Component。例如,在这些情况下是如何处理的。在这篇博文和facebook关于自动绑定的内容中阅读更多关于这些差异的内容
构造函数也可用于处理此类情况。要将方法绑定到组件实例,可以在构造函数中对其进行预绑定。这是做这么酷的东西的好材料。
还有一些关于最佳实践的好材料 React.js中组件状态的最佳实践 将React项目从ES5转换为ES6
更新日期:2019年4月9日:
随着Javascript类API的新变化,您不需要构造函数了。
你可以这样做
class TodoApp extends React.Component {
this.state = {items: []}
};
这仍然会被转译为构造函数格式,但您不必担心。您可以使用这种更具可读性的格式。
React挂钩
从React 16.8版本开始,有一个新的API叫做hooks。
现在,您甚至不需要类组件来拥有状态。它甚至可以在功能组件中完成。
import React, { useState } from 'react';
function TodoApp () {
const items = useState([]);
注意,初始状态作为参数传递给useState;useState ([])
阅读更多关于react钩子的官方文档
最大的区别是从它们的来源开始,构造函数是JavaScript中类的构造函数,另一方面,getInitialState是React生命周期的一部分。
构造函数是你的类初始化的地方…
构造函数 构造函数方法是用于创建和的特殊方法 初始化用类创建的对象。只能有一个 类中名称为“构造函数”的特殊方法。一个SyntaxError 类中包含多个 构造函数方法。 类的构造函数可以使用super关键字调用 父类。
在React v16文档中,他们没有提到任何首选项,但如果你使用createReactClass(),你需要getInitialState…
初始状态设置 在ES6类中,你可以通过赋值来定义初始状态 这一点。构造函数中的状态:
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组件的一些生命周期:
现在我们不需要在组件内部调用构造函数——我们可以直接调用state={something:""},否则之前我们必须先用super()声明构造函数来继承React中的所有东西。组件类 然后在构造函数中初始化状态。
如果使用React。createClass然后用getInitialState方法定义初始化状态。