我有一个应该在不同的视图中使用的 React 组件。这个组件是具有很长选项列表的 Select 元素,我通过 ajax 调用从 db 加载此列表。对于所有视图,使用相同的选项列表选择。我的问题是我不明白如何强制此 Select 仅加载此列表一次,并将其重用于其他渲染。现在看起来有点像这样(很简单,显然(:
var SelectField = React.createClass({
loadListFromServer: function () {...}
getInitialState()
{
return {
options: [],
};
},
componentDidMount() {
this.setState({
options: this.loadListFromServer()
});
},
render: function () {
return (
<div>
<Select options={this.state.options} />
</div>
);
}
})
;
var Index = React.createClass({
render: function () {
return (
<SelectField />
);
}
});
var Content = React.createClass({
render: function () {
return (
<SelectField />
);
}
});
ReactDOM.render(
<Router history={createBrowserHistory()}>
<Route path="/" component={Index}/>
<Route path="path" component={Content}/>
</Router>,
document.getElementById("container")
)
我试图做的是:使options
和loadListFromServer()
全球化,并从window.init
中调用loadListFromServer()
。然后Index
渲染空options
,因为它在一切都已经挂载时被填充。那么实现它的一般方法是什么?谢谢,如果我的问题很愚蠢,我很抱歉 - 我刚刚开始这个话题。
当你说你只想加载一次<Select>
组件时,我假设你的意思是你只想加载一次它的数据。
您可以尝试将组件与操作分开的通量架构。
示例中问题的根源似乎是<Select>
组件与其呈现的状态(选项列表(之间的紧密耦合。每次使用该组件时,它都必须创建其状态或重用来自不同<Select>
实例的状态。但在后一种情况下,我们需要在某个地方存储组件的不同实例之间的状态。
你研究过 redux 吗?它将状态与组件分离。