赵走x博客 - 开发者的网上家园

11、中途改变属性

资源编号:76059 书籍 React快速上手开发热度：83

正如你已经知道的，属性是配置组件的一种方式。因此在组件创建完成后，从外部改变组件的属性也是合理的。但你的组件应当作好应对这种场景的准备。

如果你回去看看之前例子中的render() 方法，会发现我们在该方法中只用到了this.state：
```
render: function() {
	return React.DOM.div(null,
		React.DOM.textarea({
			value: this.state.text,
			onChange: this._textChange,
		}),
		React.DOM.h3(null, this.state.text.length)
		);
}
```
如果你从外部改变了组件属性，不会对渲染产生影响。换句话说，当你进行如下操作时，文本框中的内容不会发生变化：
```
myTextAreaCounter = ReactDOM.render(
		React.createElement(TextAreaCounter, {
			defaultValue: "Hello", // 之前的值为字符串"Bob"
		}),
document.getElementById("app")
);
```
尽管myTextAreaCounter 会在ReactDOM.render() 重新调用时被覆盖，但是应用的原有状态依然会保留。React 会在应用改变前后作出协调（reconciliation），且不会消除之前的数据。相反，React 仅作出最小限度的修改。

现在this.props 的内容发生了变化（但界面没有变化）：
```
myTextAreaCounter.props; // 对象{defaultValue="Hello"}
```

设置state 确实会更新界面：
```
// 反例
myTextAreaCounter.setState({text: 'Hello'});
```
但这种做法是不好的，因为这在更复杂的组件中可能会导致不一致的状态；
比如打乱内部计数器、布尔型标记、事件监听器等。

如果你希望优雅地处理外部入侵（即属性改变），可以通过componentWillReceiveProps()方法实现：
```
componentWillReceiveProps: function(newProps) {
		this.setState({
			text: newProps.defaultValue,
		});
},
```
如你所见，这个方法会接收新属性对象，让你可以根据新属性设置state。此外，还可以进
行其他工作以确保组件状态保持正常。