如果你觉得可以，请多点赞，鼓励我写出更精彩的文章🙏。
如果你感觉有问题，也欢迎在评论区评论，三人行，必有我师焉

TL;DR

前言
常规组件化思路
Hooks组件
非常规组件(有奇特的效果，重点是这个)

前言

在我的一些文章中，不管是自己写的还是翻译国外优秀开发人员博客的。其中一个主线就是，了解了JS基础，来进行前端模块化实践。尤其现在前端比较流行的框架React、Vue都是提倡进行对页面利用组件进行拆分。这其实就是MVVM的设计思路。

而我们今天以React项目开发，来聊聊如何在实际项目中实现组件化，或者如何进行高逼格的逻辑服用。

以下所讲内容，都是本人平时开发中用到的，并且都实践过的(如果大家有更好的想法，也可以留言讨论，毕竟每个人对一个事件的看法或多或少有一些认知的差异)。

我信奉一句话，实践出真知，没有实践就没有发言权

常规组件化思路

这里起的标题是常规，是因为这个篇幅中所讲的内容也是React官方毕竟推崇的常规方案(非常规方案，例如Hooks由于API比较新颖对于一些开发中，比较陌生，同时受公司React版本的影响，只是停留在理论阶段。我将Hooks会单独拎出来，讲一些小🌰)

如果大家经常翻阅React官网，在ADVANCED GUIDES中明确指出了，两个实现逻辑服用的方式：HOC和Render Props。

所以我们来简单介绍一下。

HOC

来看一下官方的解释：

A higher-order component (HOC) is an advanced technique in React for reusing component logic.

其实如果对JS高级函数有过了解的童鞋，看到这个其实不会感到很陌生。而HOC就是模仿高级函数，来对一些比较共用的逻辑，进行提炼。从而达到代码复用的效果。

继续给大家深挖一下，高阶函数可以接收函数做为参数，同时将函数返回。

function hof(f){
    let name="北宸";
    return f(name);
}

function f(name){
    console.log(`${name} 是一个萌萌哒的汉子！`)
}

看到这点是不是有点闭包的身影。也就是说，被包裹的函数拥有hof中所定义变量的访问权限。

如果大家想对闭包、作用域有一个比较深刻的了解可以参考

这题有点跑偏了。我们进入正题。

const EnhancedComponent = higherOrderComponent(WrappedComponent);

这是对HOC的一个简单公式的概括。通过刚才讲解hof其实对这个就轻车熟路了吧。

Talk is cheap,show your the code

function EnhancedComponent(WrappedComponent){
    //其实，这里也可以定义一些比较共用的参数和逻辑
    return class extends React.Component{
        //
       state={
           //定义一些公共属性
           name:'北宸'
       }

    componentDidMount() {
        //做一些数据初始化处理
    }

    componentWillUnmount() {
     //针对一些注册事件例如轮询事件的解绑
    }

    handleChange() {
     //自定义事件处理
    }
    render() {
        //这里最好做一下结构处理
        const {name} = this.state;
      return <WrappedComponent 
      parentData={name} //将一些共用的数据传入
      {...this.props} //简单的传入传出
      />;
    }
    }
}

这就是一个简单的HOC例子。如果大家想对HOC有一个更深的了解可以参考

React-HOC了解一下(这是我早期写的，可能有点Low)

Render Props

这也是一个常规逻辑复用的方式。

先来一个总结，其实就是在组件属性中有一个属性，而该属性是一个函数，函数返回了一个组件。

<RenderProps renderRegion={(value)=><CommonConponenet value={value}/>}

稍微解释一下RenderProps组件包含中一些共有逻辑和数据，而这些逻辑和数据，恰恰是CommonConponenet需要的。

Talk is cheap,show your the code

class RenderProps extends React.Component{
    state={
        name:'北宸'
    }
    //一堆生命周期方法
    //一堆自定义方法
    render(
        const {name} = this.state;
        return (
            <section>
                <>
                    //RenderProps自己的页面结构
                </>
                //如果传入的数据过多，这里可以使用一个对象把数据进行包装
                {this.props.renderRegion(name)}
            </section>
        )
    )
}

