react受控组件、非受控组件以及高阶组件

受控组件

组件的state是“唯一数据源”，使用受控组件时必须要绑定onchange()函数，否则会警告。
通俗来讲：就是input的vlaue值是来源于组件的state，相当于是映射，并且用户输入或改变值会触发this.setState来改变state值。

• input
• textarea
• select

用途：

1. 输入框默认值

//一个简单的例子
handleChange(event){
	this.setState({value: event.target.value});
}
<input type="text"  value = {this.state.value} onchange = {this.handleChange}/>

非受控组件

非受控组件即不受状态的控制，获取数据就是相当于操作DOM。

• 文件 input 标签

高阶组件

React 中用于复用组件逻辑的一种高级技巧

高阶组件参数是组件，返回值是新组件的函数。
组件是将props转换为UI
高阶组件是将组件转换为另一个组件
注意：不会修改传入的组件，返回值是一个新的组件
实现高阶组件：

1. 属性代理

//一个简单的高阶组件
function myHOC() {
  return function(WrappedComponent) {
    class TheHOC extends React.Component {
      render() {
        return <WrappedComponent {...this.props} />;
      }
    }
    return TheHOC;
  }
}

功能：

• 可以操作props，实现增删改查
• 抽取状态
• 包装组件

2. 反向继承

export default WrappedComponent => class extends WrappedComponent {
    render() {
      console.log(this.state, 'state');
      return super.render();
    }
}

功能：

• 渲染劫持