就差echart类

Author: introvert-y

.prettierrc.js

@@ -1,4 +1,5 @@
 module.exports = {
   printWidth: 120, //一行的字符数，如果超过会进行换行，默认为80
-  tabWidth: 2 //一个tab代表几个空格数，默认为2
+  tabWidth: 2, //一个tab代表几个空格数，默认为2
+  trailingComma: "es5", // 对象属性最后有 ","
 };

src/page/Counter/index.js

@@ -3,38 +3,39 @@ import PropTypes from "prop-types";
 import React from "react";
 
 const mapStateToProps = state => ({
-  value: state.count
+  value: state.count,
 });
 
 const mapDispatchToProps = {
   onIncreaseClick: () => ({
     type: "increase",
-    count: 10
+    count: 10,
   }),
   onDecreaseClick: () => ({
     type: "decrease",
-    count: 10
+    count: 10,
   }),
   changeName: () => ({
-    type: "changeName"
-  })
+    type: "changeName",
+  }),
 };
 
 function Page({ onIncreaseClick, onDecreaseClick, changeName }) {
   return (
-    <div style={{ marginLeft: 50 }}>
+    <div style={{ marginLeft: 50, width: 500 }}>
       {/* <h1>{value}</h1> */}
-      <p>
-        react-redux的异步流实现，是通过拦截派发给reducer的事件实现的，例如派发了一个改变全局状态中name的变化，同时循环执行其他操作
+      <p style={{ fontSize: 20 }}>
+        react-redux的异步流实现，是通过拦截派发给reducer的事件实现的，例如派发了一个改变全局状态name的事件，通过拦截执行其他操作，这里用定时器3秒模拟请求操作，请求成功后再派发改变值的事件.这个过程也可以当做获取全局通知消息的过程。
       </p>
+      <h3 style={{ marginBottom: 10 }}>可打开控制台查看操作日志</h3>
       <button type="button" onClick={onIncreaseClick}>
         +
       </button>
       <button type="button" style={{ marginLeft: 50 }} onClick={onDecreaseClick}>
         -
       </button>
       <button type="button" style={{ marginLeft: 50 }} onClick={changeName}>
-        异步流改变全局状态中的名字，延迟5秒
+        异步流改变全局状态中的名字
       </button>
     </div>
   );
@@ -43,7 +44,7 @@ function Page({ onIncreaseClick, onDecreaseClick, changeName }) {
 Page.propTypes = {
   onIncreaseClick: PropTypes.func.isRequired,
   onDecreaseClick: PropTypes.func.isRequired,
-  changeName: PropTypes.func.isRequired
+  changeName: PropTypes.func.isRequired,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Page);

src/page/CssTest/index.js

@@ -3,7 +3,7 @@ import styled from "styled-components";
 import style from "./index.module.css";
 
 const StyledDiv = styled.div`
-  width: 300px;
+  width: 500px;
   height: 300px;
   text-align: center;
   .blue_color {

src/page/Optimize/index.js

@@ -2,40 +2,12 @@ import React, { useState } from "react";
 import styled from "styled-components";
 import PropTypes from "prop-types";
 import { Radio, Button } from "antd";
-import { CSSTransition } from "react-transition-group";
+// import { CSSTransition } from "react-transition-group";
 
 const StyledDiv = styled.div`
   width: 500px;
   height: 300px;
   text-align: center;
-  .line {
-    height: 50px;
-    line-height: 50px;
-  }
-  .line-height button {
-    background-color: black;
-    color: #fff;
-  }
-  .fade-enter {
-    opacity: 0;
-  }
-  .fade-enter-active {
-    opacity: 1;
-    transition: opacity 2000ms;
-  }
-  .fade-enter-done {
-    opacity: 1;
-  }
-  .fade-exit {
-    opacity: 1;
-  }
-  .fade-exit-active {
-    opacity: 0;
-    transition: opacity 2000ms;
-  }
-  .fade-exit-done {
-    opacity: 0;
-  }
 `;
 function Page() {
   const [color, setColor] = useState("blue");
@@ -50,23 +22,16 @@ function Page() {
 
   return (
     <StyledDiv>
-      <h4>若父组件选择了blue按钮，子组件则不重复render</h4>
+      <h2>若父组件选择了yellow按钮，子组件则不重复render,可打开控制台查看console</h2>
+      <h3>
+        这个过程是在子组件里做的处理，也可以在父组件里setValue的时候，如果Value等于yellow就return，也可以达到这种效果
+      </h3>
       <Radio.Group value={color} onChange={changeTab}>
         <Radio.Button value="blue">blue</Radio.Button>
         <Radio.Button value="red">red</Radio.Button>
         <Radio.Button value="yellow">yellow</Radio.Button>
       </Radio.Group>
-      <Button style={{ marginLeft: 40 }} type="primary" onClick={() => setShow(!show)}>
-        toggleShow
-      </Button>
-      <CSSTransition
-        in={show} // 用于判断是否出现的状态
-        timeout={800} // 动画持续时间
-        classNames="fade" // className值，防止重复
-        unmountOnExit
-      >
-        <Son color={color} />
-      </CSSTransition>
+      <Son color={color} />
     </StyledDiv>
   );
 }
@@ -88,7 +53,7 @@ class Son extends React.Component {
   }
 }
 Son.propTypes = {
-  color: PropTypes.string.isRequired
+  color: PropTypes.string.isRequired,
 };
 
 export default Page;

src/page/form/index.js

@@ -24,28 +24,34 @@ function Page({ form }) {
     });
   }
   return (
-    <Form
-      labelCol={{
-        span: 6
-      }}
-      wrapperCol={{
-        span: 18
-      }}
-    >
-      <Form.Item label="原因：">
-        {getFieldDecorator("text", {
-          rules: [{ required: true, message: "Please input your username!" }]
-        })(<TextArea placeholder="请输入拒绝原因，必填" />)}
-      </Form.Item>
-      <Button onClick={() => onSubmit()} disabled={!getFieldValue("text")}>
-        提交
-      </Button>
-    </Form>
+    <>
+      <h2>这里做了两件事</h2>
+      <h3>1.解决路由跳转的时候，ant-design的modal和message组件不关闭问题，需要全局监听，处理在/router/index.js中</h3>
+      <h3 style={{ marginBottom: 20 }}>2.下面实现的是输入内容才能点击提交按钮，否则按钮为disable</h3>
+      <Form
+        labelCol={{
+          span: 6,
+        }}
+        wrapperCol={{
+          span: 18,
+        }}
+        style={{ width: 500, textAlign: "center" }}
+      >
+        <Form.Item label="原因：">
+          {getFieldDecorator("text", {
+            rules: [{ required: true, message: "Please input your username!" }],
+          })(<TextArea placeholder="请输入拒绝原因，必填" />)}
+        </Form.Item>
+        <Button onClick={() => onSubmit()} disabled={!getFieldValue("text")}>
+          提交
+        </Button>
+      </Form>
+    </>
   );
 }
 
 Page.propTypes = {
-  form: PropTypes.object.isRequired
+  form: PropTypes.object.isRequired,
 };
 
 export default Form.create({ name: "edit_cause" })(Page);

src/page/memo/index.js

@@ -6,14 +6,15 @@ function MyComponent({ name }) {
   console.log("子组件渲染了");
   return <div>{name}</div>;
 }
-function areEqual() {
-  // areEqual(prevProps, nextProps)
-  // true则不重新渲染， 相反则重新渲染
-  return true;
-}
+// function areEqual() {
+//   // areEqual(prevProps, nextProps)
+//   // true则不重新渲染， 相反则重新渲染
+//   return true;
+// }
 
 MyComponent.propTypes = {
-  name: PropTypes.string.isRequired
+  name: PropTypes.string.isRequired,
 };
 
-export default React.memo(MyComponent, areEqual);
+// export default React.memo(MyComponent, areEqual);
+export default React.memo(MyComponent);

src/page/memoParent/index.js

@@ -2,21 +2,23 @@ import React, { useState } from "react";
 import Memo from "../memo/index";
 
 function Page() {
-  const [name, setName] = useState("Ming");
-  const count = 10;
+  const [name, setName] = useState("GAY");
   return (
-    <div style={{ marginLeft: 50 }}>
-      <h2>子组件在任何情况下都不重新渲染</h2>
+    <div style={{ marginLeft: 50, width: 500 }}>
+      <h2>
+        “浅比较”的模式来检查 props 和 state
+        中所有的字段，变化则渲染，否则复用之前的渲染。也可通过shouldComponentUpdate手动实现
+      </h2>
       <p>{name}</p>
-      <button type="button" onClick={() => setName("Ming")}>
-        Ming
+      <button type="button" onClick={() => setName("Anny")}>
+        changeName to Anny
+      </button>
+      <button type="button" onClick={() => setName("Den")} style={{ marginLeft: 50 }}>
+        changeName to Den
       </button>
       <br />
       <br />
-      <button type="button" onClick={() => setName("Anny")}>
-        Anny
-      </button>
-      <Memo name={count} />
+      <Memo name={name} />
     </div>
   );
 }

src/page/promise/index.js

@@ -18,6 +18,8 @@ function Page() {
   useEffect(() => {
     getCrtUserInfos();
   }, []);
+
+  return "11111";
 }
 
 export default Page;

src/page/reducer/index.js

@@ -18,10 +18,10 @@ function caculateName(name, action) {
   }
 }
 
-const reducer = (state = { count: 0, name: "Ming" }, action) => ({
+const reducer = (state = { count: 0, name: "Ming", messageCount: 0 }, action) => ({
   ...state,
   count: caculateNum(state.count, action),
-  name: caculateName(state.name, action)
+  name: caculateName(state.name, action),
 });
 
 export default reducer;