react高阶组件实战：封装input（函数式组件案例，非class组件）

1、概念描述：什么是高阶组件

高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式。具体而言，高阶组件是参数为组件，返回值为新组件的函数

2、案例介绍

自定义input表单，每次写完都要写校验规则，比较的麻烦，如果我们把表单的dom和事件进行分离，把校验的方法抽离出来复用，这样是不是很爽呢？

react高阶组件就可以实现这个效果：

a、我们先写一个高阶组件，以及对应的表单处理逻辑

b、我们把表单的dom抽离出来，写成一个组件，然后作为一个参数，传递给高阶组件

c、引用第二步封装好的表单组件

d、显示效果

e、这里只写了流程，没有加校验演示（流程都通了，谁还在乎校不校验的，哈哈）

3、特别说明：

a、高阶组件的模式和数据流实际如图

b、这里面涉及到子组件和父组件通信的问题，通过getValue函数实现的

以下是源码：

2-a：

import React, { useState, useEffect } from “react”;
export default (WrappedComponent) => {  const NewComponent = (props) => {    console.log(props);    const handleChange = (e) => {      props.getValue({        flag: props.flag,        value: e.target.value,      });
      console.log(e.target.value);    };    let newprops = {      onChange: handleChange,    };
    return <WrappedComponent {…newprops} />;  };
  return NewComponent;};

2-b:

import InputHoc from “../components/Hoc/InputHoc”;
const Comp = (props) => {  return <input type=”text” {…props} />;};
const InputComp = InputHoc(Comp);
export default InputComp;

2-c：

import InputComp from “../components/InputComp”;import { useState, useEffect } from “react”;
const HocDemoFn = (props) => {  const [formValues, setFormValues] = useState({});  const viewData = () => {    console.log(formValues);  };  const getValue = (e) => {    console.log(e);    setFormValues({ …formValues, [e.flag]: e.value });  };  useEffect(() => {    console.log(props);    return () => {};  }, []);
  return (    <div>      <p>这里是一个函数组件</p>      <p>使用到了 HOC</p>      <p>从hoc高阶组件中拿到的数据是：{JSON.stringify(formValues)}</p>
      <p>        姓名：        <InputComp flag=”name” getValue={getValue}></InputComp>      </p>
      <p>        性别：        <InputComp flag=”sex” getValue={getValue}></InputComp>      </p>
      <button onClick={viewData}>查看</button>    </div>  );};export default HocDemoFn;

本案例主要是通过函数式组件实现的react高阶组件实战案例，因为class类组件网上一大堆。以上就是react高阶组件实战：封装input（函数式组件案例，非class组件）的全部内容，欢迎大家一起探讨。