# React技巧

import React from 'react'
import ReactDOM from 'react-dom'
import Loading from './loading' // 引入Loading组件
import './loading.css' // 引入Loading组件的css样式

// 1. 创建挂载组件方法
function createNotification() {
    const div = document.createElement("div");
    document.body.appendChild(div);
    const notification = ReactDOM.render(<Loading />,div);
    // notification = Loading组件
    return {
        addTitle(title) {
            // 调用 Loading组件中的 getTitle
            return notification.getTitle(title);
        },
        destroy() { // 销毁组件
            // 方式一：ReactDOM.unmountComponentAtNode(div)
            // 方式二:
            document.body.removeChild(div)
        }
    }
}

// 2. 调用组件渲染显示方法
var notification = false;
const LoadingShow = (title) => {
	// 如果  notification 不存在，将 createNotification 赋给 notification
    // 此时的 notification = createNotification()方法
    if(!notification) notification = createNotification()
    // 调用 createNotification()方法中的addTitle()方法，
    return notification.addTitle(title)
}

// 3. 调用组件销毁隐藏方法
const LoadingHide = () => {
    notification.destroy()
    notification = false
    return;
}

// 4. 将方法模块暴露
export default {
    Show(title) {
        return LoadingShow(title)
    },
    Hide() {
        return LoadingHide()
    }
}

// loading组件就很简单了

import React from 'react'

class Loading extends React.Component {
    constructor() {
        super()
        this.state = {
            title: ''
        }
    }
    getTitle(title) {
        this.setState({
            title
        })
    }
    render() {
        return (
        	<div className="loading" >
            	{this.state.title}
            </div>
        )
    }
}

// App.js
import React from 'react';
import Loading from './components/loading'
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <button onClick={() => { Loading.Show("加载页面") }}>Loading</button>
        <button onClick={() => { Loading.Hide() }}>关闭Loading</button>
      </header>
    </div>
  );
}
export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import Toast from './toast';
import './toast.scss';
const div = document.createElement("div");
const component = ReactDOM.render(<Toast />, div);
document.body.append(div);
function createToast() {
    return {
        addComponent(toast) {
            if (toast.duration > 0) {
                setTimeout(() => {
                    notification = false;
                    document.body.removeChild(div);
                }, toast.duration);
            }
            return component.addComponent(toast);
        },
        destory() {
            document.body.removeChild(div);
        }
    }


}
createToast()
let notification = false;
/**
  type: Toast类型
  content: 文字
  duration：显示时间
  onClose: 回调事件
*/
const toastFunc = (type, content, duration = 2000, onClose) => {
    if (!notification) notification = createToast();
    return notification.addComponent({ type, content, duration, onClose })
}

const hide = () => {
    notification.destory()
    notification = false;
    return;
}
export default {
    info(content, duration, onClose) {
        return toastFunc('info', content, duration, onClose);
    },
    success(content = "操作成功", duration, onClose) {
        return toastFunc('success', content, duration, onClose);
    },
    error(content, duration, onClose) {
        return toastFunc('error', content, duration, onClose);
    },
    loading(content = '加载中...', duration = 0, onClose) {
        return toastFunc('loading', content, duration, onClose)
    },
    hide() {
        return hide()
    }
}

import { lazy } from 'react';
const Home = lazy(() => import('./Pages/Home'));
const Goods = lazy(() => import('./Pages/Goods'));
const WantBuy = lazy(() => import('./Pages/WantBuy'));
const User = lazy(() => import('./Pages/User'));
const Login = lazy(() => import('./Pages/Login'));
export default [
    { path: "/", name: "Home", component: Home },
    { path: "/home", name: "Home", component: Home },
    { path: "/goods", name: "Goods", component: Goods },
    { path: "/wantbuy", name: "WantBuy", component: WantBuy },
    { path: "/user", name: "User", component: User , auth: true },
    { path: "/login", name: "Login", component: Login }
]

import React, { Fragment, Suspense } from 'react';
import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom";
import routerMap from './routerMap';

function App(props) {
  let token = sessionStorage.getItem("token");
  return (
    <Router>
      <Fragment>
        <Suspense fallback={<div>{null}</div>}>
          <Switch>
            {
              routerMap.map((item, index) => {
                return (
                  <Route
                    key={index}
                    path={item.path}
                    exact
                    render={props =>
                      (!item.auth ?
                        (<item.component {...props} />)
                        :
                        (token ? <item.component {...props} /> : <Redirect to={{
                          pathname: '/login',
                          state: { from: props.location }
                        }} />)
                      )
                    }
                  />
                )
              })
            }
            // 所有错误路由跳转页面
            <Route component={NotFound} />
          </Switch>
        </Suspense>
      </Fragment>
    </Router>
  )
}
export default App;

// 登录成功方法
setToken() {
  let token = sessionStrorge("token");
  if(!token) return;
  let RedirectUrl = this.props.location.state ? this.props.location.state.from.pathname : '/';
  this.props.history.push(RedirectUrl)
}