react基础 - 几个扩展概念

1. 受控组件和非受控组件

***非受控组件：页面中输入类DOM的值，现用现取（几个输入项使用几次ref，所以不建议，效率低）

***受控组件：给输入类DOM绑定onChange事件，随着你的输入，把数据维护到状态里，需要用的时候就把状态里保存的数据去取出来（类比vue中的双向数据绑定）可以省略ref的使用-推荐

2. 高阶函数 

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

1. 若A函数，接收到的参数是一个函数，那么A就可以称之为高阶函数

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

常见的高阶函数：promise，setTimeout，setInterval，arr.map()等等

---

回顾基础知识：

访问对象中的成员有两种方式：obj.a  或 obj[a]

let a='name'

let obj={}//｛name:'tom'｝
obj[a]='tom'
console.log(obj)

---

3. 函数柯理化

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

高阶函数+函数柯理化 demo

saveFormData=(type)=>{  
	return (event)=>{
		this.setState({
			[type]:event.target.value  
		})
	}
}
//不使用高阶函数，直接在saveFormData中同时接收两个参数，是拿不到event的，，
//原因在于react会帮你去调用onChange，，接收到的是 this.saveFormData('username')的返回值  
//相当于把返回值赋给了onChange，，并不会在改变的时候触发 this.saveFormData方法
<form>
	<input onChange={ this.saveFormData('username') } />
	<input onChange={ this.saveFormData('password') } />
	<button>登录</button>
</form>

上面代码的saveFormData函数其实就是高阶函数，因为它返回的值是一个函数，而且这个函数就是通过函数柯里化的方式在调用（先是saveFormData函数接收一个参数type，随后返回函数，然后再接收别的参数，然后最终来处理结果（设置state值））

 不使用柯里化去实现？

saveFormData=（type,value）=>{
	this.setState({
		[type]:value
	})
}
<form>
	<input onChange={ (event)=>{this.saveFormData('username',event.target.value)} } />
	<input onChange={ (event)=>{this.saveFormData('password',event.target.value)} } />
	<button>登录</button>
</form>