feat: readme.md

Author: Sylvenas

README.md

@@ -12,7 +12,11 @@
 
 catch-react-error 正是来解决这个问题的，catch-react-error 在客户端渲染的时候正常使用`ErrorBoundary` 包裹组件；在服务端渲染的时候，使用 try-catch 包裹 render 函数, 这样则可以在同构应用中完美的处理 React 生命周期中发生的错误
 
-## example
+## Demo
+
+<div style="text-align:center" align="center">
+  <img src="https://p1.music.126.net/6tHW45dHH_qKtCw0rrkJOg==/109951164571395030.gif" />
+</div>
 
 ### client side render
 

example-server/pages/index.css

@@ -2,3 +2,60 @@
 iframe {
   display: none !important;
 }
+
+.App {
+  /* background: rgb(241, 243, 244); */
+}
+
+.btns {
+  display: flex;
+  justify-content: space-around;
+  margin-bottom: 30px;
+}
+
+.btn {
+  width: 100px;
+  height: 30px;
+  border-radius: 75px;
+  background: rgb(241, 243, 244);
+  color: #217ce8;
+  font-size: 16px;
+  /* outline: none; */
+  border: none;
+}
+
+.btn:active {
+  transform: scale(1.2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+
+/* .btn:hover {
+  background: gainsboro;
+
+} */
+
+h1 {
+  text-align: center;
+  margin: 0;
+  height: 45px;
+}
+
+div {
+  line-height: 45px;
+  font-size: 20px;
+  text-align: center;
+}
+
+.ok-btn {
+  width: 200px;
+}
+
+.ok-desc {
+  line-height: 20px;
+  text-align: left;
+  font-size: 16px;
+}
+
+.ok-content {
+  line-height: 20px;
+}

example-server/pages/index.js

@@ -1,69 +1,51 @@
-import React from "react";
-// import catchreacterror, { DefaultErrorBoundary } from "./dist";
-import catchreacterror, { DefaultErrorBoundary } from "catch-react-error";
+import React, { useState } from "react";
+import catchreacterror, { DefaultErrorBoundary } from "./dist";
+
 import "./index.css";
 
 function App() {
+  const [count, setCount] = useState(0);
+  const [content, setContent] = useState([]);
   return (
     <div className="App">
-      <header className="App-header">
-        <h1>这是正常展示内容</h1>
-      </header>
-      <Test></Test>
-      <SafeContent />
+      <SaleCount count={count} />
+      <section className="btns">
+        <button className="btn" onClick={() => setCount(count => count + 1)}>
+          +
+        </button>
+        <button className="btn" onClick={() => setCount(count => count - 1)}>
+          -
+        </button>
+      </section>
+      <hr />
+      <section>
+        <p className="ok-desc">
+          Although the Count Component was crashed, but this part was not
+          affected
+        </p>
+        <button
+          className="btn ok-btn"
+          onClick={() => {
+            setContent(content => ["clicked!", ...content]);
+          }}
+        >
+          I'm OK, click me !
+        </button>
+        {content.map(x => (
+          <p className="ok-content">{x}</p>
+        ))}
+      </section>
     </div>
   );
 }
 
-class Test extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      foo: 1
-    };
-    this.buttonRef = React.createRef();
-  }
-
-  render() {
-    const { foo } = this.state;
-    console.log(foo);
-    return (
-      <div>
-        <Foo test="foo" />
-        <Button text="click me" ref={this.buttonRef} />
-        <Label list={["a", "abc", null, "abcd"]} />
-      </div>
-    );
-  }
-
-  componentDidMount() {
-    console.log(this.buttonRef.current);
+function Count({ count }) {
+  if (count === 3) {
+    throw new Error("count is three");
   }
+  return <h1>{count}</h1>;
 }
-@catchreacterror()
-class Button extends React.Component {
-  click() {
-    console.log("button click");
-  }
-  render() {
-    const emptyObj = {};
-    console.log(emptyObj.a.b);
-    return <button onClick={this.click}>click me</button>;
-  }
-}
-
-const Label = ({ list }, b, c) => {
-  return list.map(x => <SafeContent x={x} kye={x} />);
-};
-
-const Content = (props, b, c) => {
-  return <div>{props.x.length}</div>;
-};
-
-const SafeContent = catchreacterror(DefaultErrorBoundary)(Content);
 
-const Foo = (a, b, c) => {
-  return <p>Foo</p>;
-};
+const SaleCount = catchreacterror()(Count);
 
 export default App;