更新需求内容.

README.md

 ## 测试项目
 
-### 1. 需求实现
+### 需求实现
 
-- App 组件内, 实现 Icon 跟随鼠标移动.
+- App 组件内, 在组件挂载完成后, 发起网络请求获取接口数据 并定义数据结构  url: '/public/res.json'
 
-### 2. 函数修改
+- 根据网络请求结果进行组件渲染.
 
-- 改进 AppFunction.ts 内 foo 方法的实现.
\ No newline at end of file
+components
+
+|  type   |     说明    |
+|  ----   |    ----    |
+| img     | 渲染图片组件 |
+| text    | 渲染文本内容 |

public/index.html

@@ -21,9 +21,6 @@
         -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
     }
 
-    #react-test-project{
-        margin: 80px;
-    }
 </style>
 </head>
 

public/res.json

 {
-  "title": "title"
+  "title": "title",
+  "components": [
+    {
+      "type": "image",
+      "data": "/test-assets/fp100-raw/R0012129/thumb.jpg"
+    },
+    {
+      "type": "image",
+      "data": "/test-assets/fp100-raw/R0012133/thumb.jpg"
+    },
+    {
+      "type": "text",
+      "data": "hello world"
+    }
+  ]
 }

src/component/App.tsx

@@ -6,8 +6,6 @@
 
 import 'antd/dist/antd.css';
 import * as React from 'react';
-import {Icon} from 'antd';
-import {ChildComponent} from './ChildComponent';
 
 interface AppProps {
 }
@@ -23,13 +21,8 @@ export class App extends React.Component<AppProps, AppState> {
     }
 
     render() {
-        const children = [];
-        for (let i = 0; i < 5000; i++) {
-            children.push(<ChildComponent index={i} key={i}/>);
-        }
         return <div>
-            <Icon type="fullscreen-exit" />
-            {children}
+            App
         </div>;
     }
 }

src/component/ChildComponent.tsx

-/**
- * 子组件
- * @author uglyer
- * @date 2020/1/7 9:45
- */
-
-import * as React from 'react';
-import {} from 'antd';
-
-interface ChildComponentProps {
-    index: number;
-}
-
-interface ChildComponentState {
-}
-
-export class ChildComponent extends React.Component<ChildComponentProps, ChildComponentState> {
-
-    constructor(props: ChildComponentProps) {
-        super(props);
-        this.state = {};
-    }
-
-    render() {
-        return <div>ChildComponent:{this.props.index}</div>;
-    }
-}

src/function/AppFunction.ts

-/**
- * 常用方法
- * @author uglyer
- * @date 2020/1/7 9:24
- */
-
-/**
- * 一个需要被改进的方法
- * @param test1 测试参数
- * @param handler 函数被正常执行结束回调
- */
-function foo(test1: { foo?: number, foo2?: (index: number, fooValue: number) => void }, handler: () => void) {
-    if (test1) {
-        if (test1.foo) {
-            if (test1.foo2) {
-                for (let i = 0; i < 10; i++) {
-                    test1.foo2(i, test1.foo);
-                    // do something A
-                }
-                if (handler) {
-                    handler();
-                }
-            } else {
-                // do something B
-            }
-        } else {
-            // do something C
-        }
-    } else {
-        // do something D
-    }
-}

webpack.config.js

@@ -108,7 +108,7 @@ module.exports = {
     devServer: {
         contentBase: path.join(__dirname, './'),
         compress: true,
-        port: 7799,
+        port: 7798,
         useLocalIp: true,
         host: '0.0.0.0',
         overlay: true,
@@ -121,16 +121,8 @@ module.exports = {
             ]
         },
         proxy: {
-            '/api': {
-                target: 'http://police.reality3d.cn',
-                changeOrigin: true
-            },
-            '/file': {
-                target: 'http://police.reality3d.cn',
-                changeOrigin: true
-            },
-            '/map': {
-                target: 'http://127.0.0.1:5000',
+            '/test-assets': {
+                target: 'http://nas.reality3d.cn:30002',
                 changeOrigin: true
             }
         }