bangbDIV的博客

实现atnd v3实现合计行

思路：分两步，第一步将数据转成excel, 第二部将excel压缩 通过a标签完成下载。代码import * as React from 'react';import styles from './index.module.scss';import JSZip from 'jszip';import XLSX from 'xlsx';const Guide = () => { // 将workbook装化成blob对象 const workbook2blob = (work

1.安装依赖yarn add xlsx2.项目引入import * as XLSX from 'xlsx';3.在上传文件函数内执行 ( 根据场景自定义处理时机 )const uploadChange = (uploadFile) => { // 通过FileReader对象读取文件 const fileReader = new FileReader(); // readAsArrayBuffer之后才会启动onload事件 fileRea

react核心方法有ReactDom.render, React.createElement, setState三种方法。webpack+babel 会将 jsx 转换成 React.createElement(type, props, ...children)。正常写组件被babel转换之后, React.createElement(type, props, ...children)

1.什么是react事件合成在react中，我们使用的事件onclick等，并不是原生事件，是由原生事件合成的react事件, 如 click事件合成onclick等。我们绑定在 dom上的事件逻辑，并没有 注册到真实dom上， 而是统一绑定在了 document上管理 绑定在dom的事件已经被react底层处理成空函数为什么要做事件合成呢？为了防止 很多事件绑定在真实dom上的不可控的情况 也是react的出发点，为了实现一个全浏览器的框架，为了实现这种目标就需要提供全浏览器一致性的事件

后端接口返回html结构，前端进行预览展示，需要先转译，然后进行div的dangerouslySetInnerHTML属性进行展示// 函数方法部分 const HTMLDecode = (text: any) => { let temp: any = document.createElement("div"); temp.innerHTML = text; let output = temp.innerText || temp.textContent; te.

1. 调用setState时候并没有立即执行，而是触发Updater更新，将callback函数和nextState进行先添加操作setState(nextState,callback) { // 添加异步队列, 并不是直接进行更新 this.$updater.addCallback(callback); this.$updater.addState(nextState);}2.class Updater { addCallback(callba.

https://segmentfault.com/a/1190000017483690#articleHeader9

1. reducer.js: combineReducers插件进行多个reducer整合,2. store.js: 在createStore中，将整合后的reduce传入，applyMiddleware插件处理redux-thunk加强action3. app.js:通过Provider标签将store传入1. app.jsimport React from 'reac...

redux-thunk大致概括写法大致概括redux-thunk改写了dispatch API,使其具备接受一个PlainObject作为参数的能力。在 redux的dispatchaction => reducer => store这个流程中，在action发起后，reducer接受前加入一些扩展操作(如：发请求等)写法原来//action.jsconst LI...

大致概括redux-saga相比较比redux-thunk写法更优雅，被实现为 generator，把异步行为放在了saga中进行处理。保持了action的整洁性。功能类似redux-thunk + async/await。redux-saga 的 effectsredux-saga中的 Effects 是一个纯文本 JavaScript 对象，包含一些将被 saga middlewa...

目录需求：父组件下两个子组件，点击1修改数据，在组件 2显示reducer.js父组件content.js子组件1子组件2需求：父组件下两个子组件，点击1修改数据，在组件 2显示思路：父组件通过createContext.Provider传递数据与方法 子组件通过useContext进行获取数据与方法 通过方法操作reducerreducer.jsexport const defaultState = { value: 0}export fu.

webpack.config.js（基础配置不介绍了，直接走HMR配置）devServer开启hot plugins部分启用webpack.HotModuleReplacementPlugin() 配合 npm installreact-hot-loader --saveconst webpack = require('webpack');const { resolve } =require('path');const HtmlWebpackPlugin = require('html-w.