想必，大家在平时开发中，或多或少都用到这些比较常规的方式。

上面只是简单的介绍了一下。其实本文的重点是下面的一些非常规操作。

Hooks组件

想必大家在翻阅一些技术文档，有很多，关于Hooks用法的介绍。本文就不在啰嗦了，而今天给大家准备说一些非常规操作。如果实在想了解可以参考我翻译的一篇关于Hooks的简单应用。

后生，React-Hooks了解一下

首先，有一点需要明确，hooks的推出，是针对函数组件。是让函数组件，也能享受state/生命周期带来的愉悦感。

给大家一个应用场景，就是有一个组件，有一个定时功能，需要一个定时器，暂且定位15min内定时器走完，并在定时器完成之后进行额外的操作。

通过上面的需求，我们来分析一波。

有一个定时功能，那势必就是在组件初始化时，要触发这个定时器，在触发定时器之后，定时器会额外的开出一个线程进行数据处理。
每次时间变化，都需要显示到页面中
我们需要监听定时器是否到达要求，(15min之后，需要额外操作)
触发额外操作
如果在15min之内，把组件销毁，还需要将定时器销毁

Talk is cheap,show your the code

import React,{useState,useEffect} from 'react';
function Test(props){
    //从父组件来的数据
    const {name}=props;
    const [msg, setMsg] = useState("二维码有效时间：15分00秒");
    let timer, maxtime = 15 * 60;
    //1 初始化一个定时器，(在组件初始化时)，
    useEffect(()=>{
         timer = setInterval(() => {
      if (maxtime >= 0) {
        let minutes = Math.floor(maxtime / 60);
        let seconds = Math.floor(maxtime % 60);
        let msg = "二维码有效时间：" + minutes + "分" + seconds + "秒";
        --maxtime;
        //2. 这里定义一个state，变量，用于页面显示
        setMsg(msg)
      } else {
        clearInterval(timer);
        //如果在正常情况下时间走完，进行额外操作
        //3. 这里可以是更新页面，也可以进行事件回调
      }
    }, 1000)
    return ()=>{
        clearInterval(timer); //在组件销毁时，将定时器销毁
    }
    },[])//这里为什么需要第二个参数？可以参考我刚才给的链接，寻找原因
    
    function stopTimer(){
        clearInterval(timer);
    }
    
    return(
        <section>
            <Button onClick={()=>{this.stopTimer()}}>停止计时</Button>
            {mag}
        </section>
    )
}

非常规组件

该部分，是本人在平时项目开发中，有时候会用到的组件封装思路，如果大家有好意见和建议，可以互相讨论。总之，想到达的目的就是取其精华，去其槽粕。

因为在项目开发中用的UI库是Antd，有些使用方式也是基于它的使用规则去使用的。

RandomKey

如果你在React项目中，通过遍历一个数组来渲染一些组件，例如：li。如果你不给加一个key在控制台会有警告出现。这个key也是React中隐藏属性。是为了Diff算法用的。

但是，有一些场景，比方说，一些弹窗，是需要用户填写一些信息的，而有一些用户在填写的时候，有取消的操作，常规的处理方式是不是，需要遍历，并通过对比原来的信息进行数据的恢复。

而，如果你能够在组件调用处监听到用户的取消事件，那提供一个比较方便，但是这也是属于无奈之举的方式。RandomKey。

<Test key={Math.random() />}

State组件

这个名词是本人，擅自命名的，如果大家感觉有好的名字，在评论区告诉我。

如果在React开发项目中，你前期可能规划的很好，按部就班的去写页面，但是，但是，但是，你架不住，产品每天不停的改需求，而改来改去，发现自己原先规划的东西自己都看不懂了。

或者，你们老大让你去维护别人写的代码，追加一个新的需求，而当你看到别人写的代码时候，心凉了。这TM是人能看懂的代码吗，不说逻辑是否，负责，TM一个页面的所有功能都堆砌在一个文件中。(这里说堆砌一点都不为过，我看过别人写一个页面1000行代码，20多个state)。

