day56（reactJS）受控组件以及高阶组件

一.受控组件

如何理解受控组件？（什么是受控组件？+ 什么情况下是非受控组件？+ 如何将组件变成受控组件？）

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

将普通的表单元素转化为受控组件的具体步骤：

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

受控组件优化写法：

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

二.高阶组件

概念：

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

代码演示：：：：：：：：：：：：：：：：：

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);-------------在导出时对组件进行逻辑增强；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54