React-可控控件和不可控控件

概要

前言

• 不可控组件

• 可控组件

• 可控组件的好处

源码

1. 不可控组件 使用的是 defaultValue 属性 ``` //不可控组件 defaultValue var HelloMassage = React.createClass({ //设置默认状态 getInitialState: function() {

    return {
        data: this.props.data
    }

   }, //组件被渲染之后 componentDidMount: function() {

    var me = this;
    setTimeout(function() {
        // 修改属性值  
        //这个因为下面使用的是 defaultValue 所以这个是不会生效的，只能通过下面的赋值的写死的方法来改变，这个就是不可控组件
        me.setState({
            data: 123
        });
        console.log("我已渲染完毕");
    }, 1000);
    ReactDOM.findDOMNode(this.refs.uname).value = "123";

   }, render: function() {

    return <input ref="uname" defaultValue={this.state.data} type="text"/>

   }, }); ReactDOM.render( , document.getElementById(“example”) )

- 浏览器效果图
> ![image.png](http://upload-images.jianshu.io/upload_images/9064013-6f5f6507fdf880d6.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2. 可控组件  使用的是 `value` 和 `onChange` 属性

//可控组件 value 和 onChange 属性 var HelloMassage = React.createClass({ //设置默认状态 getInitialState: function() { return { data: this.props.data } }, //组件被渲染之后 componentDidMount: function() { var me = this; setTimeout(function() { // 修改属性值
//这个因为下面使用的是 defaultValue 所以这个是不会生效的，只能通过下面的赋值的写死的方法来改变，这个就是不可控组件 me.setState({ data: 123 }); console.log(“我已渲染完毕”); }, 1000); // ReactDOM.findDOMNode(this.refs.uname).value = “123”; }, //自定义的方法可以在里面什么都不写的，不写的话 下面的 input 的值就不可编辑了，所以还是需要在下面补全方法的 onchange: function(e) { var me = this; me.setState({ data: e.target.value }); }, render: function() { return }, }); ReactDOM.render( , document.getElementById(“example”) );

```

总结：

React 的数据流是通过 state 状态来进行驱动的