比方说，现在有如下的组件，需要新增一个弹窗，而新增一个弹窗，我们来简单的细数一下需要的变量

visibleForXX
valueXX

暂且就按最少的来

class StateComponent extends React.Component{
    state={
        //这里忽略7-10个参数
        visibleForXX：false,
        valueXX:'北宸',
    }
    
    handleVisible=(visible)=>{
        this.setState({
            visibleForXX:visible
        })
    }
    
    render(
    const {visibleForXX,valueXX}= this.state;
    const {valueFromPorpsA,valueFromPorpsB} = this.props;
    return (
        <section>
            //这里是700多行的魔鬼代码
             <Button onClick=(()=>this.handleVisible(true))>我叫一声你敢答应吗</Button>
             <Button onClick=(()=>this.handleVisible(false))>我不敢</Button>
            {visibleForXX?
                <Modal
                    visible={visibleForXX}
                    valueXX={valueXX}
                    valueFromPorpsA={valueFromPorpsA}
                    //....如果逻辑负责，可能还很多
                >
                 //bala bala 一大推
                </Modal>
                :null
            }
        </section>
    )
    )
}

这样写有毛病吗，一点毛病都没有，能实现功能吗，能。能交差吗，能。能评优吗，评优和代码质量有毛关系。后面维护你的代码的人，能问候你亲戚吗，我感觉也能。

同时大家发现一个问题吗，虽然我在写代码的时候，特意用了解构，但是每次不管是否和该组件相关的有关的渲染，都会进行一次按作用域链查找。有没有必要，这个还没有。

那有啥可以解决呢，有人会说，那你不会拆一个组件出来啊。可以，如果按我平时开发，这个新功能一般都是一个组件。但是，把上述Modal代码拆出去，其实还是会有每次render作用域链查找问题。

其实，我们可以换种思考思路。

直接上菜吧。

import Modal from '../某个文件路径，当然也可以用别名'
class StateComponent extends React.Component{
    state={
        //这里忽略7-10个参数
        ModalNode:null
    }
    
    handleClick=()=>{
        const {valueFromPorpsA,valueFromPorpsB} = this.props;
        this.setState(
        ModalNode:<Modal 
                     visible={visibleForXX}
                    valueXX={valueXX}
                    valueFromPorpsA={valueFromPorpsA}
                    //....如果逻辑负责，可能还很多
        />
        )
    }
    
    render(
    const {ModalNode}= this.state;
    return (
        <section>
            //这里是700多行的魔鬼代码
            <Button onClick=(this.handleClick)>我叫一声你敢答应吗</Button>
            {ModalNode?
                ModalNode
                :null
            }
        </section>
    )
    )
}

把组件换一个位置，他不香吗。用最密集的代码做相关的事。虽然，有可能接收你代码的人，可能会骂街，但是等他替换一个简单的参数。就不需要在1000行代码中遨游了。

上述例子，只是简单说了一下思路，但是肯定能实现，由于篇幅问题，就不CV又臭又长的代码了。

自我控制显隐的Modal

有没有遇到这么一个需求，需要在某一个页面中，新增一个弹窗，而这个新增的任务又双叒叕交给你了。

而你欣然接受，发现需要新增的地方，又是一堆XX代码。(你懂我说的意思)

我们继续分析一下常规Modal(在已经将Modal封装成一个组件前提下)具备的条件(在调用处需要准备的东西)

visible
this.handleVisible(false)
this.handleOk（这里可能有额外操作）

列举的，是最简单的，可能有比这还复杂的。this.handleVisible(false)是控制Modal关闭的。

然后你又继续bala bala的写。如果一个页面存在1-2个modal还是可以接受，但是如果是4-5个呢，你还是用这种方式，我的天，恭喜你成为了CV俱乐部高级会员。

我可以弱弱的卑微的提出两点

