`注册`onClick`事件处理函数，触发时执行`history.push` 方法并将`this.props.to`传递进push中
165 |
166 | [Link](./../src/React-Router/react-router-dom/Link.js)
167 |
168 | #### Redirect
169 |
170 | - 渲染该组件时，在其内部`componentDidMount`生命周期中执行上层组件传递的`history.push()`方法跳转到`this.props.to`对应的url
171 |
--------------------------------------------------------------------------------
/doc/Reactjs总结.md:
--------------------------------------------------------------------------------
1 | # React.js
2 |
3 | ## React 和 vue
4 |
5 | react工作模式：UI=render(data);render函数是纯函数
6 |
7 | 学习曲线，代码风格，单文件组成，灵活性，工具，移动端支持，各自优缺点
8 |
9 | ## JSX
10 | ### createElement
11 | ### 不可变值
12 | ### this
13 | - bind(能够传递参数)
14 | - 匿名箭头函数（能够传递参数，但是没有bind语义强）
15 | - class 新语法
16 | ### for 循环key值问题
17 | ### 受控组件和非受控组件
18 | ### 合成事件系统
19 | - 抹平浏览器差异
20 | - 事件委托到document
21 | - NativeEvent
22 |
23 | ## 组件
24 | ### 状态流：setState
25 | #### 异步或同步执行
26 | **同步更新:**
27 | - “自定义”事件
28 | - 定时器
29 | #### 异步更新（批量更新）
30 |
31 | 事件处理函数
32 |
33 | #### 更新合并
34 | - 对象批量更新会出现覆盖现象
35 | - 函数式批量更新不会覆盖
36 | - VS useState hooks
37 | #### 不可变值
38 | - 直接修改值的后果（UI不刷新）
39 | - 原始值：覆盖
40 | - 引用值：重建
41 | - 数组处理
42 | - 对象处理
43 | ### 生命周期
44 |
45 | #### 老版本
46 | props 和 states 分的很清楚
47 | #### 新版本
48 | #### 为什么这样做
49 | todo：
50 | - 自己的笔记
51 | - 珠峰讲义，课堂源码先不看
52 | - react Fiber
53 |
54 | **父组件更新子组件也更新(好意，你不需要你自己控制呗)**
55 |
56 | ### 逻辑复用
57 | HOC高阶组件
58 | Render Props
59 | custorm Hooks
60 |
61 |
62 | ## 核心特性
63 | ### Suspense
64 | ### Portals
65 | ### ErrorBoudary
66 | ### React.lazy
67 | ### Fragment
68 | ### 异步加载组件
69 | #### import()抱: webPack代码分割
70 | #### 基本使用
71 | #### 异步错误处理
72 | #### - [ ] 配合React-router @官方文档
73 | ### context
74 | #### 解决问题：props传值嵌套，最佳实践(三层以上组件时)
75 | #### scu造成context短路
76 | #### - [ ] useContext VS createContext
77 | #### createContext VS contextTypes
78 | - [ ] contextTypes: 一对多
79 | - [ ] createContext：一对一
80 | @双越 + 官方文档
81 |
--------------------------------------------------------------------------------
/doc/React中间件总结.md:
--------------------------------------------------------------------------------
1 | ## redux中间件
2 |
3 | 原理:对dispatch进行改造，增加副作用（增加业务逻辑或异步请求）
4 |
5 | 
6 |
7 | ### 常见中间件
8 |
9 | **Logger：** 使用logger中间件后，在状态改变前后会执行状态打印。
10 |
11 | **Thunk：** 使用thunk中间件后，action可以是函数因此可以通过该函数执行一些额外逻辑后，再store再次派发一个action
12 | **Promise：** 可以让action 拥有then方法，在then方法中调用dispatch函数。
13 |
14 | - [ ] Saga：saga中间件能够将异步逻辑（复杂逻辑）统一管理到一个文件中
15 |
16 | ### 原理
17 |
18 | > src/Redux/中间件函数 + src/redux/ 中有写好的源码
19 |
20 | 以下为自己练习思路的代码：
21 |
22 | ```js
23 |
24 | // --- demo
25 |
26 | let store = createStore(reducer,{},applyMiddleware(promise,thunk,looger))
27 |
28 | export function createStore (reducer,initialState,enhancer) {
29 | // ...
30 | if(typeof enhancer !== 'undefined') {
31 | return enhancer(createStore)(reducer,initialState)
32 | }
33 | // ...
34 | }
35 |
36 | /**
37 | * 思路：
38 | * - 创建 store 并返回
39 | * - 重写dispatch 方法
40 | * @param {...any} middlewares
41 | */
42 | export const applyMiddleware = (...middlewares) => createStore => (reducer,initialState) => {
43 | let store = createStore(reducer,initialState);
44 |
45 | let dispatch = undefined;
46 | let middlewareAPI = {
47 | dispatch: (action) => dispatch(action),
48 | getState: store.getState
49 | }
50 | // 处理中间件，将API缓存
51 |
52 | middlewares = middlewares.map(m => m(middlewareAPI))
53 |
54 | // 加持dispatch方法
55 | // 需要：(...args) => a(b(c(args)))
56 | dispatch = compose(...middlewares)(sotre.dispatch)
57 |
58 | return {
59 | ...store,
60 | dispatch
61 | }
62 | }
63 |
64 | // 避免一个中间件进来，数组收一下
65 | let compose = (...middlewares) => middlewares.reducer((a,b) => (...args) => a(b(args)))
66 | ```
67 |
--------------------------------------------------------------------------------
/doc/Redux总结.md:
--------------------------------------------------------------------------------
1 | ## Redux总结
2 |
3 | ### Redux 哲学
4 |
5 | **唯一数据源**： 全局维持一个store
6 |
7 | **不可变性**： 改变状态通过派发action，不能直接修改store中的值
8 |
9 | **纯函数reducer** : 接受action，根据老状态和新action生成新的状态返还给Store
10 |
11 | ### 使用Redux的好处
12 |
13 | 1. **视图层变得很薄**，只包含渲染逻辑和触发action这两个职责
14 | 2. **状态变更逻辑清晰**
15 | 3. 强制让状态变更时留下一笔记录也就是dispatcher，利用它去做**debug工具**，**历史回滚等工具**
16 |
17 | ### reducer
18 |
19 | 之所以叫 `reducer` 是因为他和 `Array.prototype.reduce` 函数非常相似，本质上都是根据前一个状态返回一个新的状态。
20 |
21 | **例如reducer 根据 prevState + action => newState**
22 |
23 | 同时reducer 也有缩减的含义，现在有两个状态：前一刻的状态和想要变更的状态，当reducer函数执行后，只剩一个新的状态，不就是缩减的意思吗？
24 |
25 | ### 工作流
26 |
27 | 
28 |
29 | > 注意维持reducer 纯函数特性（不产生任何副作用，也不能修改参数state和action对象）
30 |
31 | ### 基本使用 & 实现
32 |
33 | #### 基本工作流使用
34 |
35 | [Redux-base](../../src/Redux/components/1.Redux-base.js)
36 |
37 | **核心方法实现：**
38 |
39 | - 初始化Store
40 | - `getState()`
41 | - `dispatch()`
42 | - `subscribe()`
43 |
44 | [redux store模拟实现](../../src/Redux/redux/createStore.js)
45 |
46 | #### bindActionCreators基本使用
47 |
48 | [bindActionCreators-base](./../../src/Redux/components/2.bindActionCreators-base.js)
49 |
50 | **方法实现：**
51 | [bindActionCreators-实现](./../../src/Redux/redux/bindActionCreators.js)
52 |
53 | #### 模块化拆分reducers
54 |
55 | 主要是使用`combineReducers`，[入口文件](./../../src/Redux/store-模块化reducer/reducers/index.js)
56 |
57 | **方法实现：**
58 | [combineReducers](./../../src/Redux/redux/combineReducers.js)
59 |
--------------------------------------------------------------------------------
/doc/hooks/custorm hooks练习.md:
--------------------------------------------------------------------------------
1 |
2 | ## 9.2 中间件 [#](#t279.2 中间件)
3 |
4 | #### 9.2.1 logger [#](#t289.2.1 logger)
5 |
6 | ```
7 | import React, { useEffect, useState, useReducer } from 'react';
8 | import ReactDOM from 'react-dom';
9 | const initialState = 0;
10 |
11 | function reducer(state, action) {
12 | switch (action.type) {
13 | case 'increment':
14 | return { number: state.number + 1 };
15 | case 'decrement':
16 | return { number: state.number - 1 };
17 | default:
18 | throw new Error();
19 | }
20 | }
21 | function init(initialState) {
22 | return { number: initialState };
23 | }
24 | function useLogger(reducer, initialState, init) {
25 | const [state, dispatch] = useReducer(reducer, initialState, init);
26 | let dispatchWithLogger = (action) => {
27 | console.log('老状态', state);
28 | dispatch(action);
29 | }
30 | useEffect(function () {
31 | console.log('新状态', state);
32 | }, [state]);
33 | return [state, dispatchWithLogger];
34 | }
35 | function Counter() {
36 | const [state, dispatch] = useLogger(reducer, initialState, init);
37 | return (
38 | <>
39 | Count: {state.number}
40 |
41 |
42 |
43 | )
44 | }
45 | ReactDOM.render(, document.getElementById('root'));
46 | ```
47 |
48 | #### 9.2.2 promise [#](#t299.2.2 promise)
49 |
50 | ```
51 | import React, { useEffect, useState, useReducer } from 'react';
52 | import ReactDOM from 'react-dom';
53 | const initialState = 0;
54 |
55 | function reducer(state, action) {
56 | switch (action.type) {
57 | case 'increment':
58 | return { number: state.number + 1 };
59 | case 'decrement':
60 | return { number: state.number - 1 };
61 | default:
62 | throw new Error();
63 | }
64 | }
65 | function init(initialState) {
66 | return { number: initialState };
67 | }
68 | function useLogger(reducer, initialState, init) {
69 | const [state, dispatch] = useReducer(reducer, initialState, init);
70 | let dispatchWithLogger = (action) => {
71 | console.log('老状态', state);
72 | dispatch(action);
73 | }
74 | useEffect(function () {
75 | console.log('新状态', state);
76 | }, [state]);
77 | return [state, dispatchWithLogger];
78 | }
79 | function usePromise(reducer, initialState, init) {
80 | const [state, dispatch] = useReducer(reducer, initialState, init);
81 | let dispatchPromise = (action) => {
82 | if (action.payload && action.payload.then) {
83 | action.payload.then((payload) => dispatch({ ...action, payload }));
84 | } else {
85 | dispatch(action);
86 | }
87 | }
88 | return [state, dispatchPromise];
89 | }
90 | function Counter() {
91 | const [state, dispatch] = usePromise(reducer, initialState, init);
92 | return (
93 | <>
94 | Count: {state.number}
95 |
96 |
102 |
103 | )
104 | }
105 | ReactDOM.render(, document.getElementById('root'));
106 | ```
107 |
108 | #### 9.2.3 thunk [#](#t309.2.3 thunk)
109 |
110 | ```
111 | import React, { useEffect, useState, useReducer } from 'react';
112 | import ReactDOM from 'react-dom';
113 | import { resolve } from 'dns';
114 | const initialState = 0;
115 |
116 | function reducer(state, action) {
117 | switch (action.type) {
118 | case 'increment':
119 | return { number: state.number + 1 };
120 | case 'decrement':
121 | return { number: state.number - 1 };
122 | default:
123 | throw new Error();
124 | }
125 | }
126 | function init(initialState) {
127 | return { number: initialState };
128 | }
129 | function useLogger(reducer, initialState, init) {
130 | const [state, dispatch] = useReducer(reducer, initialState, init);
131 | let dispatchWithLogger = (action) => {
132 | console.log('老状态', state);
133 | dispatch(action);
134 | }
135 | useEffect(function () {
136 | console.log('新状态', state);
137 | }, [state]);
138 | return [state, dispatchWithLogger];
139 | }
140 | function usePromise(reducer, initialState, init) {
141 | const [state, dispatch] = useReducer(reducer, initialState, init);
142 | let dispatchPromise = (action) => {
143 | if (action.payload && action.payload.then) {
144 | action.payload.then((payload) => dispatch({ ...action, payload }));
145 | } else {
146 | dispatch(action);
147 | }
148 | }
149 | return [state, dispatchPromise];
150 | }
151 | function useThunk(reducer, initialState, init) {
152 | const [state, dispatch] = useReducer(reducer, initialState, init);
153 | let dispatchPromise = (action) => {
154 | if (typeof action === 'function') {
155 | action(dispatchPromise, () => state);
156 | } else {
157 | dispatch(action)
158 | }
159 | }
160 | return [state, dispatchPromise];
161 | }
162 | function Counter() {
163 | const [state, dispatch] = useThunk(reducer, initialState, init);
164 | return (
165 | <>
166 | Count: {state.number}
167 |
168 |
173 |
174 | )
175 | }
176 | ReactDOM.render(, document.getElementById('root'));
177 | ```
178 |
179 | ### 9.3 ajax [#](#t319.3 ajax)
180 |
181 | ```
182 | import React, { useState, useEffect, useLayoutEffect } from 'react';
183 | import ReactDOM from 'react-dom';
184 | function useRequest(url) {
185 | let limit = 5;
186 | let [offset, setOffset] = useState(0);
187 | let [data, setData] = useState([]);
188 | function loadMore() {
189 | setData(null);
190 | fetch(`${url}?offset=${offset}&limit=${limit}`)
191 | .then(response => response.json())
192 | .then(pageData => {
193 | setData([...data, ...pageData]);
194 | setOffset(offset + pageData.length);
195 | });
196 | }
197 | useEffect(loadMore, []);
198 | return [data, loadMore];
199 | }
200 |
201 | function App() {
202 | const [users, loadMore] = useRequest('http://localhost:8000/api/users');
203 | if (users === null) {
204 | return 正在加载中....
205 | }
206 | return (
207 | <>
208 |
209 | {
210 | users.map((item, index) => - {item.id}:{item.name}
)
211 | }
212 |
213 |
214 |
215 | )
216 | }
217 | ReactDOM.render(, document.getElementById('root'));
218 | ```
219 |
220 | async+await
221 |
222 | ```
223 | import React, { useState, useEffect, useLayoutEffect } from 'react';
224 | import ReactDOM from 'react-dom';
225 | function useRequest(url) {
226 | let limit = 5;
227 | let [offset, setOffset] = useState(0);
228 | let [data, setData] = useState([]);
229 | async function loadMore() {
230 | setData(null);
231 | let pageData = await fetch(`${url}?offset=${offset}&limit=${limit}`)
232 | .then(response => response.json());
233 | setData([...data, ...pageData]);
234 | setOffset(offset + pageData.length);
235 | }
236 | useEffect(loadMore, []);
237 | return [data, loadMore];
238 | }
239 |
240 | function App() {
241 | const [users, loadMore] = useRequest('http://localhost:8000/api/users');
242 | if (users === null) {
243 | return 正在加载中....
244 | }
245 | return (
246 | <>
247 |
248 | {
249 | users.map((item, index) => - {item.id}:{item.name}
)
250 | }
251 |
252 |
253 |
254 | )
255 | }
256 | ReactDOM.render(, document.getElementById('root'));
257 | ```
258 |
259 | ```
260 | let express = require('express');
261 | let app = express();
262 | app.use(function (req, res, next) {
263 | res.header('Access-Control-Allow-Origin', 'http://localhost:3000');
264 | next();
265 | });
266 | app.get('/api/users', function (req, res) {
267 | let offset = parseInt(req.query.offset);
268 | let limit = parseInt(req.query.limit);
269 | let result = [];
270 | for (let i = offset; i < offset + limit; i++) {
271 | result.push({ id: i + 1, name: 'name' + (i + 1) });
272 | }
273 | res.json(result);
274 | });
275 | app.listen(8000);
276 | ```
277 |
278 | ### 9.4 动画 [#](#t329.4 动画)
279 |
280 | ```
281 | import React, { useState, useEffect, useLayoutEffect } from 'react';
282 | import ReactDOM from 'react-dom';
283 | import './index.css';
284 | function useMove(initialClassName) {
285 | const [className, setClassName] = useState(initialClassName);
286 | const [state, setState] = useState('');
287 | function start() {
288 | setState('bigger');
289 | }
290 | useEffect(() => {
291 | if (state === 'bigger') {
292 | setClassName(`${initialClassName} ${initialClassName}-bigger`);
293 | }
294 | }, [state]);
295 | return [className, start];
296 | }
297 |
298 | function App() {
299 | const [className, start] = useMove('circle');
300 | return (
301 |
305 | )
306 | }
307 | ReactDOM.render(, document.getElementById('root'));
308 | ```
309 |
310 | ```
311 | .circle {
312 | width : 50px;
313 | height : 50px;
314 | border-radius: 50%;
315 | background : red;
316 | transition: all .5s;
317 | }
318 | .circle-bigger {
319 | width : 200px;
320 | height : 200px;
321 | }
322 | ```
323 |
324 | 10. 路由 hooks [#](#t3310.路由hooks)
325 |
326 | --------------------------------
327 |
328 | ### 10.1 useParams [#](#t3410.1 useParams)
329 |
330 | * 获取路由中的 params
331 |
332 | #### 10.1.1 老版 [#](#t3510.1.1 老版)
333 |
334 | ```
335 | import React from "react";
336 | import ReactDOM from "react-dom";
337 | import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
338 |
339 | function Post({ match }) {
340 | let { title } = match.params;
341 | return {title}
;
342 | }
343 |
344 | ReactDOM.render(
345 |
346 |
347 |
348 |
349 |
350 |
351 | ,
352 | document.getElementById("root")
353 | );
354 | ```
355 |
356 | #### 10.1.2. 新版 [#](#t3610.1.2.新版)
357 |
358 | ```
359 | import React from "react";
360 | import ReactDOM from "react-dom";
361 | +import { BrowserRouter as Router, Route, Switch, useParams } from "react-router-dom";
362 |
363 | +function Post() {
364 | + let { title } = useParams();
365 | + return {title}
;
366 | +}
367 |
368 | ReactDOM.render(
369 |
370 |
371 |
372 | +
373 |
374 |
{title}{JSON.stringify(location)}
;
394 | }
395 |
396 | ReactDOM.render(
397 |
398 |
399 |
400 |
401 |
402 |
403 | ,
404 | document.getElementById("root")
405 | );
406 | ```
407 |
408 | #### 10.2.2 新版 [#](#t3910.2.2 新版)
409 |
410 | ```
411 | import React from "react";
412 | import ReactDOM from "react-dom";
413 | import { BrowserRouter as Router, Route, Switch, useParams, useLocation } from "react-router-dom";
414 |
415 | function Post() {
416 | let { title } = useParams();
417 | + const location = useLocation();
418 | + return {title}
{JSON.stringify(location)};
419 | }
420 |
421 | ReactDOM.render(
422 |
423 |
428 | ,
429 | document.getElementById("root")
430 | );
431 | ```
432 |
433 | ### 10.3.useHistory [#](#t4010.3.useHistory)
434 |
435 | * 可以返回上一个网页
436 |
437 | #### 10.3.1 老版 [#](#t4110.3.1 老版)
438 |
439 | ```
440 | import React from "react";
441 | import ReactDOM from "react-dom";
442 | import { BrowserRouter as Router, Route, Switch, useHistory } from "react-router-dom";
443 |
444 | function Post({ match, history }) {
445 | let { title } = match.params;
446 | return (
447 |
448 | {title}
449 |
450 |
453 |
454 | );
455 | }
456 | function Home({ history }) {
457 | return (
458 | <>
459 |
462 |
463 | )
464 | }
465 | ReactDOM.render(
466 |
467 |
468 |
469 |
470 |
471 |
472 |
473 | ,
474 | document.getElementById("root")
475 | );
476 | ```
477 |
478 | #### 10.3.2 新版 [#](#t4210.3.2 新版)
479 |
480 | ```
481 | import React from "react";
482 | import ReactDOM from "react-dom";
483 | +import { BrowserRouter as Router, Route, Switch, useParams, useHistory } from "react-router-dom";
484 |
485 | function Post() {
486 | + let { title } = useParams();
487 | + let history = useHistory();
488 | return (
489 |
490 | {title}
491 |
492 | +
495 |
496 | );
497 | }
498 | function Home() {
499 | + let history = useHistory();
500 | return (
501 | <>
502 | +
505 |
506 | )
507 | }
508 | ReactDOM.render(
509 |
510 |
511 |
512 | +
513 | +
514 |
515 |
516 | ,
517 | document.getElementById("root")
518 | );
519 | ```
520 |
521 | ### 10.4 useRouteMatch [#](#t4310.4 useRouteMatch)
522 |
523 | * `useRouteMatch`挂钩尝试以与`Route`相同的方式匹配当前`URL`
524 | * 在无需实际呈现`Route`的情况下访问匹配数据最有用
525 |
526 | #### 10.4.1 旧版 [#](#t4410.4.1 旧版)
527 |
528 | ```
529 | import React from 'react';
530 | import ReactDOM from 'react-dom';
531 | import { BrowserRouter as Router, Route } from 'react-router-dom';
532 | function NotFound() {
533 | return Not Found
534 | }
535 | function Post(props) {
536 | return (
537 | {props.match.params.title}
538 | )
539 | }
540 | function App() {
541 | return (
542 |
543 |
match ? : }
548 | />
549 | Not Found
569 | }
570 | function Post(props) {
571 | return (
572 | {props.match.params.title}
573 | )
574 | }
575 | function App() {
576 | let match = useRouteMatch({
577 | path: '/post/:title',
578 | strict: true,
579 | sensitive: true
580 | })
581 | console.log(match);
582 | return (
583 |
586 | )
587 | }
588 |
589 | ReactDOM.render(
590 |
591 |
592 | ,
593 | document.getElementById("root")
594 | );
595 | ```
596 |
--------------------------------------------------------------------------------
/doc/hooks/总结 hooks.md:
--------------------------------------------------------------------------------
1 | # React Hooks
2 |
3 | ## 概念
4 |
5 | ### 是什么
6 |
7 | Hook 是 React 16.8 的新增特性，可以让你在不编写 class 的情况下**使用 state 以及其他的 React 特性**。
8 |
9 | - 拥有类似class组件（state）的响应式数据（useState）
10 |
11 | - 拥有控制组件生命周期的能力（useEffect），当然useEffect 远不如此
12 | - [ ] Ref
13 | - 拥有类似Redux对复杂状态的管理能力（useReducer）
14 |
15 | ### 解决的问题
16 |
17 | * 在组件之间复用状态逻辑很难, 可能要用到 render props 和高阶组件，React 需要为共享状态逻辑提供更好的原生途径，Hook 使你在无需修改组件结构的情况下**复用状态逻辑**
18 |
19 | * 复杂组件变得难以理解，Hook 将组件中相互关联的部分拆分成更小的函数（比如设置订阅或请求数据）
20 |
21 | * 难以捉摸的`this`
22 |
23 | - [ ] 性能提升
24 |
25 | ### 注意事项
26 |
27 | * 只能在函数最外层调用 Hook，不要在循环、条件判断或者子函数中调用。
28 | * 只能在 React函数组件中调用 Hook。
29 |
30 | ## 心得总结
31 |
32 | ### useState
33 |
34 | #### 能力层面
35 |
36 | * 通过在函数组件里调用它来给组件添加一些内部的state,当组件重复渲染时会**状态复用**（而不是新创建一个状态）
37 | * 更改状态的函数类似 class 组件的 this.setState，但是并**不会**进行**状态合并**
38 |
39 | #### 使用层面
40 |
41 | * useState 的参数不能为`null`
42 | * 返回值：
43 | * 在初始渲染期间，返回的状态 (state) 与传入的第一个参数 (initialState) 值相同
44 | * setState 函数用于更新 state。它接收一个**新的 state 值**,当他**执行后会将组件的一次重新渲染推入到渲染队列**
45 |
46 | ```react
47 | const [state, setState] = useState(initialState);
48 | ```
49 |
50 | #### demo：计数器
51 |
52 | ```react
53 | import React, { useState } from "react";
54 | export class CounterClass extends React.Component {
55 | constructor(props) {
56 | super(props);
57 | this.state = {
58 | number: 0,
59 | };
60 | }
61 | handleClick = () => {
62 | this.setState({ number: this.state.number + 1 });
63 | };
64 | render() {
65 | return (
66 |
67 |
{this.state.number}
68 |
69 |
77 |
{counter}
78 | {/* NOTE:
79 |
80 | setState函数在使用时候，要注意避免循环渲染，例如这样调用：
81 |
118 |
当前state中的number为：{state}
119 |
120 |
121 |
151 |
{state.number}
152 |
153 |
156 |
157 |
158 |
184 |
185 | {state.name}:{state.number}
186 |
187 |
190 |
193 |
213 |
214 | {state.name}:{state.number}
215 |
216 |
219 | {/* 此时会判定为相同对象，不会进行更新操作,使用的是Object.is方法来判断是否相同 */}
220 | {/* https://developer.mozilla.org/zhCN/docs/Web/JavaScript/Reference/Global_Objects/Object/is
221 | */}
222 |
223 |
255 |
256 | {name}:{number}
257 |
258 |
261 |
264 |
323 | setName(e.target.value)}
327 | />
328 |
329 |
330 | );
331 | };
332 | ```
333 |
334 | #### ‼️useMemo vs useCallback
335 |
336 | So what is the difference? `useCallback` **returns its function uncalled** so you can call it later, while `useMemo` **calls its function and returns the result**.
337 |
338 | ```react
339 | function foo() {
340 | return 'bar';
341 | }
342 |
343 | const memoizedCallback = useCallback(foo, []);
344 | const memoizedResult = useMemo(foo, []);
345 |
346 | memoizedCallback;
347 | // ƒ foo() {
348 | // return 'bar';
349 | // }
350 | memoizedResult; // 'bar'
351 | memoizedCallback(); // 'bar'
352 | memoizedResult(); // 🔴 TypeError
353 | ```
354 |
355 |
356 |
357 | ### useReducer
358 |
359 | #### 能力层面
360 |
361 | * 在某些场景下，useReducer 会比 useState 更适用，例如 state 逻辑较复杂且包含多个子数据（复杂对象），或者下一个 state 依赖于之前的 state 等
362 | * 为函数组件提供类似Redux的状态流管理的能力
363 |
364 | #### 使用层面
365 |
366 | - 它接收一个形如 (state, action) => newState 的 reducer，并返回当前的 state 以及与其配套的 dispatch 方法。
367 |
368 | ```
369 | const [state, dispatch] = useReducer(reducer, initialArg, init);
370 | ```
371 |
372 | #### demo: 用法
373 |
374 | ```
375 | const initialState = 0;
376 |
377 | function reducer(state, action) {
378 | switch (action.type) {
379 | case 'increment':
380 | return {number: state.number + 1};
381 | case 'decrement':
382 | return {number: state.number - 1};
383 | default:
384 | throw new Error();
385 | }
386 | }
387 | function init(initialState){
388 | return {number:initialState};
389 | }
390 | function Counter(){
391 | const [state, dispatch] = useReducer(reducer, initialState,init);
392 | return (
393 | <>
394 | Count: {state.number}
395 |
396 |
397 |
398 | )
399 | }
400 | ```
401 |
402 | #### ‼️最佳实践
403 |
404 | - [ ] fm
405 |
406 | ### useContext
407 |
408 | #### 能力层面（语法糖？）
409 |
410 | * useContext(MyContext) 相当于 class 组件中的 ``
411 | * useContext(MyContext) 只是让你能够读取 context 的值以及订阅 context 的变化,你仍然需要在上层组件树中使用 来为下层组件提供 context
412 |
413 | #### 使用层面
414 |
415 | - 接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值
416 |
417 | * 当前的 context 值由上层组件中距离当前组件最近的 决定
418 | * 当组件上层最近的 更新时，该 Hook 会触发重渲染，并使用最新传递给 MyContext provider 的 context value 值
419 |
420 | > 当组件上层最近的 `` 更新时，该 Hook 会触发重渲染，并使用最新传递给 `MyContext` provider 的 context `value` 值。即使祖先使用 [React.memo](https://zh-hans.reactjs.org/docs/react-api.html#reactmemo) 或 [shouldComponentUpdate](https://zh-hans.reactjs.org/docs/react-component.html#shouldcomponentupdate)，也会在组件本身使用 `useContext` 时重新渲染。
421 |
422 | #### demo
423 |
424 | ```react
425 | function Counter() {
426 | // 只是把MyContext解构出来，不要想多了
427 | // 不管父组件是否进行SCU优化，或者memo优化，只要MyContext发生改变，就会重新渲染该组件
428 | let { state, setState } = useContext(MyContext);
429 | return (
430 |
431 |
{state.number}
432 |
433 |
484 |
{this.state.number}
485 |
488 |
{number}
504 |
505 |
506 | )
507 | }
508 | ReactDOM.render(, document.getElementById('root'));
509 | ```
510 |
511 | #### ‼️最佳实践
512 |
513 | > 在这个 class 中，我们需要在两个生命周期函数中编写重复的代码, 这是因为很多情况下，我们希望在组件加载和更新时执行同样的操作。我们希望它在每次渲染之后执行，但 React 的 class 组件没有提供这样的方法。即使我们提取出一个方法，我们还是要在两个地方调用它。useEffect 会在第一次渲染之后和每次更新之后都会执行
514 | > 每次我们重新渲染，都会生成新的 effect，替换掉之前的。某种意义上讲，effect 更像是渲染结果的一部分 —— 每个 effect 属于一次特定的渲染。
515 |
516 | #### ‼️性能优化
517 |
518 | * 如果某些特定值在两次重渲染之间没有发生变化，你可以通知 React 跳过对 effect 的调用，只要传递数组作为 useEffect 的第二个可选参数即可
519 | * 如果想执行只运行一次的 effect（仅在组件挂载和卸载时执行），可以传递一个空数组（[]）作为第二个参数。这就告诉 React 你的 effect 不依赖于 props 或 state 中的任何值，所以它永远都不需要重复执行
520 |
521 | ```
522 | function Counter(){
523 | const [number,setNumber] = useState(0);
524 | // 相当于componentDidMount 和 componentDidUpdate
525 | useEffect(() => {
526 | console.log('开启一个新的定时器')
527 | const $timer = setInterval(()=>{
528 | setNumber(number=>number+1);
529 | },1000);
530 | },[]);
531 | return (
532 | <>
533 | {number}
534 |
535 | )
536 | }
537 | ```
538 |
539 | #### ‼️清除副作用
540 |
541 | * 副作用函数还可以通过返回一个函数来指定如何清除副作用
542 | * 为防止内存泄漏，清除函数会在组件卸载前执行。另外，如果组件多次渲染，则在执行下一个 effect 之前，上一个 effect 就已被清除
543 |
544 | ```
545 | import React, { useEffect, useState, useReducer } from 'react';
546 | import ReactDOM from 'react-dom';
547 | function Counter() {
548 | const [number, setNumber] = useState(0);
549 | useEffect(() => {
550 | console.log('开启一个新的定时器')
551 | const $timer = setInterval(() => {
552 | setNumber(number => number + 1);
553 | }, 1000);
554 | return () => {
555 | console.log('销毁老的定时器');
556 | clearInterval($timer);
557 | }
558 | });
559 | return (
560 | <>
561 | {number}
562 |
563 | )
564 | }
565 | function App() {
566 | let [visible, setVisible] = useState(true);
567 | return (
568 |
569 | {visible && }
570 |
571 |
572 | )
573 | }
574 | ReactDOM.render(, document.getElementById('root'));
575 | ```
576 |
577 | ### useRef
578 |
579 | * useRef 返回一个可变的 ref 对象，其 `.current` 属性被初始化为传入的参数（initialValue）
580 | * 返回的 ref 对象在组件的整个生命周期内保持不变
581 |
582 | ```
583 | const refContainer = useRef(initialValue);
584 | ```
585 |
586 | #### useRef [#](#t217.5.1 useRef)
587 |
588 | ```
589 | import React, { useState, useEffect, useRef } from 'react';
590 | import ReactDOM from 'react-dom';
591 | function Parent() {
592 | let [number, setNumber] = useState(0);
593 | return (
594 | <>
595 |
596 |
597 |
598 | )
599 | }
600 | let input;
601 | function Child() {
602 | const inputRef = useRef();
603 | console.log('input===inputRef', input === inputRef);
604 | input = inputRef;
605 | function getFocus() {
606 | inputRef.current.focus();
607 | }
608 | return (
609 | <>
610 |
611 |
612 |
613 | )
614 | }
615 | ReactDOM.render(, document.getElementById('root'));
616 | ```
617 |
618 | #### forwardRef [#](#t227.5.2 forwardRef)
619 |
620 | * 将 ref 从父组件中转发到子组件中的 dom 元素上
621 | * 子组件接受 props 和 ref 作为参数
622 |
623 | ```
624 | function Child(props,ref){
625 | return (
626 |
627 | )
628 | }
629 | Child = forwardRef(Child);
630 | function Parent(){
631 | let [number,setNumber] = useState(0);
632 | const inputRef = useRef();
633 | function getFocus(){
634 | inputRef.current.value = 'focus';
635 | inputRef.current.focus();
636 | }
637 | return (
638 | <>
639 |
640 |
641 |
642 |
643 | )
644 | }
645 | ```
646 |
647 | #### useImperativeHandle [#](#t237.5.3 useImperativeHandle)
648 |
649 | * `useImperativeHandle` 可以让你在使用 ref 时自定义暴露给父组件的实例值
650 | * 在大多数情况下，应当避免使用 ref 这样的命令式代码。useImperativeHandle 应当与 forwardRef 一起使用
651 |
652 | ```
653 | function Child(props,ref){
654 | const inputRef = useRef();
655 | useImperativeHandle(ref,()=>(
656 | {
657 | focus(){
658 | inputRef.current.focus();
659 | }
660 | }
661 | ));
662 | return (
663 |
664 | )
665 | }
666 | Child = forwardRef(Child);
667 | function Parent(){
668 | let [number,setNumber] = useState(0);
669 | const inputRef = useRef();
670 | function getFocus(){
671 | console.log(inputRef.current);
672 | inputRef.current.value = 'focus';
673 | inputRef.current.focus();
674 | }
675 | return (
676 | <>
677 |
678 |
679 |
680 |
681 | )
682 | }
683 | ```
684 |
685 | ### useLayoutEffect
686 |
687 | ----------------------------------------------
688 |
689 | * 其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect
690 | * 可以使用它来读取 DOM 布局并同步触发重渲染
691 | * 在浏览器执行绘制之前 useLayoutEffect 内部的更新计划将被同步刷新
692 | * 尽可能使用标准的 useEffect 以避免阻塞视图更新
693 |
694 | 
695 |
696 | ```
697 | function LayoutEffect() {
698 | const [color, setColor] = useState('red');
699 | useLayoutEffect(() => {
700 | alert(color);
701 | });
702 | useEffect(() => {
703 | console.log('color', color);
704 | });
705 | return (
706 | <>
707 | 颜色
708 |
709 |
710 |
711 |
712 | );
713 | }
714 | ```
715 |
716 | ### 自定义 Hook
717 |
718 | * 有时候我们会想要在组件之间重用一些状态逻辑
719 | * 自定义 Hook 可以让你在不增加组件的情况下达到同样的目的
720 | * Hook 是一种复用状态逻辑的方式，它不复用 state 本身
721 | * 事实上 Hook 的每次调用都有一个完全独立的 state
722 | * 自定义 Hook 更像是一种约定，而不是一种功能。如果函数的名字以 use 开头，并且调用了其他的 Hook，则就称其为一个自定义 Hook
723 |
724 | #### demo:自定义计数器
725 |
726 | ```
727 | function useNumber(){
728 | const [number,setNumber] = useState(0);
729 | useEffect(() => {
730 | console.log('开启一个新的定时器')
731 | const $timer = setInterval(()=>{
732 | setNumber(number+1);
733 | },1000);
734 | return ()=>{
735 | console.log('销毁老的定时器')
736 | clearInterval($timer);
737 | }
738 | });
739 | return number;
740 | }
741 | function Counter1(){
742 | let number1 = useNumber();
743 | return (
744 | <>
745 | {number1}
746 |
747 | )
748 | }
749 | function Counter2(){
750 | let number = useNumber();
751 | return (
752 | <>
753 | {number}
754 |
755 | )
756 | }
757 | function App(){
758 | return <>
759 | }
760 | ```
761 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-advanced",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "express": "^4.17.1",
7 | "react": "^16.12.0",
8 | "react-dom": "^16.12.0",
9 | "react-scripts": "3.2.0"
10 | },
11 | "scripts": {
12 | "start": "react-scripts start",
13 | "build": "react-scripts build",
14 | "test": "react-scripts test",
15 | "eject": "react-scripts eject"
16 | },
17 | "eslintConfig": {
18 | "extends": "react-app"
19 | },
20 | "browserslist": {
21 | "production": [
22 | ">0.2%",
23 | "not dead",
24 | "not op_mini all"
25 | ],
26 | "development": [
27 | "last 1 chrome version",
28 | "last 1 firefox version",
29 | "last 1 safari version"
30 | ]
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullStack-feed/react-advanced/0952fa2dcc2cb6b28313f827fdb25528a3448b2a/public/favicon.ico
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
17 |
18 |
27 | React App
28 |
29 |
30 |
31 |
32 |
42 |
43 |
44 |
--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullStack-feed/react-advanced/0952fa2dcc2cb6b28313f827fdb25528a3448b2a/public/logo192.png
--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/fullStack-feed/react-advanced/0952fa2dcc2cb6b28313f827fdb25528a3448b2a/public/logo512.png
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 |
--------------------------------------------------------------------------------
/src/React-Router/react-router-dom/BrowserRouter.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Context from './context';
3 | export default class HashRouter extends Component {
4 | state = {
5 | location: {
6 | pathname: document.location.pathname,
7 | state: undefined
8 | }
9 | }
10 | componentDidMount() {
11 | window.onpopstate = (event) => {
12 | this.setState({
13 | location: {
14 | ...this.state.location,
15 | pathname: document.location.pathname,
16 | state: event.state
17 | }
18 | });
19 | }
20 | window.onpushstate = ({ state, pathname }) => {
21 | this.setState({
22 | location: {
23 | ...this.state.location,
24 | pathname,
25 | state
26 | }
27 | });
28 | }
29 | }
30 | render() {
31 | let value = {
32 | location: this.state.location,
33 | history: {
34 | location: this.state.location,
35 | push: (to) => {
36 | if (typeof to === 'object') {
37 | let { pathname, state } = to;
38 | window.history.pushState(state, '', pathname);
39 | } else {
40 | window.history.pushState('', '', to);
41 | }
42 | }
43 | }
44 | }
45 | return (
46 |
47 | {this.props.children}
48 |
49 | )
50 | }
51 | }
--------------------------------------------------------------------------------
/src/React-Router/react-router-dom/HashRouter.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Context from './context';
3 | export default class HashRouter extends Component {
4 | state = {
5 | location: {
6 | pathname: window.location.hash.slice(1) || '/',
7 | state: undefined
8 | }
9 | }
10 | componentDidMount() {
11 | window.addEventListener('hashchange', event => {
12 | this.setState({
13 | location: {
14 | ...this.state.location,
15 | state: this.locationState,
16 | pathname: window.location.hash.slice(1) || '/'
17 | }
18 | });
19 | });
20 | window.location.hash = window.location.hash || '/';
21 | }
22 | render() {
23 | let value = {
24 | location: this.state.location,
25 | history: {
26 | location: this.state.location,
27 | /**
28 | * 兼容 字符串 & 对象的使用方式
29 | */
30 | push: (to) => {
31 | if (typeof to === 'object') {
32 | let { pathname, state } = to;
33 | this.locationState = state;
34 | window.location.hash = pathname;
35 | } else {
36 | window.location.hash = to;
37 | }
38 | }
39 | }
40 | }
41 | return (
42 |
43 | {this.props.children}
44 |
45 | )
46 | }
47 | }
--------------------------------------------------------------------------------
/src/React-Router/react-router-dom/Link.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Context from './context';
3 | export default class Link extends Component {
4 | static contextType = Context;
5 | /**
6 | * - 需要获取当前history.push方法
7 | * - 监听onClick事件
8 | * - 将props中的to 传递给history.push 进行路由跳转
9 | */
10 | render() {
11 | return (
12 | this.context.history.push(this.props.to)}
14 | >
15 | {this.props.children}
16 |
17 | )
18 | }
19 | }
--------------------------------------------------------------------------------
/src/React-Router/react-router-dom/Redirect.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Context from './context';
3 | /**
4 | * 相对简单，只是一个普通组件
5 | *
6 | * 在组件挂载时执行history.push方法
7 | */
8 | export default class extends Component {
9 | static contextType = Context;
10 | componentDidMount() {
11 | this.context.history.push(this.props.to);
12 | }
13 | render() {
14 | return null;
15 | }
16 | }
--------------------------------------------------------------------------------
/src/React-Router/react-router-dom/Route.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Context from './context';
3 | import { pathToRegexp } from 'path-to-regexp';
4 | //如果你给类增加了一个static contextType，this.context= Provider.value
5 | export default class Route extends Component {
6 | static contextType = Context;
7 | render() {
8 | let location = this.context.location;
9 | let history = this.context.history;
10 | let pathname = location.pathname;
11 | let { path = "/", component: RouteComponent, exact = false, render, children } = this.props;
12 | let keys = [];
13 | let regexp = pathToRegexp(path, keys, { end: exact });
14 | let result = pathname.match(regexp);
15 | let props = {
16 | location,
17 | history,
18 | }
19 | if (result) {
20 | //处理match params
21 | let [url, ...values] = result;//
22 | let paramNames = keys.map(item => item.name);
23 | let params = paramNames.reduce((acc, curr, index) => {
24 | acc[curr] = values[index];
25 | return acc;
26 | }, {});
27 | let match = {
28 | url,//匹配的URL地址
29 | path,//匹配的路径
30 | isExact: pathname === url,//是否精确匹配
31 | params//匹配的路径参数对象
32 | }
33 | props.match = match;
34 | if (RouteComponent) {
35 | return
36 | } else if (render) {
37 | return render(props);
38 | } else if (children) {
39 | return children(props);
40 | } else {
41 | return null;
42 | }
43 | } else {
44 | if (children) {
45 | return children(props);
46 | } else {
47 | return null;
48 | }
49 | }
50 | return null;
51 | }
52 | }
--------------------------------------------------------------------------------
/src/React-Router/react-router-dom/Switch.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import Context from './context';
3 | import { pathToRegexp } from 'path-to-regexp';
4 | export default class Switch extends Component {
5 | static contextType = Context;
6 | render() {
7 | let location = this.context.location;
8 | let pathname = location.pathname;
9 | if (!this.props.children) {
10 | return null;
11 | }
12 | /**
13 | * 循环子组件，匹配对应的路由
14 | *
15 | * 将路由返回给History/BrowserRouter执行
16 | */
17 | for (let i = 0; i < this.props.children.length; i++) {
18 | let child = this.props.children[i];
19 | let { path = "/", component: RouteComponent, exact = false } = child.props;
20 | let regexp = pathToRegexp(path, [], { end: exact });
21 | let result = pathname.match(regexp);
22 | if (result) {
23 | return child;
24 | }
25 | }
26 | }
27 | }
--------------------------------------------------------------------------------
/src/React-Router/路由基础原理/hash.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | React App
10 |
11 |
12 |
13 | 去/a
14 | 去/b
15 |
16 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/src/React-Router/路由基础原理/history.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 | Document
8 |
9 |
10 |
11 |
12 |
67 |
68 |
69 |
--------------------------------------------------------------------------------
/src/Redux-React/components/connect.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from '../react-redux';
3 | import actions from '../store/actions/counter1';
4 | /**
5 | * 通常在组件使用原生Redux时需要做如下四件事儿：
6 | *
7 | * - 引入store
8 | * - 将需要的状态映射成组件内部的状态 （this.state = store.getState()）
9 | - 当状态发生改变后，需要手动 订阅和取消订阅 一个“视图更新”函数，例如this.setState()
10 | * - bindActionCreators,使得组件内部方便执行actions
11 | *
12 | * 如下两点是有区别的：
13 |
14 | * - 绑定的actions不一样（来自不同的action）
15 | *
16 | * - 映射的状态不同
17 | */
18 | class Counter1 extends Component {
19 | render() {
20 | return (
21 |
22 |
{this.props.name}:{this.props.number}
23 |
24 |
25 |
26 |
38 | {/*
39 | 修改store中的数据唯一方式：
40 | dispatch 一个 action
41 | action 就是一个type（必有） + payload（可无）
42 | */}
43 |
44 |
45 |
46 | )
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/Redux/components/2.bindActionCreators-base.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import actions from '../store-模块化reducer/actions/counter1';
3 | import { createStore, bindActionCreators } from 'redux';
4 |
5 | function counterReducer(state, action) {
6 | switch (action.type) {
7 | case ADD:
8 | return { number: state.number + action.amount }
9 | break;
10 | case MINUS:
11 | return { number: state.number - action.amount }
12 | default:
13 | break;
14 | }
15 | }
16 | let store = createStore(counterReducer, { number: 0 });
17 | // action 加持 store.dispatch 仅此而已。
18 | let boundActions = bindActionCreators(actions, store.dispatch);
19 | class Counter extends Component {
20 | constructor() {
21 | super(props)
22 | this.state = {
23 | number: store.getState().number
24 | }
25 | }
26 | componentDidMount() {
27 | this.unsubscribe = store.subscribe(() => this.setState({ number: store.getState().number }))
28 | }
29 | componentWillUnmount() {
30 | this.unsubscribe();
31 | }
32 |
33 |
34 | render() {
35 | return (
36 |
37 |
38 |
39 |
40 | )
41 | }
42 | }
43 |
--------------------------------------------------------------------------------
/src/Redux/components/3.模块化reducer后的使用.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import actions from '../store-模块化reducer/actions/counter1';
3 | import { bindActionCreators } from '../redux';
4 | import store from '../store-模块化reducer'
5 | let boundActions = bindActionCreators(actions, store.dispatch);
6 | class Counter extends Component {
7 | constructor() {
8 | super(props)
9 | this.state = {
10 | // 这里需要取对应的state
11 | number: store.getState().counter1.number
12 | }
13 | }
14 | componentDidMount() {
15 | this.unsubscribe = store.subscribe(() => this.setState({ number: store.getState().counter1.number }))
16 | }
17 | componentWillUnmount() {
18 | this.unsubscribe();
19 | }
20 |
21 |
22 | render() {
23 | return (
24 |
25 |
26 |
27 |
28 | )
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/src/Redux/components/4.React-Redux.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { connect } from '../react-redux';
3 | import actions from '../store/actions/counter1';
4 | /**
5 | * 所有用到Redux中状态的组件都要：
6 | *
7 | * 1.引入仓库
8 | * 2.都要订阅状态事件(刷新视图)和取消订阅（组件卸载时）
9 | * 3.都要获取仓库中的状态 映射为当前组件状态 （this.state = store.getState()）
10 | * 4.都要绑定actions(bindActionCreators,使得组件内部方便执行actions)
11 | *
12 | * 不同点
13 | * 1. 绑定的actions不一样（来自不同的action）
14 | *
15 | * 2. 获取的子状态不一样
16 | */
17 | class Counter1 extends Component {
18 | render() {
19 | return (
20 |
21 |
{this.props.name}:{this.props.number}
22 |
23 |
24 |
25 |
26 | // setName(e.target.value)}
30 | // />
31 | //
32 | //
33 | // );
34 | // };
35 |
36 | // !!! useCallback 当内部使用了useState后，需要注意依赖项的问题
37 | // 这种情况下，函数内部的number没有发生联动，导致addClick并不能真正的设置setNumber的值
38 | // const addClick = useCallback(() => setNumber(number + 1), []);
39 |
--------------------------------------------------------------------------------
/src/hooks/useContext/index.js:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useReducer, useState, useContext } from 'react';
2 | // 语法糖而已，注意 供应商和消费者关系
3 | let MyContext = React.createContext();
4 |
5 | function App() {
6 | const [state, setState] = useState({ number: 0 });
7 | return (
8 | // 向下暴露数据
9 |
10 |
11 |
12 | )
13 | }
14 |
15 | function Counter() {
16 | // 只是把MyContext解构出来，不要想多了
17 | // 不管父组件是否进行SCU优化，或者memo优化，只要MyContext发生改变，就会重新渲染该组件
18 | let { state, setState } = useContext(MyContext);
19 | return (
20 |
21 |
{state.number}
22 |
23 |
34 | setName(e.target.value)}
38 | />
39 |
40 |
41 | );
42 | };
43 |
--------------------------------------------------------------------------------
/src/hooks/useReducer/index.js:
--------------------------------------------------------------------------------
1 | import React, { useCallback, useReducer } from 'react';
2 | let initialState = { number: 0 };
3 | const INCREMENT = 'INCREMENT';
4 | const DECREMENT = 'DECREMENT';
5 | function reducer(state, action) {
6 | switch (action.type) {
7 | case INCREMENT:
8 | return { number: state.number + 1 };
9 | case DECREMENT:
10 | return { number: state.number - 1 };
11 | default:
12 | return state;
13 | }
14 | }
15 | //TODO: 什么时候使用useState 和 useReducer
16 | //useState 实现原理：
17 | const useState = (initialState) => {
18 | const reducer = useCallback((state, action) => action);
19 | let [state, dispatch] = useReducer(reducer, initialState);
20 | function setState(payload) {
21 | dispatch(payload);
22 | }
23 | return [state, setState];
24 | }
25 | const App = () => {
26 | let [state, dispatch] = useReducer(reducer, initialState);
27 | // let [state, setState] = useState(initialState);
28 | return (
29 |
30 |
{state.number}
31 |
32 |
33 |
15 |
{this.state.number}
16 |
17 |
25 |
{counter}
26 | {/* NOTE:
27 |
28 | setState函数在使用时候，要注意避免循环渲染，例如这样调用：
29 |
59 |
当前state中的number为：{state}
60 |
61 |
62 |
81 |
{state.number}
82 |
83 |
86 |
87 |
88 |
105 |
106 | {state.name}:{state.number}
107 |
108 |
111 |
114 |
123 |
124 | {state.name}:{state.number}
125 |
126 |
129 | {/* 此时会判定为相同对象，不会进行更新操作,使用的是Object.is方法来判断是否相同 */}
130 | {/* https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/is */}
131 |
132 |
160 |
161 | {name}:{number}
162 |
163 |
166 |
169 |
7 | Hey
8 |
9 | }
10 | ReactDOM.render(, document.getElementById('root'));
--------------------------------------------------------------------------------
/src/my_react/index.js:
--------------------------------------------------------------------------------
1 | import React from './react';
2 | import ReactDOM from './react-dom';
3 |
4 | let element = React.createElement(
5 | 'h1',
6 | { style: { color: "red", background: "green" } },
7 | 'hello',
8 | React.createElement('span', null, 'world')
9 | )
10 | console.log(element);
11 | // debugger
12 | ReactDOM.render(element, document.getElementById('root'));
--------------------------------------------------------------------------------
/src/my_react/react-dom/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * - 根据虚拟DOM创建真实DOM元素
3 | *
4 | * - 向目标节点挂载DOM
5 | *
6 | * @param {*} element
7 | * @param {*} parentNode
8 | * @param {*} componentInstance
9 | */
10 | function render(element, parentNode, componentInstance) {
11 | // 防止文本节点
12 | if (typeof element === "string" || typeof element === "number") {
13 | return parentNode.appendChild(document.createTextNode(element));
14 | }
15 | let type = element.type,
16 | props = element.props;
17 | // 兼容处理类组件和函数组件
18 | let isReactComponent = type.isReactComponent;
19 | if (isReactComponent) {
20 | // TODO: 这里不懂
21 | componentInstance = new type(props);
22 | element = componentInstance.render();
23 | type = element.type;
24 | props = element.props;
25 | } else if (typeof type === "function") {
26 | element = type(props);
27 | type = element.type;
28 | props = element.props;
29 | }
30 | let reallyDOM = createDOM(type, props, componentInstance);
31 | if (isReactComponent) componentInstance.dom = reallyDOM;
32 | parentNode.appendChild(reallyDOM);
33 | }
34 | /**
35 | *
36 | *
37 | * @param {*} type
38 | * @param {*} props
39 | * @param {*} componentInstance
40 | */
41 | export function createDOM(type, props, componentInstance) {
42 | let currentDOM = document.createElement(type);
43 | for (let propName in props) {
44 | if (propName === 'children') {
45 | // 开始递归创建子节点
46 | let childrenNode = props.children;
47 | // console.log(childrenNode);
48 | childrenNode.forEach((child) => { render(child, currentDOM, componentInstance) })
49 | } else if (propName === "style") {
50 | let styleObject = props.style;
51 | for (let styleAttr in styleObject) {
52 | currentDOM.style[styleAttr] = styleObject[styleAttr];
53 | }
54 | } else if (propName === "className") {
55 | currentDOM.className = props.className;
56 | } else if (propName.startsWith('on')) {
57 | // TODO: 事件处理
58 | } else {
59 | // 认为是自定义属性字段
60 | currentDOM.setAttribute(propName, props[propName])
61 | }
62 | }
63 | return currentDOM;
64 | }
65 | export default {
66 | render
67 | }
68 |
--------------------------------------------------------------------------------
/src/my_react/react/index.js:
--------------------------------------------------------------------------------
1 |
2 | import { createDOM } from "../react-dom";
3 |
4 | /**
5 | * 功能：
6 | * - 创建虚拟DOM元素？（用于收集虚拟DOM元素的所有属性）
7 | * -
8 | *
9 | *
10 | *
11 | * @param {*} type
12 | * @param {*} config
13 | * @param {...any} children
14 | */
15 | function createElement(type, config, ...children) {
16 |
17 | let props = {
18 | ...config,
19 | children
20 | }
21 | let element = { type, props };
22 | return element;
23 | }
24 | class Component {
25 | static isReactComponent = true;
26 | constructor(props) {
27 | this.props = props;
28 | this.updateQueue = [];
29 | this.isBatchingUpdate = false;
30 | }
31 |
32 | /**
33 | * 1. 批量更新模式（同步）
34 | * @param partialState
35 | */
36 | setState(partialState) {
37 | this.updateQueue.push(partialState);
38 | if (!this.isBatchingUpdate) {
39 | } else {
40 | this.flushUpdateQueue();
41 | }
42 | }
43 |
44 | /**
45 | * 刷新所有缓存的partialState
46 | */
47 | flushUpdateQueue = () => {
48 | // this.updateQueue.reduce((memo,cur) => {
49 | // if(typeof cur === 'function') {
50 | // memo = {...memo,...cur(memo)};
51 | // }else {
52 | // // 数组和对象的情况下
53 | // memo = {...memo,...cur}
54 | // }
55 | // return memo;
56 | // // 这里的state也没定义
57 | // },this.state)
58 |
59 | //这样就不需要在手动的清空数组
60 | while (this.updateQueue.length) {
61 | let item = this.updateQueue.shift();
62 | if (typeof item === 'function') {
63 | this.state = { ...this.state, ...item(this.state) };
64 | } else {
65 | // 数组和对象的情况下
66 | this.state = { ...this.state, ...item }
67 | }
68 | return this.state;
69 | }
70 | renderComponent(this);
71 | }
72 | }
73 |
74 | /**
75 | *
76 | * @param componentInstance
77 | */
78 | function renderComponent(componentInstance) {
79 | // 获取新的DOM元素
80 | let renderElement = componentInstance.render();
81 | //
82 | let newDOM = createDOM(renderElement.type, renderElement.props, componentInstance);
83 | // 暴力更新, 老的DOM节点：componentInstance.dom
84 | componentInstance.dom.parentNode.replaceChild(newDOM, componentInstance.dom);
85 | // 更新老的节点为：newDOM
86 | componentInstance.dom = newDOM;
87 | }
88 |
89 | export default {
90 | createElement,
91 | Component
92 | }
93 |
--------------------------------------------------------------------------------