Merge pull request #1 from bubucuo/season23

lesson5-dva/src/routes/ExamplePage.js

@@ -20,7 +20,11 @@ const columns = [
   }
 ];
 
-@connect(({ example }) => ({ example }), {
+@connect((state) => {
+  // example
+  console.log(state, 'state');
+  return {example: state.example}
+}, {
   getProductData: payload => ({ type: "example/getProductData", payload })
 })
 class ExamplePage extends Component {

lesson6-dva/src/dynamic/index.js

@@ -6,3 +6,5 @@ export const UserPageDynamic = dynamic({
   models: () => [import("../models/user")],
   component: () => import("../routes/UserPage")
 });
+
+// console.log(dynamic().setDefaultLoadingComponent());

lesson6-dva/src/index.js

@@ -20,3 +20,6 @@ app.router(require("./router").default);
 
 // 5. Start
 app.start("#root");
+
+
+

lesson6-dva/src/models/example.js

@@ -1,5 +1,6 @@
 import { getProductData } from "../services/product";
 
+
 // {
 //  _namespace : {//具体的model}
 // }
@@ -15,6 +16,7 @@ export default {
 
   subscriptions: {
     setup({ dispatch, history }) {
+
       // eslint-disable-line
       console.log("example subscriptions"); //sy-log
     }

lesson6-dva/src/models/user.js

@@ -22,3 +22,4 @@ export default {
     }
   }
 };
+

lesson6-umi/.umirc.ts

@@ -23,7 +23,7 @@ export default defineConfig({
     {
       path: '/product/:id',
       component: '@/pages/product/_layout',
-      routes: [{ path: '/product/:id', component: '@/pages/product/[id]' }],
+      routes: [{ path: '/product/abc/:id', component: '@/pages/product/[id]' }],
     },
   ],
 });

lesson6-umi/package.json

@@ -21,6 +21,7 @@
   },
   "dependencies": {
     "@ant-design/pro-layout": "^5.0.15",
+    "@ant-design/pro-table": "^2.10.1",
     "@umijs/preset-react": "1.x",
     "@umijs/test": "^3.2.3",
     "lint-staged": "^10.0.7",

lesson6-umi/src/pages/more/index.tsx

@@ -1,9 +1,12 @@
 import React from 'react';
 import { PageHeaderWrapper } from '@ant-design/pro-layout';
 import { Form, Input, Button, Card, Table } from 'antd';
+import {getProductData} from '../../services/product.js';
 import { connect } from 'umi';
 import styles from './index.less';
 
+import ProTable from '@ant-design/pro-table';
+
 const columns = [
   {
     title: '姓名',
@@ -30,14 +33,14 @@ class More extends React.Component {
   }
 
   componentDidMount() {
-    this.props.getProductData({ name: '' });
+    // this.props.getProductData({ name: '' });
   }
 
   // 成功才会执行这个函数
   onFinish = values => {
     console.log('values', values); // sy-log
     // this.props.getMoreDataBySearch(values);
-    this.props.getProductData(values);
+    // this.props.getProductData(values);
   };
 
   // 失败才会执行这个函数
@@ -46,30 +49,57 @@ class More extends React.Component {
   };
 
   render() {
-    const { data } = this.props.more;
+    // const { data } = this.props.more;
+    // const {getProductData} = this.props;
     return (
-      <PageHeaderWrapper className={styles.more}>
-        <Card>
-          <Form onFinish={this.onFinish} onFinishFailed={this.onFinishFailed}>
-            <Form.Item
-              label="姓名"
-              name="name"
-              rules={[{ required: true, message: '请输入姓名' }]}
-            >
-              <Input placeholder="请输入姓名" />
-            </Form.Item>
-            <Form.Item>
-              <Button type="primary" htmlType="submit">
-                查询
-              </Button>
-            </Form.Item>
-          </Form>
-        </Card>
+      // <PageHeaderWrapper className={styles.more}>
+      //   <Card>
+      //     <Form onFinish={this.onFinish} onFinishFailed={this.onFinishFailed}>
+      //       <Form.Item
+      //         label="姓名"
+      //         name="name"
+      //         rules={[{ required: true, message: '请输入姓名' }]}
+      //       >
+      //         <Input placeholder="请输入姓名" />
+      //       </Form.Item>
+      //       <Form.Item>
+      //         <Button type="primary" htmlType="submit">
+      //           查询
+      //         </Button>
+      //       </Form.Item>
+      //     </Form>
+      //   </Card>
+
+      //   <Card>
+      //     <Table columns={columns} dataSource={data} rowKey="id" />
+      //   </Card>
+      // </PageHeaderWrapper>
+
+
+      <div>
+        {/* 暗号：双十一打骨折 zhidl */}
+        <ProTable
+          headerTitle="表格"
+          rowKey="id"
+          columns={columns}
+          request={(params) => (
+            getProductData(params).then(value => {
+              console.log(params, value.data);
+              return value.data;
+              // return {
+              //   data: [
+              //     {id:0, name: '1', age: 2, city: 'bj'}
+              //   ]
+              // }
+            })
+          )
+
+        }
+        >
 
-        <Card>
-          <Table columns={columns} dataSource={data} rowKey="id" />
-        </Card>
-      </PageHeaderWrapper>
+        </ProTable>
+      </div>
+
     );
   }
 }
@@ -78,14 +108,14 @@ export default connect(
   // mapStateToProps
   ({ more }) => ({ more }),
   // mapDispatchToProps
-  {
-    getProductData: values => ({
-      type: 'more/getProductData',
-      payload: values,
-    }),
+  // {
+    // getProductData: values => ({
+    //   type: 'more/getProductData',
+    //   payload: values,
+    // }),
     // getMoreDataBySearch: values => ({
     //   type: 'more/getMoreDataBySearch',
     //   payload: values,
     // }),
-  },
+  // },
 )(More);

lesson6-umi/src/pages/product/[id].js

@@ -5,6 +5,7 @@ export default props => {
   const { id } = props.match.params;
   return (
     <div>
+      111
       <h1 className={styles.title}>Page product/[id]:{id}</h1>
     </div>
   );

lesson7/src/index.js

@@ -1,4 +1,4 @@
-// import React, {Component} from "react";
+import React from "react";
 // import ReactDOM from "react-dom";
 import ReactDOM from "./kreact/react-dom";
 import Component from "./kreact/Component";

lesson7/src/kreact/react-dom.js

@@ -3,7 +3,7 @@
 
 // container  node是node节点
 function render(vnode, container) {
-  console.log("vnode", vnode, container); //sy-log
+  // console.log("vnode", vnode, container); 
 
   // step1 : vnode->node
   const node = createNode(vnode);
@@ -14,7 +14,6 @@ function render(vnode, container) {
 function createNode(vnode) {
   let node = null;
   // todo vnode->node
-
   const {type} = vnode;
   if (typeof type === "string") {
     // 原生标签
@@ -27,15 +26,17 @@ function createNode(vnode) {
   } else {
     node = createFragmentComponent(vnode);
   }
-
   return node;
 }
-
 //原生标签节点处理
 function updateHostComponent(vnode) {
   const {type, props} = vnode;
-  let node = document.createElement(type);
-
+  let node = null;
+  if(typeof type === 'string'){
+    node = document.createElement(type);
+  } else {
+    node = document.createDocumentFragment();
+  }
   if (typeof props.children === "string") {
     let childText = document.createTextNode(props.children);
     node.appendChild(childText);

lesson9/src/Callback.jsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { useState, useCallback, PureComponent } from 'react';
+export default function UseCallbackPage(props) {
+  const [ count, setCount ] = useState(0);
+  // 暗号：椰子 zhidl
+	// const addClick = () => {
+	// 	let sum = 0;
+	// 	for (let i = 0; i < count; i++) {
+	// 		sum += i;
+	// 	}
+	// 	return sum;
+  // };
+
+  const addClick = useCallback((a) => {
+    let sum = 0;
+		for (let i = 0; i < count; i++) {
+			sum += i;
+		}
+		return sum;
+  }, [count])
+
+	const [ value, setValue ] = useState('');
+	return (
+		<div>
+			<h3>UseCallbackPage</h3>
+			<p>{count}</p>
+			<button onClick={() => setCount(count + 1)}>add</button>
+			<input value={value} onChange={(event) => setValue(event.target.value)} /> <Child addClick={addClick} />
+		</div>
+	);
+}
+
+class Child extends PureComponent {
+	render() {
+		console.log('child render');
+		const { addClick } = this.props;
+		return (
+			<div>
+				<h3>Child</h3>
+				<button onClick={() => console.log(addClick())}>add</button>
+			</div>
+		);
+	}
+}

lesson9/src/Memo.jsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { useState, useMemo } from 'react';
+export default function UseMemoPage(props) {
+
+
+	const [ count, setCount ] = useState(0);
+  const [ value, setValue ] = useState('');
+
+
+	// const expensive = () => {
+
+
+  // };
+
+  // 暗号：椰子
+  const expensive = useMemo(() => {
+    console.log('compute');
+    let sum = 0;
+		for (let i = 0; i < count; i++) {
+			sum += i;
+		}
+		return sum;
+  }, [count])
+	return (
+		<div>
+			<h3>UseMemoPage</h3>
+			<p>expensive:{expensive}</p>
+			<p>{count}</p>
+			<button onClick={() => setCount(count + 1)}>add</button>
+			<input value={value} onChange={(event) => setValue(event.target.value)} />
+		</div>
+	);
+}