React学习笔记【5】（受控与非受控组件 高阶函数及函数柯里化）

学习地址：https://www.bilibili.com/video/BV1wy4y1D7JT
官方文档：

• 英文：https://react.dev/
• 中文：https://react.docschina.org/

非受控组件与受控组件

1. 非受控组件
   现用现取（ref使用过多）

<script type="text/babel">
    class LogIn extends React.Component {
        // 提交事件
        handleSubmit = (event) => {
            event.preventDefault(); //阻止默认事件 阻止表单提交
            let { username, password } = this;
            alert(`您输入的用户名是：${username.value},您输入的密码是：${password.value}`);
        }
        render() {
            return (
                <div>
                    <form action="" onSubmit={this.handleSubmit}>
                        <label>用户名：</label>
                        <input type="text" placeholder="请输入用户名" ref={c => this.username = c} name="username" />  &nbsp;
                        <label>密码：</label>
                        <input type="password" placeholder="请输入密码" ref={c => this.password = c} name="password" />  &nbsp;
                        <button>登录</button>
                    </form>
                </div>
            )
        }
    };
    ReactDOM.render(<LogIn />, document.getElementById('test'));
</script>

2. 受控组件
   页面中所有输入类的DOM，随着输入维护到state中，使用时直接从状态中去取。（ref使用较少）

<script type="text/babel">
    class LogIn extends React.Component {
        // 初始化数据
        state={
            username:'',
            password:''
        }
        // 赋值state.username
        changeUsername=(event)=>{
            this.setState({username:event.target.value});
        }
        // 赋值state.password
        changePassword=(event)=>{
            this.setState({password:event.target.value})
        }
        // 提交事件
        handleSubmit = (event) => {
            event.preventDefault();//阻止默认事件 阻止表单提交
            let { username, password } = this;
            alert(`您输入的用户名是：${this.state.username},您输入的密码是：${this.state.password}`);
        }
        render() {
            return (
                <div>
                    <form action="" onSubmit={this.handleSubmit}>
                        <label>用户名：</label>
                        <input type="text" placeholder="请输入用户名" onChange={this.changeUsername} name="username" />  &nbsp;
                        <label>密码：</label>
                        <input type="password" placeholder="请输入密码" onChange={this.changePassword} name="password" />  &nbsp;
                        <button>登录</button>
                    </form>
                </div>
             )
       }
    };
    ReactDOM.render(<LogIn />, document.getElementById('test'));
</script>

高阶函数：如果一个函数符合下面两个规范中的任何一个，那么该函数就是高阶函数

1. 若A函数接收到的参数是一个函数，那么A函数就可以称之为高阶函数。
2. 若A函数调用的返回值仍是一个函数，那么A就可以称之为高阶函数。

函数的柯里化：通过函数调用继续返回函数的方式，实现多次接受参数最后统一处理的函数编码形式。

<script type="text/babel">
    class LogIn extends React.Component {
        // 初始化数据
        state={
            username:'',
            password:''
        }
        // 表单赋值
        changeForm=(dataType)=>{
            return (event)=>{
                this.setState({[dataType]:event.target.value});
            }
        };
        // 提交事件
        handleSubmit = (event) => {
            event.preventDefault();//阻止默认事件 阻止表单提交
            let { username, password } = this;
            alert(`您输入的用户名是：${this.state.username},您输入的密码是：${this.state.password}`);
        }
        render() {
            return (
                <div>
                    <form action="" onSubmit={this.handleSubmit}>
                        <label>用户名：</label>
                        <input type="text" placeholder="请输入用户名" onChange={this.changeForm('username')} name="username" />
                        <label>密码：</label>
                        <input type="password" placeholder="请输入密码" onChange={this.changeForm('password')} name="password" />
                        <button>登录</button>
                    </form>
                 </div>
            )
        }
    };
    ReactDOM.render(<LogIn />, document.getElementById('test'));
</script>

不用函数柯里化的写法

<script type="text/babel">
    class LogIn extends React.Component {
        // 初始化数据
        state = {
            username: '',
            pasword: ''
        }
        // 表单赋值
        changeForm = (dataType, event) => {
            this.setState({ [dataType]: event.target.value });
        };
        // 提交事件
        handleSubmit = (event) => {
            event.preventDefault();//阻止默认事件 阻止表单提交
            let { username, password } = this;
            alert(`您输入的用户名是：${this.state.username},您输入的密码是：${this.state.password}`);
        }
        render() {
            return (
                <div>
                    <form action="" onSubmit={this.handleSubmit}>
                        <label>用户名：</label>
                        <input type="text" placeholder="请输入用户名" onChange={(event) => { this.changeForm('username', event) }} name="username" />  &nbsp;
                        <label>密码：</label>
                        <input type="password" placeholder="请输入密码" onChange={(event) => { this.changeForm('password', event) }} name="password" />  &nbsp;
                        <button>登录</button>
                    </form>
                </div>
            )
        }
    };
    ReactDOM.render(<LogIn />, document.getElementById('test'));
</script>