v1.4.0

修复 #10 #11 #12 提到的转义问题；
更新 npm 依赖；
完善多处细节，提升渲染效率；

package.json

@@ -1,14 +1,15 @@
 {
   "name": "uptime-status",
-  "version": "1.3.0",
+  "version": "1.4.0",
   "private": true,
   "dependencies": {
     "axios": "^0.19.2",
-    "dayjs": "^1.8.22",
-    "react": "^16.13.0",
-    "react-dom": "^16.13.0",
-    "react-scripts": "^3.4.0",
-    "react-tooltip": "^4.1.2"
+    "dayjs": "^1.8.31",
+    "htmr": "^0.8.8",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-scripts": "^3.4.1",
+    "react-tooltip": "^4.2.7"
   },
   "scripts": {
     "start": "react-app-rewired start",
@@ -30,7 +31,7 @@
     ]
   },
   "devDependencies": {
-    "react-app-rewired": "^2.1.5"
+    "react-app-rewired": "^2.1.6"
   },
   "homepage": "./"
 }

src/components/app.js

@@ -1,11 +1,16 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Header from './header';
 import Footer from './footer';
 import Uptime from './uptime';
 
 const App = () => {
+
   const { ApiKeys, SiteName } = window.Config;
-  window.document.title = SiteName;
+
+  useEffect(() => {
+    window.document.title = SiteName;
+  }, [SiteName]);
+
   return (
     <>
       <Header />

src/components/header.js

@@ -8,9 +8,9 @@ const Header = () => {
       <div className="container">
         <a className="logo" href={SiteUrl}>{SiteName}</a>
         <div className="navi">
-        {Navi.map((item, index) => (
-          <Link key={index} text={item.text} to={item.url} />
-        ))}
+          {Navi.map((item, index) => (
+            <Link key={index} text={item.text} to={item.url} />
+          ))}
         </div>
       </div>
     </div>

src/components/uptime-block.js

@@ -1,25 +1,26 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { formatDuration, fixed } from '../utils/helper';
 
 const UptimeBlock = (props) => {
 
   const { data } = props;
-
-  let status = '';
-  let text = data.date.format('YYYY-MM-DD');
-
-  if (data.uptime >= 100) {
-    status = 'ok';
-    text += ` 可用率 ${fixed(data.uptime)}%`;
-  }
-  else if (data.uptime <= 0 && data.down.times === 0) {
-    status = 'none';
-    text += ' 无数据';
-  }
-  else {
-    status = 'down';
-    text += ` 故障 ${data.down.times} 次，累计 ${formatDuration(data.down.duration)}，可用率 ${fixed(data.uptime)}%`;
-  }
+  const { status, text } = useMemo(() => {
+    let status = '';
+    let text = data.date.format('YYYY-MM-DD');
+    if (data.uptime >= 100) {
+      status = 'ok';
+      text += ` 可用率 ${fixed(data.uptime)}%`;
+    }
+    else if (data.uptime <= 0 && data.down.times === 0) {
+      status = 'none';
+      text += ' 无数据';
+    }
+    else {
+      status = 'down';
+      text += ` 故障 ${data.down.times} 次，累计 ${formatDuration(data.down.duration)}，可用率 ${fixed(data.uptime)}%`;
+    }
+    return { status, text };
+  }, [data]);
 
   return (
     <i className={status} data-tip={text}></i>

src/components/uptime-item.js

@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useMemo } from 'react';
+import htmr from 'htmr';
 import ReactTooltip from 'react-tooltip';
 import UptimeBlock from './uptime-block';
 import Link from './link';
@@ -8,23 +9,29 @@ const UptimeItem = (props) => {
 
   const { ShowLink, CountDays } = window.Config;
   const { monitor } = props;
-  const initial = monitor.daily[monitor.daily.length - 1].date;
+
   const status = {
     ok: '正常',
     down: '无法访问',
     unknow: '未知'
   };
 
-  const total = monitor.total.times
-    ? `最近 ${CountDays} 天故障 ${monitor.total.times} 次，累计 ${formatDuration(monitor.total.duration)}，平均可用率 ${monitor.average}%`
-    : `最近 ${CountDays} 天可用率 ${monitor.average}%`;
+  const total = useMemo(() => {
+    return monitor.total.times
+      ? `最近 ${CountDays} 天故障 ${monitor.total.times} 次，累计 ${formatDuration(monitor.total.duration)}，平均可用率 ${monitor.average}%`
+      : `最近 ${CountDays} 天可用率 ${monitor.average}%`;
+  }, [CountDays, monitor]);
+
+  const initial = useMemo(() => {
+    return monitor.daily[monitor.daily.length - 1].date;
+  }, [monitor]);
 
   return (
     <div className="item">
       <div className="meta">
         <div className="info">
-          <span className="name">{monitor.name}</span>
-          {ShowLink && <Link className="link" to={monitor.url} text={monitor.name} />}
+          <span className="name">{htmr(monitor.name)}</span>
+          {ShowLink && <Link className="link" to={monitor.url} text={htmr(monitor.name)} />}
         </div>
         <div className={`status ${monitor.status}`}>{status[monitor.status]}</div>
       </div>

src/components/uptime.js

@@ -6,17 +6,15 @@ const Uptime = (props) => {
 
   const { CountDays } = window.Config;
   const { apikey } = props;
-  const [ monitors, setMonitors ] = useState(null);
+  const [monitors, setMonitors] = useState(null);
 
   useEffect(() => {
     GetMonitors(apikey, CountDays).then(setMonitors);
-  }, [apikey]);
+  }, [apikey, CountDays]);
 
   return monitors ? monitors.map(item => (
     <UptimeItem key={item.id} monitor={item} />
-  )) : (
-    <div className="item loading"></div>
-  );
+  )) : <div className="item loading"></div>;
 }
 
 export default Uptime;