2020年06月_素燃

原创在vscode 上搭建 React 源代码调试环境(16.8v)

克隆此仓库git clone https://gitee.com/frontend-qin/react-source-code.git配置 vscode安装插件 Debugger for Chrome 后url：必须是你的 react 项目启动的开发环境地址{ "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "La

2020-06-08 10:14:26 1977

原创 react-router5 - 实现 Switch 和 Redirect 组件

用法 <HashRouter> <Link to='/'>home</Link> <Link to='/about'>about</Link> <Link to='/mine'>mine</Link> <div> <Switch> <Route component={Home} path='/' exact></Route

2020-06-04 17:46:53 1281

原创 react-router4 - 实现Link组件进行点击跳转

原生Link组件用法 <Router> <Link to='/'>Home</Link> <Link to='/about'>About</Link> <Link to='/mine'>Mine</Link> <div> <Route component={Home} path='/' exact></Route> <Route comp

2020-06-03 17:49:11 2346

原创 react-router3 - 利用 path-to-regexp 实现路径及参数的匹配

上节代码也看到了，在判断的时候，是直接拿 props上传的 path 和监听到的 pathname作的全等比较那这样的话，如果手动传入 /about/1, /about/page/2 这样的路径就匹配不到了, 肯定会返回 null 的,path-to-regexp仓库path-to-regexp部分用法// pathToRegexp(str, [], {})传3个参数，要匹配的字符串目标，一个数组，最后是一个对象const { pathToRegexp } = require("path

2020-06-03 17:09:05 1480

原创 react-router2 - 实现 HashRouter 和 Route组件理解实现原理

原生库的使用官方路由使用效果演示实现思路1. 先导出俩组件react-router-dom / index.jsimport Route from './Route';import HashRouter from './HashRouter';export { HashRouter, Route };2. 创建上下文对象import React from 'react';export default React.createContext();3. HashRouter组件i

2020-06-03 15:57:02 508

原创 reactRouter1 - 路由实现原理(hash, history)

实现原理1. 利用hash和history这两种模式实现对路由的切换2. 根据匹配到的路径，渲染对应的组件hash模式原理通过监听 hashchange 事件，在回调里拿到 window.location.hash 的值hash 模式演示 <body> <a href="#/a">去a</a> <a href="#/b">去b</a> <div id="box"></div>

2020-06-03 13:47:50 2124

原创 redux8 - redux 中间件和 applyMiddleware 及其实现原理

参考redux仓库， redux-logger库新建个项目吧 - 引入 redux， react-redux中间件执行流程图演示代码仓库就这个演示了，点击 + 1 ，现在呢，我想打印个日志，就是每次点击按钮，都能打印出老的状态和新的状态理逻辑，既然是在每次点击事件之后打印，那么，如果想拿到老的状态，就需要在派发前，想拿到新的状态，就是在派发后先这样写：let store = createStore(reducers);let dispatch = store.dispatc

2020-06-02 18:11:46 249

原创 redux7 - 手写实现 react - redux 基本功能 Provider 和 connect

参考reac-redux 库源码以下实现的功能代码演示地址使用react-redux库官方 react-redux 库，使用index.jsimport React from 'react';import ReactDOM from 'react-dom';import { Provider } from 'react-redux';import store from './reducers/store';ReactDOM.render( <Provider store={st

2020-06-02 15:23:52 538

原创 redux6 - 实现 react-redux 前置技能react 高阶组件的使用

react-redux使用演示代码太多，就放codesandbox.io 了，可以看到，在组件中连接仓库和组件的一个重要方法， connect() ，该方法的返回值就是个高阶组件什么是高阶组件高阶组件：同高阶函数，参数可以是组件，或者返回一个组件，使用场景：一般用于公共部分的抽离，对一个组件进行包装，让它产生一些新的功能，或者返回一个新的UI组件演示效果：class App extends Component { render() { return ( &.

2020-06-02 09:27:39 213

原创 redux5 - 实现 react-redux 前置技能之 react库的context的使用

参考redux仓库的src目录，初步手写实现了以下3个方法createStore() ：创建数据仓库，导出了3个方法（dispacth，subscribe，getState）combineReducers()：合并多个小的reducer，传入一个对象bindActionCreators() : 简化代码 api，只需传入一次对象的语法，就不用再导出写 dispatch 了还剩下几个，先不说了，然而，就这么几行代码，已经基本让项目配合这些代码跑起来一个数据仓库了，然而，它还是有很多的冗余代

2020-06-01 17:29:08 320

原创 redux4 - 处理有多个 reducer时如何合并，以及实现 combineReducers

参考源码redux仓库redux原则之一就是单一性，即状态，仓库，reducer都是唯一的，但在组件式的技术开发中，为了好管理状态，通常一个组件，或嵌套组件对应一个 reducer，最后再合并成一个大的reducer代码太多，请参考演示代码代码演示两个组件的都有各自的组件状态，怎么进行合并可能有不明白，左边这个index.js 这个文件的 count1Reducer和count2Reducer的第一个参数为啥是那样写的解释一下：看右边的 count1Reducer() 函数，第一个参数

2020-06-01 16:04:50 1111

原创 redux3 - 通过提交函数派发action及手写实现 bindActionCreators 函数

dispatch 即可以是提交一个对象的语法，还可以提交一个函数的写法直接通过提交函数派发动作import React, { Component } from 'react';import ReactDOM from 'react-dom';import { createStore, bindActionCreators } from './redux';let initData = { num: 10,};// type 类型const ADD = 'ADD';cons.

2020-06-01 12:50:58 254

原创 redux2 - 原生html页面和react中使用自己手写的 - redux

原生html页面中redux.js// 创建仓库function createStore(reducer) { let currData; let listeners = []; const getState = () => currData; const dispatch = (action) => { currData = reducer(currData, action); listeners.forEach((fn) => fn()); }

2020-06-01 10:38:23 281

冲锋