- 核心区别：值与state是否对应。
- 可控组件的好处：
- 复合React数据流
- 数据在state中，修改跟使用更加方便，只需要对state进行修改，而不用对DOM操作
- 示例
class ConstrolInput extends React.Component {
constructor(props) {
super(props);
this.state = {value: "Hello world"};
this.handleSubmit = this.handleSubmit.bind(this);
this.handleChange = this.handleChange.bind(this);
}
handleSubmit(event) {
event.preventDefault();
alert(this.state.value);
}
handleChange(event) {
this.setSate({value: event.target.value});
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input defaultValue={this.state.value} onChange={this.handleChange} />
<button type="submit">Alert</button>
</form>
);
}
}
class UnconstrolInput extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
var input = this.refs.input;
alert(input.value);
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input defaultValue="Hello world" ref="input" />
<button type="submit">Alert</button>
</form>
);
}
}
- 不可控组件中间的数据的状态是未知的，只有在需要打印数据的时候才从DOM节点获取。而可控组件的数据变换会更新到state，也就是说状态的变换是一直保持同步的。
- 相对来说可控组件更值得推荐使用，虽然代码量上比不可控组件多些。
