getInitialState 里的 Props 是一个反模式
优质
小牛编辑
111浏览
2023-12-01
注意:
这实际上不是一篇单独的 React 提示,因为类似的反模式设计也经常会在平时的编码中出现;这里,React 只是简单清晰地指出来这个问题
使用 props, 自父级向下级传递,在使用 getInitialState
生成 state 的时候,经常会导致重复的"来源信任",i.e. 如果有可能,请尽量在使用的时候计算值,以此来确保不会出现同步延迟的问题和状态保持的问题。
糟糕的例子
var MessageBox = React.createClass({
getInitialState: function() {
return {nameWithQualifier: 'Mr. ' + this.props.name};
},
render: function() {
return <div>{this.state.nameWithQualifier}</div>;
}
});
React.render(<MessageBox name="Rogers"/>, mountNode);
Better:
更好的写法:
var MessageBox = React.createClass({
render: function() {
return <div>{'Mr. ' + this.props.name}</div>;
}
});
React.render(<MessageBox name="Rogers"/>, mountNode);
(For more complex logic, simply isolate the computation in a method.)
(对于更复杂的逻辑,最好通过方法将数据处理分离开来)
然而,如果你理清了这些,那么它也就 不是 反模式了。两者兼得不是我们的目标:
var Counter = React.createClass({
getInitialState: function() {
// naming it initialX clearly indicates that the only purpose
// of the passed down prop is to initialize something internally
return {count: this.props.initialCount};
},
handleClick: function() {
this.setState({count: this.state.count + 1});
},
render: function() {
return <div onClick={this.handleClick}>{this.state.count}</div>;
}
});
React.render(<Counter initialCount={7}/>, mountNode);