将Modal的壳子封装成组件，你只负责content的书写
封装的Modal自己去控制显隐

我们着重说一下2，因为这个篇幅是2的主场。

Talk is cheap,show your the code

组件调用方式，会发现，只要引入对应的组件，并且定义一个孩子节点，就可以实现一个控制显隐的组件。

<OperatingModal>
    <Button>点击</Button>
</OperatingModal>

Modal简单实现思路

import React from 'react';
import { Modal } from 'antd';
export class OperatingModal extends React.Component {
    static getDerivedStateFromProps(nextProps, state) {
        if ('visibleFromParent' in nextProps && nextProps.visibleFromParent && !state.visible) {
            return {
                visible: nextProps.visibleFromParent
            }
        }
        return null;
    }
    state = {
        visible: false
    }

    handleVisible = (visible) => {
        this.setState({
            visible: visible
        });
    }

    handleOk = (secondNode) => {
       //控制显示隐藏
    }

    renderFooter = () => {
        const { footer, footerPosition } = this.props;
        let footerNode = footer;
        if (footer != null) {
            let footerChidren = footerNode.props.children;
            footerNode = <div >
                {footerChidren.length > 1 ?
                    <React.Fragment>
                       //克隆处理
                    </React.Fragment>
                    : footer}
            </div>
        }
        return footerNode;

    }

    render() {
        const { title, children, content, width, closable, zIndex } = this.props;
        const { visible } = this.state;
        return (
            <section>
                {children ?
                    React.cloneElement(children, { onClick: () => this.handleVisible(true) })
                    : null
                }
                <Modal
                   //常规配置
                >
                    {content}
                </Modal>
            </section>
        )
    }
}
OperatingModal.defaultProps = {
    title: '提示',
    content: '我是内容',
    children: null,//需要包裹的孩子节点
    footer: null,
    visibleFromParent: false,
    width: 300,
    closable: true,
    footerPosition: 'center',
    zIndex: 1000,
}

这是我简单的一个版本，你如果正好用antd,你可以尝试用一下。

有一点需要说明，这里用到了，一个React属性React.cloneElement。具体API讲解可以参考官网。

自带form提交的Modal

这个例子是基于2(自我控制显隐的Modal)的升级版本，只提供一个思路。主要代码如下。

该组件具备的功能：

form表单和非form表单
自控显隐
防重复提交
from 提交之后，能够获取到接口结果，进行其他操作
父组件也可以调用显示隐藏
....

组件调用方式

<AdaptationFromModal>
    <From.Item>
        //.....
    </From.Item>
    //很多From.Item
</AdaptationFromModal>

组件实现大致思路

import React, { Component } from 'react';
import {
  Modal, Form, Button, message,
} from 'antd';
import throttle from 'lodash.throttle';

