diff --git a/lesson5-dva/src/routes/ExamplePage.js b/lesson5-dva/src/routes/ExamplePage.js index 5a7f2827..cf453be0 100644 --- a/lesson5-dva/src/routes/ExamplePage.js +++ b/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 { diff --git a/lesson6-dva/src/dynamic/index.js b/lesson6-dva/src/dynamic/index.js index c8c10f4a..4a8ce6a3 100644 --- a/lesson6-dva/src/dynamic/index.js +++ b/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()); \ No newline at end of file diff --git a/lesson6-dva/src/index.js b/lesson6-dva/src/index.js index b091a3ef..4dab0954 100644 --- a/lesson6-dva/src/index.js +++ b/lesson6-dva/src/index.js @@ -20,3 +20,6 @@ app.router(require("./router").default); // 5. Start app.start("#root"); + + + diff --git a/lesson6-dva/src/models/example.js b/lesson6-dva/src/models/example.js index b98eaa6c..7379dbd1 100644 --- a/lesson6-dva/src/models/example.js +++ b/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 } diff --git a/lesson6-dva/src/models/user.js b/lesson6-dva/src/models/user.js index 9b27de59..e34891f0 100644 --- a/lesson6-dva/src/models/user.js +++ b/lesson6-dva/src/models/user.js @@ -22,3 +22,4 @@ export default { } } }; + diff --git a/lesson6-umi/.umirc.ts b/lesson6-umi/.umirc.ts index 45c0f661..7dd909da 100644 --- a/lesson6-umi/.umirc.ts +++ b/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]' }], }, ], }); diff --git a/lesson6-umi/package.json b/lesson6-umi/package.json index 336fcf7c..749a985c 100644 --- a/lesson6-umi/package.json +++ b/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", diff --git a/lesson6-umi/src/pages/more/index.tsx b/lesson6-umi/src/pages/more/index.tsx index 9a344e62..f763f3cc 100644 --- a/lesson6-umi/src/pages/more/index.tsx +++ b/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 ( - - -
- - - - - - -
- + // + // + //
+ // + // + // + // + // + // + //
+ // + + // + // + // + // + + +
+ {/* 暗号：双十一打骨折 zhidl */} + ( + getProductData(params).then(value => { + console.log(params, value.data); + return value.data; + // return { + // data: [ + // {id:0, name: '1', age: 2, city: 'bj'} + // ] + // } + }) + ) + + } + > - -
- - + + + ); } } @@ -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); diff --git a/lesson6-umi/src/pages/product/[id].js b/lesson6-umi/src/pages/product/[id].js index 277fa460..0bfe7911 100644 --- a/lesson6-umi/src/pages/product/[id].js +++ b/lesson6-umi/src/pages/product/[id].js @@ -5,6 +5,7 @@ export default props => { const { id } = props.match.params; return (
+ 111

Page product/[id]:{id}

); diff --git a/lesson7/src/index.js b/lesson7/src/index.js index b7ea968b..d6484ab8 100644 --- a/lesson7/src/index.js +++ b/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"; diff --git a/lesson7/src/kreact/react-dom.js b/lesson7/src/kreact/react-dom.js index 1d0a091a..7c841467 100644 --- a/lesson7/src/kreact/react-dom.js +++ b/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); diff --git a/lesson9/src/Callback.jsx b/lesson9/src/Callback.jsx new file mode 100644 index 00000000..7a86a9a1 --- /dev/null +++ b/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 ( +
+

UseCallbackPage

+

{count}

+ + setValue(event.target.value)} /> +
+ ); +} + +class Child extends PureComponent { + render() { + console.log('child render'); + const { addClick } = this.props; + return ( +
+

Child

+ +
+ ); + } +} diff --git a/lesson9/src/Memo.jsx b/lesson9/src/Memo.jsx new file mode 100644 index 00000000..7581497a --- /dev/null +++ b/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 ( +
+

UseMemoPage

+

expensive:{expensive}

+

{count}

+ + setValue(event.target.value)} /> +
+ ); +} diff --git a/lesson9/src/index.js b/lesson9/src/index.js deleted file mode 100644 index bf4440ce..00000000 --- a/lesson9/src/index.js +++ /dev/null @@ -1,48 +0,0 @@ -// import React, {Component, useState} from "react"; -// import ReactDOM from "react-dom"; -import ReactDOM, {useState} from "./kreact/react-dom"; -import Component from "./kreact/Component"; - -import "./index.css"; - -class ClassComponent extends Component { - render() { - return ( -
-

{this.props.name}

-
- ); - } -} - -function FunctionComponent(props) { - const [count, setCount] = useState(0); - return ( -
- - {count % 2 ?

{props.name}

: omg} -
- ); -} - -const jsx = ( -
-

全栈

- 开课吧 - - -
-); - -ReactDOM.render(jsx, document.getElementById("root")); - -// 文本标签 -// 原生标签 -// 函数组件 -// 类组件 diff --git a/lesson9/src/index.jsx b/lesson9/src/index.jsx new file mode 100644 index 00000000..a4fdca5f --- /dev/null +++ b/lesson9/src/index.jsx @@ -0,0 +1,69 @@ +// import React, {Component, useState} from "react"; +// import ReactDOM from "react-dom"; +// import ReactDOM, {useState} from "./kreact/react-dom"; +// import Component from "./kreact/Component"; + +// import "./index.css"; + +// class ClassComponent extends Component { +// render() { +// return ( +//
+//

{this.props.name}

+//
+// ); +// } +// } + +// function FunctionComponent(props) { +// const [count, setCount] = useState(0); +// return ( +//
+// +// {count % 2 ?

{props.name}

: omg} +//
+// ); +// } + +// const jsx = ( +//
+//

全栈

+// 开课吧 +// +// +//
+// ); + +// ReactDOM.render(jsx, document.getElementById("root")); + +// 文本标签 +// 原生标签 +// 函数组件 +// 类组件 + + + + + +import React from 'react'; +// 负责渲染实际dom vdom -> dom转换 +import ReactDOM from 'react-dom'; + +import Memo from './Memo'; + +import Callback from './Callback'; +ReactDOM.render( + ( +
+ {/* */} + +
+ ), + document.getElementById("root") +) \ No newline at end of file diff --git a/lesson9/src/kreact/react-dom.js b/lesson9/src/kreact/react-dom.js index 2218f73e..e45521a8 100644 --- a/lesson9/src/kreact/react-dom.js +++ b/lesson9/src/kreact/react-dom.js @@ -228,7 +228,6 @@ function workLoop(IdleDeadline) { // commit commitRoot(); } - requestIdleCallback(workLoop); }