React从入门到实战-事件处理，受控组件与非受控组件

事件处理

1. 通过onXxx属性指定事件处理函数（注意大小写）

   1. React使用的是自定义（合成）事件，而不是使用的原生DOM事件——为了更好的兼容性
   2. React中的事件是通过事件委托方式处理的（委托给组件最外层的元素——为了更高效

2. 通过event.target得到发生事件的DOM元素对象

收集表单数据

1. 非受控组件：不能通过代码来控制值，只能通过用户行为操作值，通过DOM节点来处理数据
2. 受控组件：通过React的state作为数据唯一来源，通过变更函数调用setState方法更新数据的表单输入元素。

// 非受控组件
   class Login extends React.Component{
        showData = (event)=>{
            event.preventDefault()//阻止表单提交
            let {username,password } = this
            alert(`你的用户名是：${username.value},你的密码是：${password.value}`)
        }
        render(){
            return (
                <form action="http://www.baidu.com" onSubmit={this.showData}>
                    <div>
                        <label>用户名：</label>
                        <input type="text" placeholder="请输入用户名" name="username" ref={(c)=>{this.username = c}}/>
                    </div>
                    <div>
                        <label>密码：</label>
                        <input type='password' placeholder="请输入密码" name="password" ref={(c)=>{this.password = c}}/>
                    </div>
                    <button>登录</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login/>,document.getElementById("test"))

// 受控组件
 class Login extends React.Component{
        state = {
            username:"",
            password:""
        }
        showData = (event)=>{
            event.preventDefault()//阻止表单提交
            let {username,password } = this.state
            alert(`你的用户名是：${username},你的密码是：${password}`)
        }
        setUserName = (e)=>{
            this.setState({
                username:e.target.value
            })
        }
        setPWD = (e)=>{
            this.setState({
                password:e.target.value
            })
        }
        render(){
            return (
                <form action="http://www.baidu.com" onSubmit={this.showData}>
                    <div>
                        <label>用户名：</label>
                        <input type="text" placeholder="请输入用户名" name="username" onChange={this.setUserName}/>
                    </div>
                    <div>
                        <label>密码：</label>
                        <input type='password' placeholder="请输入密码" name="password" onChange={this.setPWD}/>
                    </div>
                    <button>登录</button>
                </form>
            )
        }
    }
    ReactDOM.render(<Login/>,document.getElementById("test"))

高阶函数

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

• 若A函数，接收的参数是一个函数，则A为高阶函数
• 若A函数，调用的返回值依然是一个函数，则A为高阶函数

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

函数的柯里化

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