react -- totast 組件開發(一輩子三，三生萬物)

totast
最近在主導有jquery類型轉react技術棧-- 項目庫中引入antd-mobile，
可是因爲totast組件不能知足要求...本身前端封裝一個。（其實我很菜）

重要點：
1.分什麼技術棧，全是垃圾，真正掌握基礎，啥庫都是渣渣，框架也是庫，也是渣渣。
2.你們有沒有發現--一些dialog組件 和 totast組件，他們通常都會脫離當前渲染ui層級，
單獨的插入到body的下面第一級的child節點,猜測目的：
（1）這類型的組件，應該是單獨的根，不該該和現有渲染的組件嵌套，與現有業務分離。
（2）把元素直接查入到，非body的第一級child節點，當移動端渲染的時候，fixed定位，會形成子元素渲染高度存在問題實例,以前開發遇到過。
3.setTimeout的實現機制 和 瀏覽器對dom操做的優化，可能形成代碼問題。
設計思路
1.生成空白節點，做爲react totast組件的掛載dom。
2.採用css3過渡效果 + 監聽css3過渡動畫事件。實現效果。
3.經過切換組件的 className 來實現，組件的動畫過渡效果。

/代碼/

/*設計一個基礎函數， 而後複用這個基礎函數 */
import React from 'react';
import ReactDom from 'react-dom';
import ToastCmp from './ToastCmp';

const win = window;
const doc = win.document;
let layoutIndex = 999;
// 基礎函數
const jcToastCmp = ({message, time = 2000, zIndex, warpClass, amName = 'fade-in', loc}) => {
 //生成待插入 totast組件 的 dom容器
  const div = doc.createElement('div');
  div.setAttribute('id', `custom-totastcomp-${layoutIndex}`);
  //拿到組件實例
  const compRef = React.createRef();
  doc.body.appendChild(div);
  // 關閉組件
  const close = () => {
    // 調用組件替換過渡動畫的Class 從而產生過渡動畫，而後觸發過渡動畫鉤子
    compRef.current.toggleAmClass(amName);
  };
  const removeDiv = () => {
    ReactDom.unmountComponentAtNode(div);
    doc.body.removeChild(div);
  };
 // 存在倒計時，會自動刪除組件
  time && setTimeout(close, time);
 // 渲染totast
  ReactDom.render(<ToastCmp
    warpClass={ warpClass }
    amName={ amName }
    message={ message }
    ref={ compRef }
    amLevelHook={ removeDiv }
    zIndex={ zIndex || layoutIndex }
    loc={ loc }
  />, div);
  !zIndex && layoutIndex++;
  // 返回刪除方法
  return {
    close,
  };
};
// 成功方法調用
jcToastCmp.success = ({message, time, zIndex, amName, loc}) => {
  return jcToastCmp({
    message,
    time,
    zIndex,
    warpClass: 'totast-success',
    amName,
    loc,
  });
};
/// 警告方法調用
jcToastCmp.warn = ({message, time, zIndex, amName, loc}) => {
  return jcToastCmp({
    message,
    time,
    zIndex,
    warpClass: 'totast-warn',
    amName,
    loc,
  });
};
export default jcToastCmp

===
ToastCmp

import React from 'react';
import PropsType from 'prop-types';
import './index.less';

const defaultClassName = 'custom-totast-cmp';
class ToastCmp extends React.PureComponent {
  static propsType = {
    warpClass: PropsType.string,
    amLevelHook: PropsType.func.isRequired,  // 元素離開視口所觸發的鉤子
    loc: PropsType.string, // totast 顯示的位置
  }
  static defaultProps = {
    warpClass: '',
    loc: 'top',
  }
  state = {
    className: '',
  }
  amState = 0
  constructor(props) {
    super(props);
    const {warpClass, loc} = props;
    const initClassName = `${defaultClassName}  ${warpClass} totast-${loc}`;
    this.state.defaultClassName = initClassName;
    this.state.className = initClassName;
  }
  //交互替換過渡動畫class 名字 
  toggleAmClass = (amName) => {
    const {state, amState} = this;
    const {defaultClassName} = state;
    if (amState === 0) {
      this.setState({
        className: `${defaultClassName} ${amName}`,
      });
    } else {
      this.setState({
        className: defaultClassName,
      });
    }
  }
  // 動畫類開鉤子
  amLevelHook = () => {
    const {props, amState} = this;
    if (amState !== 0) {
      const { amLevelHook } = props;
      amLevelHook();
    }
    this.amState++;
  }
  componentDidMount() {
    const {toggleAmClass, props} = this;
    const {amName} = props;
    //延遲 產生進入過渡動畫（你瞭解setTimeOut原理，不是真正的延遲迴調，回調的時間是不肯定的）
    setTimeout(toggleAmClass, 50, amName);
  }
  render() {
    const {props, state, amLevelHook} = this;
    const {className} = state;
    const { message, zIndex } = props;
    const style = {
      zIndex,
    };
    return (
      <div
        className={ className }
        onTransitionEnd={ amLevelHook }
        style={ style }
      >
        { message }
      </div>
    );
  }
}

export default ToastCmp;

index.less

.custom-totast-cmp {
  position: fixed;
  left: 50%;
  transform: translate(-50%, 0);
  padding: pxToRem(5px) pxToRem(30px);
  background: #333;
  color: #fff;
  opacity: 0;
  transition: opacity 500ms ease;
  border-radius: 4px;
  text-align: center;
  &.totast-top {
    top: 0;
  }
  &.totast-middle {
    top: 50%;
    transform: translate(-50%, -50%);
  }
  &.totast-success {
    color: #fff;
    background: @success-color; //成功提示色
  }
  &.totast-warn {
    color: #fff;
    background: @warn-color; //失敗提示色
  }
  &.fade-in {
    opacity: 1;
  }
}``