class AdaptationFromModal extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      visible: false,
      isSubmitLoading: false,
      randomKey: 1,
    };
    this.handleOK = this.handleOK.bind(this);
    this.handleOKThrottled = throttle(this.handleOK, 4000);
  }

  componentWillUnmount() {
    this.handleOKThrottled.cancel();
  }

  renderFormCotent = () => {
    let formContentNode = null;
    const { formItemLayout } = this.props;
    formContentNode = (
      <Form >
       //对renderCotent进行遍历
      </Form>
    );
    return formContentNode;
  }

  renderNormalContent = () => {
    let normalContentNode = null;
    normalContentNode = this.props.renderCotent(//可以将组件值抛出去);
    return normalContentNode;
  }

  webpackModalVisibleStatus = (visible = false) => {
    this.setState({
      visible: visible,
    }, () => {
     //根据不同的visible处理相关的代码
    });
  }

  handleOK() {
    const { isIncludeForm, callbackForOK, callbackForOKAfter } = this.props;
    this.setState({
      isSubmitLoading: true,
    });
    if (isIncludeForm) {
      // 进行接口数据的处理
        
    }
  }

  renderFooter = () => {
    const {
      isHasPersonFooter, defineFooterNode, callbackForOK, callbackForOKAfter,
    } = this.props;
    const { isSubmitLoading } = this.state;
    let footerNode = null;
    if (isHasPersonFooter) {
      if (defineFooterNode !== null) {
        footerNode = defineFooterNode(//这里可以将组件内部的值，抛出去  );
      }
    } else {
      footerNode = (
       //常规渲染
      );
    }
    return footerNode;
  }


  render() {
    const { visible, randomKey } = this.state;
    const {
      width, isIncludeForm, title, children, style,
    } = this.props;
    return (
      <section style={style || {}}>
        {children
          ? React.cloneElement(children, { onClick: () => this.webpackModalVisibleStatus(true) })
          : null}
        {visible
          ? (
            <Modal
             //常规Modal配置
            >
              {
                isIncludeForm ? this.renderFormCotent() : this.renderNormalContent()
              }
            </Modal>
          )
          : null}
      </section>
    );
  }
}
AdaptationFromModal.defaultProps = {
  title: 'xxx', //
  width: 600,
  isIncludeForm: true,
  isHasPersonFooter: false,
  callbackForOkClick: null, // 点击确定的回调函数
  formItemLayout: {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  },
  style: undefined,
};


export default Form.create()(AdaptationFromModal);

Antd Form壳子

有些公司业务中，可能有表单啊，类似的功能，就是简单的form处理。但是，antd的在进行表单处理的时候，需要很多冗余的配置。如下：

 <Form layout="inline" onSubmit={this.handleSubmit}>
        <Form.Item validateStatus={usernameError ? 'error' : ''} help={usernameError || ''}>
          {getFieldDecorator('username', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input
              prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}
              placeholder="Username"
            />,
          )}
        </Form.Item>
        <Form.Item validateStatus={passwordError ? 'error' : ''} help={passwordError || ''}>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }],
          })(
            <Input
              prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}
              type="password"
              placeholder="Password"
            />,
          )}
        </Form.Item>
      </Form>

比方说有些Form.Item，getFieldDecorator这些看起来很碍眼。是不是有一种处理方式，就是简单的配置一些页面需要的组件，而这些处理放在一个壳子里呢。

 <SearchBoxFactory
        callBackFetchTableList={this.callBackFetchTableList}
        callBackClearSearchCondition={this.callBackClearSearchCondition}
      >
        <Input
          placeholder={'请输入你的姓名'}
          formobj={{
            apiField: 'XXA', initialValue: '', maxLength: 50, label: '北宸',
          }}
        />
        <Input
          placeholder={'请输入你的性别'}
          formobj={{
            apiField: 'XXB', initialValue: '', maxLength: 50, label: '南蓁',
          }}
        />
        <Select
          style={{ width: 120 }}
          formobj={{
            apiField: 'status', initialValue: '1',
          }}
        >
          <Option value="1">我帅吗？</Option>
          <Option value="2">那必须滴。(锦州语气)</Option>
        </Select>
      </SearchBoxFactory>

这种处理方式他不香吗。就问你香不香。

总结

其实React中组件化，是一个编程思路，我感觉，懒人才可以真正的领略到他的魅力，因为懒人才可以想出让自己书写代码，更快，更高，更强的方式。

这也是一种编程习惯和方式。用最短的时间，写最少的代码，干最漂亮的代码。

希望我啰嗦这么多，能对你有所帮助。如果大家看到有哪里不是很明白的，可以评论区，留言。如果感觉还不是很尽兴。没关系，这些东西，有很多。

其实每天都在吵吵组件化，组件化，组件化是在实际开发项目中，在解决实际业务中，才会有灵感。他主要的目的是解决实际问题，而不是闭门造车。

React组件封装思路拓展

TL;DR

前言

常规组件化思路

HOC

Talk is cheap,show your the code

Render Props

Talk is cheap,show your the code

Hooks组件

Talk is cheap,show your the code

非常规组件

RandomKey

State组件

自我控制显隐的Modal

Talk is cheap,show your the code

自带form提交的Modal

Antd Form壳子

总结