React -- 受控组件和非受控组件

Posted 2021-11-02 我真的爱敲代码

欢迎学习交流！！！
持续更新中…

文章目录

• 受控组件和非受控组件
• • 非受控组件
  • 受控组件
  • 总结
• 高阶函数
• 函数柯里化

---

受控组件和非受控组件

包含表单的组件分类有：受控组件和非受控组件

非受控组件

遵循原理：“现用现取”

例：点击“登录”，触发表单的onSubmit，进入handleSubmit回调中，读取两个input框中的数据，就要获取username、password两个节点，最后通过节点.value将结果显示出来

<script type="text/babel">
    // 创建组件
    class Login extends React.Component {
        handleSubmit = (event) => {
            event.preventDefault()    //阻止表单提交
            const {username,password} = this;
            alert(`你输入的用户名是：${username.value}，你输入的密码是：${password.value}`)
        }
        render() {
            return (
                <form action="#" onSubmit={this.handleSubmit}>  {/*action属性：表单提交的地址*/}
                    用户名：<input ref={c => this.username = c} type="text" name="username" /><br/>
                    密码：<input ref={c => this.password = c} type="password" name="password"/><br />
                    <button>登录</button> 
                </ form>
            )
        }
    }
    // 渲染组件
    ReactDOM.render(<Login />,document.getElementById('test'));
</script>

效果如图所示：

受控组件

总结：页面中所有输入类的DOM，随着输入会把内容维护到状态中，在需要使用的时候再把内容从状态中取出，这就是受控组件（即Vue中的双向数据绑定）

优势：受控组件相比较于非受控组件，就是能够省略掉ref

<script type="text/babel">
    // 创建组件
    class Login extends React.Component {
        // 初始化状态
        state = {
            username:'',//用户名
            password:''//密码
        }
        // 保存用户名到状态中
        saveUsername = (event) => {
            this.setState({username:event.target.value})
        }
        // 保存密码到状态中
        savaPassword = (event) => {
            this.setState({password:event.target.value})
        }
        // 表单提交的回调
        handleSubmit = (event) => {
            event.preventDefault()    //阻止表单提交
            const {username,password} = this.state;    //取出的是真正的值，故下面不需要用.value
            alert(`你输入的用户名是：${username}，你输入的密码是：${password}`)
        }
        render() {
            return (
                <form onSubmit={this.handleSubmit}>  {/*action属性：表单提交的地址*/}
                    用户名：<input onChange={this.saveUsername} type="text" name="username" /><br/>
                    密码：<input onChange={this.savaPassword} type="password" name="password"/><br />
                    <button>登录</button> 
                </ form>
            )
        }
    }
    // 渲染组件
    ReactDOM.render(<Login />,document.getElementById('test'));
</script>

总结

建议使用受控组件，因为受控组件中没有ref，而非受控组件中有几个输入项就得写几个ref，在React官方文档中有提示：“请勿过度使用Refs”，能不使用ref就不要使用，会存在效率问题

---

高阶函数

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

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

常见的高阶函数有：回调函数、Promise、setTimeout、arr.map()等等数组常见的方法

---

函数柯里化

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

未使用函数的柯里化示例：

function sum(a, b, c) {
	return a + b + c
}
const result = sum(1, 2, 3);
console.log(result);        //6

使用函数的柯里化示例：

function sum(a) {
	return (b) => {
		return (c) => {
			return a + b + c
		}
	}
}
const result = sum(1)(2)(3)
console.log(result);

函数柯里化的优点：

• 可以将函数作为参数传递 （用于参数复用）
• 可以将函数作为返回值输出 (提前返回）
• 函数的延迟计算 （使用较少）

缺点：
函数的柯里化解决了兼容性问题，但同时也会带来使用的不便利性，不同的应用场景往要传递很多参数，以达到解决特定问题的目的。有时候应用中，同一种规则可能会反复使用，这就可能会造成代码的重复性。

总结：
柯里化就是用到了很多闭包，递归，参数展开，绑定调用对象来满足一个功能函数的适用性，让使用这个功能的函数更加强健，可以在开发中非常优雅的处理复杂逻辑。但是这个函数也由于柯里化更加局限了这能在这一功能复用，不能很好的被其他功能的函数复用。