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组件)的全部内容,欢迎大家一起探讨。

微信交流(备注:前端)