在以下示例中,当Item 2
单击时,Second 1
将显示而不是Second 2
。为什么?您将如何解决?
var guid = 0;
class Content extends React.Component {
constructor() {
guid += 1;
this.id = guid;
console.log('ctor', this.id); // called only once with 1
}
render() {
return (
<div className="content">
{this.props.title} - {this.id}
</div>
);
}
}
class MyApp extends React.Component {
constructor() {
this.items = ['Item 1', 'Item 2'];
this.state = {
activeItem: this.items[0]
};
}
onItemClick(item) {
this.setState({
activeItem: item
});
}
renderMenu() {
return (
<div className="menu">
<div onClick={this.onItemClick.bind(this, 'Item 1')}>Item 1</div>
<div onClick={this.onItemClick.bind(this, 'Item 2')}>Item 2</div>
</div>
);
}
renderContent() {
if (this.state.activeItem === 'Item 1') {
return (
<Content title="First" />
);
} else {
return (
<Content title="Second" />
);
}
}
render() {
return (
<div>
{this.renderMenu()}
{this.renderContent()}
</div>
);
}
}
React的对帐算法假定没有相反的信息,如果自定义组件出现在后续渲染的同一位置,则它与以前的组件相同,因此将重用前一个实例,而不是创建一个新实例。
如果要实现componentWillReceiveProps(nextProps)
,则会看到被调用。
不同的节点类型
<Header>
元素不太可能生成看起来像a<Content>
会生成的DOM 。无需花费时间尝试匹配这两种结构,React只是从头开始重建树。作为推论,如果
<Header>
在两个连续渲染中的同一位置有一个元素,那么您会期望看到非常相似的结构,因此值得探索。[定制组件](http://facebook.github.io/react/docs/reconciliation.html#custom-
components)
我们确定两个自定义组件相同。由于组件是有状态的,因此我们不能仅使用新组件并每天调用它。React从新组件获取所有属性,并调用
component[Will/Did]ReceiveProps()
前一个组件。先前的组件现在可以运行了。
render()
调用其方法,并且diff算法以新结果和先前结果重新启动。
如果为每个组件提供一个唯一的key
支持,React可以使用key
更改来推断该组件实际上已经被替换,并将从头开始创建一个新组件,从而为其提供完整的组件生命周期。
renderContent() {
if (this.state.activeItem === 'Item 1') {
return (
<Content title="First" key="first" />
);
} else {
return (
<Content title="Second" key="second" />
);
}
}
本文向大家介绍React组件的构造函数有什么作用?相关面试题,主要包含被问及React组件的构造函数有什么作用?时的应答技巧和注意事项,需要的朋友参考一下 在react的新的写法中,每一个组件都是一个类,这个很符合es6的语法规范,在es6中要想创建一个对象,就要调用相应的构造函数, react的组件渲染有两种情况,第一种情况是第一次渲染,第二种情况是状态更新时候重新渲染,构造函数在组件的初次渲染
正如我的类名所暗示的那样:如果我的类是迭代器的实例,我想测试一下。因此,我想知道,如果它只需要实现接口就可以这样做,似乎就足够了。 然而,当我通过JUNIT Test运行以下类时,我得到了以下控制台输出: 似乎类构造函数被调用了两次!但是我不知道第二次调用来自哪里。我已经测试了“if”参数的变体以排除有故障,例如 然而,它在所有3种情况下都被调用了。因此,我假设Unit Test首先尝试,需要为自
我的react组件的构造函数被调用了两次,但我不知道为什么。我正在使用react redux存储我的应用程序的语言。我有一个基于浏览器语言设置默认语言的函数。LoginPage是第一个获得render的组件,因此我在其构造函数中调用了我的函数。基本上,它所做的就是比较并分派一个动作。当我用redux开发工具检查我的状态时,我看到它被调度了两次。我在构造函数中打印了虚拟数据,它也打印了两次。 登录页
我总是得到与此类似的结果。为什么第一个电话比其他电话要花10倍的时间?
我是新的反应,我试图用它开发一个简单的网络应用程序,但我得到了一个错误。当我加载一个类组件时,我的构造函数被调用两次,你能帮忙吗? 原木地被击中两次。在一些组件中,我希望进行一个命中DB的API调用,但我只想命中它一次。在许多情况下,使用并不方便,因为道具只出现在之后,因此我想在中调用(我不会使用setState,这会导致重新加载render)。 提前感谢
问题内容: 我有一个想法,可能是因为我正在做一些样式设计来更改单选按钮,但是我不确定。我正在设置一个onClick事件,该事件两次调用了我的函数。我已删除它以确保它没有在其他地方被触发,并且onClick似乎是罪魁祸首。 我的功能目前仅是运输选项的简单控制台日志: 如果没有任何理由可以在这里看到为什么会发生这种情况,我可以发布其余代码,但是有很多方面,我认为这与之无关,但是我认为这是一个很好的起点