react学习历程11——实战之登录组件（受控/非受控以及方法抽取）

通过一段时间的学习，已经掌握了react三大核心属性：props、state、refs，总结一下

1. refs能少用就少用，当然就目前知识量而言，只是知道自己操作自己的时候可以使用event.target代替ref来获取标签（少用的原因是官网说的，至于具体原因不想深究）
2. props，函数式组件拥有props但没有state，如果是静态组件，为了方便可以使用，但一般情况下，直接写类式组件，其实也不是很麻烦
3. state，不能直接赋值不能直接赋值不能直接赋值，重要的事说三遍，只能通过setState方法来实现更改状态，react是监控state的，如果state发生变更，就会调用render返回虚拟DOM，然后重新渲染页面

非受控组件

class LoginDemo extends React.Component {

    handleSubmit = (event) => {
        event.preventDefault();
        const {username, password} = this;
        alert(`你输入的用户名：${username.value}，你输入的密码：${password.value}`);
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                用户名：<input ref={c => this.username = c} type="text"/>
                密码：<input ref={c => this.password = c} type="password"/>
                <button>登录</button>
            </form>
        )
    }
}

哀叹一句，基础薄弱，写啥都有坑呀，总结几个上面这个的注意点吧

• python中最新语法字符串中写变量是f"你输入的用户名：{username}，你输入的密码：{password}"，JS中使用的``，变量使用的是${}
• react所有事件都有一个默认入参event，自带的prevrntDefault函数是阻止提交时间的
• ref拿到的真实的DOM标签，username和password拿到的都是input标签，所以需要拿到value这个里面的值
• this关键字，切勿写成self（python出身，写上面代码时就犯了这个错误，排查了好久）

这里引入一个新的概念，非受控组件，百度过，也是佩服，网上说的乱七八糟，在说啥onchange，不知所云。其实非受控组件，很好理解，就是自用自取，内封闭，就像这个登录组件，它的所有动作都是在form表单中完成的，并没有往外传任何东西，这就叫非受控组件。区别于受控组件，react来说，就是向外面传出了state。

受控组件

class LoginDemo extends React.Component {

    state = {
        username: '',
        password: ''
    }

    saveUsername = (event) => {
        this.setState({username: event.target.value});
    }

    savePassword = (event) => {
        this.setState({password: event.target.value});
    }

    handleSubmit = (event) => {
        event.preventDefault();
        alert(`你输入的用户名：${this.state.username}，你输入的密码：${this.state.password}`);
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                用户名：<input onChange={this.saveUsername} type="text"/>
                密码：<input onChange={this.savePassword} type="password"/>
                <button>登录</button>
            </form>
        )
    }
}

上面刚刚说别人说onchange，我也要说说onchange，哈哈

但说真的，受控组件和非受控组件区别的重点并非什么onchange，重点是有没有往外吐state状态，只不过onchange是最好用的事件罢了，想想了，如果使用onblur是不是同样也能实现目的呢？！所以，重点不在于什么onchange，而在于state，onchange不过是途径罢了

抽取公用方法

class LoginDemo extends React.Component {

    state = {
        username: '',
        password: ''
    }

    saveFormData = (dataType) => {
        return ((event) => {
            this.setState({[dataType]: event.target.value})
        })
    }

    handleSubmit = (event) => {
        event.preventDefault();
        alert(`你输入的用户名：${this.state.username}，你输入的密码：${this.state.password}`);
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                用户名：<input onChange={this.saveFormData('username')} type="text"/>
                密码：<input onChange={this.saveFormData('password')} type="password"/>
                <button>登录</button>
            </form>
        )
    }
}

这其实有一个高大上的名称，叫高阶函数，高阶函数就是返回函数或者入参为函数的方法。

其实还有一个概念，柯里化，戏称为俄罗斯套娃，其实就是函数不停的返回函数，就是不去执行，如果这样你嵌套的多了，性能就直接崩了，所以能不用尽量不用。

不使用柯里化

class LoginDemo extends React.Component {

    state = {
        username: '',
        password: ''
    }

    saveFormData = (dataType, event) => {
        this.setState({[dataType]: event.target.value})
    }

    handleSubmit = (event) => {
        event.preventDefault();
        alert(`你输入的用户名：${this.state.username}，你输入的密码：${this.state.password}`);
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                用户名：<input onChange={(event)=>this.saveFormData("username",event)} type="text"/>
                密码：<input onChange={(event)=>this.saveFormData("password",event)} type="password"/>
                <button>登录</button>
            </form>
        )
    }
}

注意的一个小知识点

javascript中object的key其实都是字符串，但写的时候并不需要使用引号，例如state中拥有两个key，username和password，真的较真的话，其实是"username"和"password"，但javascript省略掉了引号，是必须省略，不是可省可不省，切记切记。然后重点来了，object中的key如果想使用变量怎么整？[dataType]就是使用的变量。object[key]和object.key的区别就在于此

另外，object可以直接使用变量（我刚看到这个也是oh my god!!!）什么意思呢？举一个小例子

let myVar="smallfish";
const myObject={myVar};
console.log(myObject);

myObject是这样的，{myVar:"smallfish"}，神奇。。。