update

Author: introvert-y

src/index.js

@@ -1,56 +1,61 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import AppRouter from './router/index.js';
-// import thunkMiddleware from 'redux-thunk'
-import * as serviceWorker from './serviceWorker';
+
 import { createStore, applyMiddleware } from 'redux';
-import { createLogger } from 'redux-logger'
+// import { createLogger } from 'redux-logger';
+import { Provider } from 'react-redux';
 
 import reducer from './page/reducer/index';
-import { Provider } from 'react-redux';
-import req from './req/index.js'
+import req from './req/index';
+import AppRouter from './router/index';
+// import thunkMiddleware from 'redux-thunk'
+import * as serviceWorker from './serviceWorker';
 
-const loggerMiddleware = createLogger();
+/**
+ * 官方自带的操作显示工具
+ */
+// const loggerMiddleware = createLogger();
 
-const logger = store => next => action => {
-  console.log('dispatching', action)
-  let result = next(action)
-  console.log('next state', store.getState())
-  return result
-}
+const logger = (store) => (next) => (action) => {
+  console.log('dispatching', action);
+  const result = next(action);
+  console.log('next state', store.getState());
+  return result;
+};
 
-const thunkMiddleware = store => next => action => {
+const thunkMiddleware = (store) => (next) => (action) => {
   console.log('拦截了');
   if (action.type === 'changeMessageCount') {
     console.log('符合条件');
     setTimeout(() => {
       req.user.getMyInfo()
-      .then((res) => {
-        if (res.code !== 0) {
-          req.err.show(res);
-          return;
-        }
-        console.log('timerMiddleware', res.data);
-        store.dispatch({ type: 'receiveCount', phone: res.data.mobile });
-      })
-      .catch(req.err.show)
+        .then((res) => {
+          if (res.code !== 0) {
+            req.err.show(res);
+            return;
+          }
+          console.log('timerMiddleware', res.data);
+          store.dispatch({ type: 'receiveCount', phone: res.data.mobile });
+        })
+        .catch(req.err.show);
     }, 2000);
   }
   next(action);
 };
 
 const store = createStore(
   reducer,
-  applyMiddleware(thunkMiddleware, logger)
+  applyMiddleware(thunkMiddleware, logger),
 );
 
 ReactDOM.render(
   <Provider store={store}>
-    < AppRouter / >
-  </Provider> , document.getElementById('root'));
+    <AppRouter />
+  </Provider>, document.getElementById('root'),
+);
 
 // If you want your app to work offline and load faster, you can change
 // unregister() to register() below. Note this comes with some pitfalls.
 // Learn more about service workers: https://bit.ly/CRA-PWA
-serviceWorker.unregister();
+serviceWorker.unregister();

src/page/About/index.js

@@ -4,7 +4,6 @@ import React from 'react';
 
 const mapStateToProps = (state) => ({
   value: state.count,
-  phone: state.phone,
 });
 
 const mapDispatchToProps = {
@@ -23,25 +22,21 @@ const mapDispatchToProps = {
 
 
 function Page({
-  value, phone, onIncreaseClick, onDecreaseClick, changeMessageCount,
+  value, onIncreaseClick, onDecreaseClick,
 }) {
   return (
     <div style={{ marginLeft: 50 }}>
       <h1>{value}</h1>
       <button type="button" onClick={onIncreaseClick}>+</button>
       <button type="button" style={{ marginLeft: 50 }} onClick={onDecreaseClick}>-</button>
-      <button type="button" style={{ marginLeft: 50 }} onClick={changeMessageCount}>redux异步</button>
-      <h2 style={{ marginTop: 20 }}>{phone}</h2>
     </div>
   );
 }
 
 Page.propTypes = {
   value: PropTypes.number.isRequired,
-  phone: PropTypes.number.isRequired,
   onIncreaseClick: PropTypes.func.isRequired,
   onDecreaseClick: PropTypes.func.isRequired,
-  changeMessageCount: PropTypes.func.isRequired,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Page);

src/page/Counter/index.js

@@ -1,6 +1,10 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { CSSTransition } from 'react-transition-group'
+import PropTypes from 'prop-types';
+import {
+  Radio, Button,
+} from 'antd';
+import { CSSTransition } from 'react-transition-group';
 
 
 const StyledDiv = styled.div`
@@ -41,58 +45,57 @@ const StyledDiv = styled.div`
 function Page() {
   const [color, setColor] = useState('blue');
   const [show, setShow] = useState(true);
-  function changeTab(index) {
-    if (color === index) {
+  function changeTab(e) {
+    if (color === e.target.value) {
       return;
     }
-    console.log('改变颜色', index);
-    setColor(index);
-  };
+    // console.log('改变颜色', e.target.value);
+    setColor(e.target.value);
+  }
+
   return (
     <StyledDiv>
       <h4>若父组件选择了blue按钮，子组件则不重复render</h4>
-      <div className={`line ${color === 'blue' && 'line-height'}`}>
-        <button onClick={() => changeTab('blue')}>blue</button>
-      </div>
-      <div className={`line ${color === 'red' && 'line-height'}`}>
-        <button onClick={() => changeTab('red')}>red</button>
-      </div>
-      <div className={`line ${color === 'black' && 'line-height'}`}>
-        <button onClick={() => changeTab('black')}>black</button>
-      </div>
-      <div className="line">
-        <button onClick={() => setShow(!show)}>toggleShow</button>
-      </div>
-      <CSSTransition 
-          in={show}   //用于判断是否出现的状态
-          timeout={800}           //动画持续时间
-          classNames="fade"   //className值，防止重复
-          unmountOnExit
+      <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} />
+        <Son color={color} />
       </CSSTransition>
     </StyledDiv>
-  )
+  );
 }
 
 class Son extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-    }
-  };
-  shouldComponentUpdate(nextProps,nextState){
-    if(nextProps.color !== 'blue'){
-        return true
-    }else{
-        return false
-    }
+    };
   }
+
+  shouldComponentUpdate(nextProps) {
+    return nextProps.color !== 'yellow';
+  }
+
   render() {
-    console.log('来咯来咯');
+    console.log('son render');
+    const { color } = this.props;
     return (
-      <div style={{ color: this.props.color }}>1111</div>
-    )
+      <div style={{ color, marginTop: 20 }}>1111</div>
+    );
   }
 }
+Son.propTypes = {
+  color: PropTypes.string.isRequired,
+};
+
+
 export default Page;

src/page/Optimize/index.js

@@ -21,12 +21,14 @@ function Page() {
         -
         {expensive}
       </h4>
-      {val}
+      {val ? <h4>val</h4> : <h4>请输入内容</h4>}
       <div>
-        <button type="button" onClick={() => setCount(count + 1)}>+c1</button>
-      </div>
-      <div>
-        <input value={val} onChange={(event) => setValue(event.target.value)} />
+        <button type="button" onClick={() => setCount(count + 1)}>add</button>
+        <input
+          style={{ marginLeft: 40 }}
+          value={val}
+          onChange={(event) => setValue(event.target.value)}
+        />
       </div>
     </div>
   );