一.受控组件

如何理解受控组件？（什么是受控组件？+ 什么情况下是非受控组件？+ 如何将组件变成受控组件？）1. 受控组件是指value值受到React组件状态控制的表单元素 2. 非受控组件：HTML中的表单元素是可输入的，也就是有自己的可变状态, 但是默认表单元素的值不受所在组件 state控制, 也就是表单元素所在组件无法实时获取最新的表单元素值，表单元素值不受所在组件状态的控制, 我们将这样的表单元素称作: 非受控组件3. 转换：而想要将普通表单组件转换成受控组件，需要利用value绑定组件状态变量，然后利用onChange绑定回调函数随着输入实时修改状态变量，达到组件受控的效果

将普通的表单元素转化为受控组件的具体步骤：1. 将表单value属性与state状态变量一对一绑定（当表单类型是复选框是，绑定checked属性）2. 为每个表单元素添加onChange事件，并绑定回调函数，在回调函数体内使用事件对象获取对应表单元素的输入内容，然后用setState方法将获取到的输入内容赋值给对应绑定了value属性的state状态变量（这一步可以更新state状态变量并触发render函数执行，重新渲染组件）

受控组件优化写法：简化点：如果存在多个表单元素需要绑定事件，可以采用简写方式：（需要为每个表单元素添加name属性，属性值为其对应的状态变量名的字符串形式）在修改状态变量的回调函数体内，用事件对象获取对应表单元素的name属性，用name属性套上方括号代替状态变量，在setState方法中，方括号会自动将括号内的字符串解析为对应名称的状态变量，然后用事件对象获取表单输入内容赋值给该变量即可，如果存在使用布尔值的复选框，可使用三目运算单独判断name值然后进行特定的赋值
写法：回调函数名=(e)=>{this.setState({[e.target.name]:e.target.name=='复选框name值'?e.target.checked:e.target.value})}

二.高阶组件

概念：1. 高阶函数：1. 概念：high-order-function，是指接受函数作为参数的函数，返回值是另一个函数（高阶函数对应的是普通函数）2. 应用：高阶函数的应用有很多，函数防抖，函数节流，bind函数，函数柯里化，map，Promise的 then函数等2.什么是高阶组件以及作用是什么：1. 概念：高阶组件就是一个函数，它接受一个组件作为输入，然后会返回一个新的组件作为结果，且所返回的新组件会进行相对逻辑增强（逻辑增强，相当于对一些重复的功能在高阶组件封装并补充给作为参数输入的组件，然后将补充过功能的组件返回作为结果）（比如一些低代码开发平台的组件都需要添加组件拖拽逻辑，这个时候就可以用高阶组件将组件拖拽逻辑封装，然后用这个高阶组件将所有的组件进行处理，添加拖拽逻辑，又或者一些软件中需要添加的左滑删除功能）2. 作用：高阶组件是 react应用中很重要的一部分，最大的特点就是重用组件逻辑。它并不是由React API 定义出来的功能，而是由 React的组合特性衍生出来的一种设计模式（拓展属性代理功能）

代码演示：：：：：：：：：：：：：：：：：tools.js文件
//高阶处理函数
import React, { Component } from 'react';export function HOC(Com) {return class tools extends Component {constructor(props) {super(props);this.state = {left: 0,top: 0,nativeLeft: 0,nativeTop: 0}}drag(e) {this.setState({ nativeLeft: e.nativeEvent.offsetX, nativeTop: e.nativeEvent.offsetY })document.onmousemove = (e) => {this.setState({left: e.pageX - this.state.nativeLeft,top:e.pageY-this.state.nativeTop})}document.onmouseup = () => {document.onmousemove = 0;}}render() {return (<div style={{position:'absolute',left:this.state.left,top:this.state.top}} onMouseDown={this.drag.bind(this)}>{<Com />}</div>);}} 
}应用在组件中
import React, { Component } from 'react';
import './child2.scss';
import { HOC } from './../utils/tools';------导入用于逻辑增强的高阶函数
class Child2 extends Component {render() {return (<div className='child2'>2 </div>);}
}export default HOC(Child2);-------------在导出时对组件进行逻辑增强；