Toast组建的实现

1.思路

生成一个新的div，添加（append）到document下，然后使用ReactDOM渲染该元素

创建一个Toast的类，因为需要类直接使用方法，所以创建相应的静态方法，直接调用

在方法调用前，清除定时器（如同节流），防止前面的定时器影响到后面弹出的toast的持续时间

2. es6中类的静态方法

静态的是指向类自身，而不是指向实例对象，主要是归属不同，这是静态属性的核心

class Foo {
    static classMethod() {
        return 'hello';
    }
}

静态方法使用：在方法前加上static关键字

为什么使用静态方法：阻止方法被实例继承，类的内部相当于实例的原型，所有在类中直接定义的方法相当于在原型上定义方法，都会被类的实例继承，但是使用static静态方法定义的不会被实例继承，而且可以被实例直接应用Foo.classMethod()，此时写成new Foo.classMethod()会提示不存在此方法

3、静态方法中this指向

class Foo {
  static bar () {
    this.baz();
  }
  static baz () {
    console.log('hello');
  }
  baz () {
    console.log('world');
  }
}
 
Foo.bar() // hello

this指向类而不是类的实例

静态方法可以被子类继承，也可以被super调用

类的实例方法调用 new Com().fn()

类的静态方法调用 Com.fn()

4、实现Toast组件

import React from 'react'
import './index.scss'
import  ReactDOM from 'react-dom'
let timer = null

class Toast {
    static info (msg, timeout) {
        msg = msg || 'info';
        timeout = timeout || 2000;
        init(); // 显示
        setTime(timeout)
        ReactDOM.render(
            <span>{msg}</span>, document.getElementById('toast'));
    }
}

function init () {
    clearTimeout(timer);
    let toast = document.getElementById('toast')
    if (toast) {
        toast.style.display = "block"
    } else {
        let div = document.createElement("div")
        div.setAttribute("id", "toast")
        document.body.appendChild(div)
    }
}

function setTime (timeout) {
    timer = setTimeout (() => {
        let toast = document.getElementById('toast')
        if (toast) {
            toast.style.display = "none"
        }
    }, timeout)
}