React教程之Props反模式——Anti-Pattern
在传递Props这篇文章中我们了解到了React之Props概念以及是如何使用的。本篇我们来介绍在getInitialState中用Props来产生state的这种用法。这种使用方法被称之为反模式——Anti-Pattern。
之所以称其为反模式是因为在getInitialState中使用Props生成state会导致重复“来源信任”问题。并且还犹豫getInitialState函数只是在组件被第一次渲染时调用。也就是说当该组件第二次再使用render渲染的时候，getInitialState函数不会再被调用。也就是说如果我们想通过第二次渲染改变Props的值从而改变State的值是不可能的。
下面我们来看一段代码：
var MessageBox = React.createClass({
getInitialState: function() {
return {name: 'Mr. ' + this.props.name};
},
render: function() {
return <div>{'Mr. '+this.state.name}</div>;
}
});
ReactDOM.render(
<MessageBox name="Rogers" />,
document.getElementById('content')
);
对于上面的例子，可以说就是一种反模式的运用。如果我们想再次渲染组件MessageBox改变Props的name值。我们会发现div中的内容不变的，依然是 Mr. Rogers而不是Mr. Onmpw。
ReactDOM.render(
<MessageBox name="Rogers" />,
document.getElementById('content')
);
ReactDOM.render(
<MessageBox name="Onmpw" />,
document.getElementById('content')
);
所以说，对于上面的例子，div中直接使用this.props相对于this.state更好一些。
var MessageBox = React.createClass({
render: function() {
return <div>{'Mr. '+this.props.name}</div>;
}
});
ReactDOM.render(
<MessageBox name="Onmpw" />,
document.getElementById('content')
);
这个例子的结果就是在页面上输出 Mr. Onmpw。
ReactDOM.render(
<MessageBox name="Rogers" />,
document.getElementById('content')
);
如果我们再次渲染，那就会就会是Mr. Rogers。
上面介绍的情况就是Props在getInitialState中使用的反模式。当然，如果我们能明确Props的用途，在getInitialState中使用也不会产生反模式的情况。比如，初始化一个值，该Prop的值不会改变。
var Counter = React.createClass({
getInitialState: function() {
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>;
}
});
ReactDOM.render(
<Counter initialCount={7}/>,
document.getElementById('content')
);
上面的例子就避免了反模式的产生。上面的例子都是借用官方文档中的例子来修改说明的，希望本文对大家学习React有所帮助。
本文转载自：迹忆客（https://www.jiyik.com）
以上是 React教程之Props反模式——Anti-Pattern 的全部内容， 来源链接： utcz.com/z/290088.html
