「React Hooks」如何用120行代码，实现一个交互良好的拖拽上传组件

前言

你将在该篇学到：

• 如何将现有组件改写为 React Hooks函数组件
• useState、useEffect、useRef是如何替代原生命周期和Ref的。
• 一个完整拖拽上传行为覆盖的四个事件：dragover、dragenter、drop、dragleave
• 如何使用React Hooks编写自己的UI组件库。

逛国外社区时看到这篇：

How To Implement Drag and Drop for Files in React

文章讲了React拖拽上传的精简实现，但直接翻译照搬显然不是我的风格。

于是我又用React Hooks 重写了一版，除CSS的代码总数 120行。
效果如下：

1. 添加基本目录骨架

app.js

import React from 'react';
import PropTypes from 'prop-types';

import { FilesDragAndDrop } from '../components/Common/FilesDragAndDropHook';

export default class App extends React.Component {
    static propTypes = {};

    onUpload = (files) => {
        console.log(files);
    };

    render() {
        return (
            <div>
                <FilesDragAndDrop
                    onUpload={this.onUpload}
                />
            </div>
        );
    }
}

FilesDragAndDrop.js(非Hooks)：

import React from 'react';
import PropTypes from 'prop-types';

import '../../scss/components/Common/FilesDragAndDrop.scss';

export default class FilesDragAndDrop extends React.Component {
    static propTypes = {
        onUpload: PropTypes.func.isRequired,
    };

    render() {
        return (
            <div className='FilesDragAndDrop__area'>
                传下文件试试？
                <span
                    role='img'
                    aria-label='emoji'
                    className='area__icon'
                >
                    &#128526;
                </span>
            </div>
        );
    }
}

1. 如何改写为Hooks组件？

请看动图：

2. 改写组件

Hooks版组件属于函数组件，将以上改造:

import React, { useEffect, useState, useRef } from "react";
import PropTypes from 'prop-types';
import classNames from 'classnames';
import classList from '../../scss/components/Common/FilesDragAndDrop.scss';
const FilesDragAndDrop = (props) => {
    return (
        <div className='FilesDragAndDrop__area'>
            传下文件试试？
            <span
                role='img'
                aria-label='emoji'
                className='area__icon'
            >
                &#128526;
            </span>
        </div>
    );
}

FilesDragAndDrop.propTypes = {
    onUpload: PropTypes.func.isRequired,
    children: PropTypes.node.isR