react

现在前端基本不是vue技术栈就是react技术栈。 vue技术栈最常用的就是element-ui的ui框架了。 在项目中，我们经常会碰到这种需求：批量上传文件 element-ui 确实也为我们提供了<el-upload>这样的组件，同事也暴露了很多的属性和方法供我们使用。 但是很多人却碰到了这样的问题：项目需求是批量上传，但是为什么自己上传的时候，也成功了，但是却是一张一张上传的，这种上传方式有时候并不违背我们的需求，但有时又不是我们需要的。那么，怎么解决批量上传并携带参数呢，我这里写了一个demo， 可供大家参考： 1 < template > 2 < div > 3 < el-form > 4 < el-form-item > 5 < el-upload 6 ref ="upload" 7 action ="/as" 8 multiple 9 :http-request ="handleUpload" 10 :auto-upload ="false" 11 :limit ="20" > 12 < el-button size ="small" type ="primary" > 点击上传 </ el-button > 13 < div slot ="tip" class ="el-upload__tip" > 只能上传jpg/png文件，且不超过500kb </ div >

前言 最近工作中需要制作一个图片预览的插件，在参考了很多产品（掘金、知乎、简书、石墨等）的图片预览之后，最终还是觉得石墨的比较符合我们的产品需求。 本来以为能在社区中找到相关插件，但想法美好，现实却很骨感，于是便决定自己手撸一个，顺便也学习一下组件的开发流程。 项目介绍 项目预览图 项目最终的实现效果如下图，基本上跟石墨的图片预览是一毛一样的。支持 放大图片 、 缩小图片 、 原尺寸大小显示 、 图片适应屏幕 、 下载图片(这个还在开发中) ，也就是底部栏的五个操作按钮。 技术栈 组件是基于 React Hooks 和 TypeScript 实现的，打包工具使用的是 webpack 。 本篇文章对 webpack 的配置不会做相应的介绍，如果大家对 webpack 感兴趣的话，可以参考笔者整理的 webpack 学习文档 。 项目目录 . ├── node_modules // 第三方的依赖 ├── config // webpack 配置文件夹 ├── webpack.base.js // webpack 公共配置文件 ├── webpack.dev.config.js // 开发环境配置文件 └── webpack.prod.config.js // 生产环境配置文件 ├── example // 开发时预览代码 ├── src // 示例代码目录 ├── app.js //

VSCode切换中文： 打开“vscode”。 按快捷键“Ctrl+Shift+P”。 在“vscode”顶部会出现一个搜索框。 输入“configure language”，然后回车。 “vscode”里面就会打开一个语言配置文件。 Auto Close Tag 自动闭合HTML标签 Auto Import import提示 Auto Rename Tag 修改HTML标签时，自动修改匹配的标签 Babel JavaScript babel插件，语法高亮 Babelrc .babelrc文件高亮提示 Beautify css /sass/scss/less css/sass/ less格式化 Better Align 对齐赋值符号和注释 Better Comments 编写更加人性化的注释 Bookmarks 添加行书签 Bracket Pair Colorizer 用不同颜色高亮显示匹配的括号 Can I Use HTML5、CSS3、SVG的浏览器兼容性检查 Code Outline 展示代码结构树 Code Runner 运行选中代码段（支持多数语言） Code Spell checker 单词拼写检查 CodeBing 快速打开Bing并搜索，可配置搜索引擎 Color Highlight 颜色值在代码中高亮显示 Color Info 小窗口显示颜色值，rgb,hsl

欢迎您开始 @medux 之旅，建议您依次阅读以下 4 篇文章，这将耗费您大约 30 分钟。 为什么你需要 @medux @medux 基础概念速览 @medux 路由篇 @medux 数据流 第 4 篇：medux 数据流 -- Github 地址 --- @medux 数据流示意图 基于 Redux 因为 Medux 基于 Redux，所以部分数据流与 Redux 很相似，比如： 保持全局单例的 Store Store 和 View 之间使用单向数据流 改变 Store 数据，必须通过 Reducer 调用 Reducer 必须通过显式的 dispatch Action 模块化 Store 每个 module 仅能通过 reducer 修改 Store 下的某个一级子节点(moduleState)，跨 module 不能直接修改 每个 module 可以读取所有 Store 的子节点 Store 一级子节点除了 moduleState 还可以是其它 ReduxReducers 管理的节点(比如 route)，它们依然遵循以上原则 封装 Effect 将所有副作用封装在 Effect 中执行 Effect 要修改 Store，必须重新 dispatch Action 通过 Reducer 来执行 Effect 可以通过 dispatch Action 来触执行另一个 Effect

欢迎您开始 @medux 之旅，建议您依次阅读以下 4 篇文章，这将耗费您大约 30 分钟。 为什么你需要 @medux @medux 基础概念速览 @medux 路由篇 @medux 数据流 为什么你需要 @medux -- Github 地址 --- 一站式解决方案 通常一个前端工程包含如下职能： UI 渲染框架 状态管理 路由管理 模块化管理（包括模块的定义、加载、维护） 结构化管理（如何组织各类文件与资源） 其中 UI 框架与宿主平台密切相关，比较独立且复杂，通常有多种不同风格的解决方案可供选择。而除此之外其它职能相对简单，基本上都可以抽象为通用跨平台的 JS 运行时。 所以简单来说， @medux 想创建一个可以对接不同 第三方UI框架 的通用前端框架，它包含统一的 状态管理 、 路由管理 、 模块化管理 、 结构化管理 等职能，可以广泛运行于支持 JS 运行时的平台上，这正是时下热门的 跨平台跨端 前端工程解决方案。 加厚的状态管理层 也许你还在犹豫是不是需要独立的状态管理层，因为把状态管理写在 UI 渲染层里似乎也挺顺手。但是在@medux 看来，你不仅需要把它们从 UI 中分离出来，而且还要尽可能的剥离多一点，因为： 状态层往往更抽象与稳定，UI 层更复杂与多变，将稳定的东西剥离出来可以减少改动 剥离状态管理后的 UI 更纯粹： UI=Render(State)

一 、 上传 formidable 天生可以处理上传的文件，非常简单就能持久上传的文件。 今天主要讲解的是，前后端的配合套路。 上传分为同步、异步。同步公司使用非常多，异步我们也会讲解。 1.1 先看一下 antd 中的 Form 和代码校验 我们看antd 中的 Form 组件， https://ant.design/components/form-cn/ 所谓的装饰器指的是将一个组件作为一个函数的参数。 MyForm 是一个标准的组件，要用 Form.create()() 装饰一下。 const WrappedRegistrationForm = Form.create()(MyForm); 装饰器，就是函数后面有两个圈比如， getFieldDecorator ()() 。第一个圈里写如何装饰，第二个圈里写被装饰的组件。 慢慢去分析人家的API ，慢慢看，慢慢琢磨。 1.2 上传前端套路和 formidable 的实现 <input type="file"/> 我们现在要制作提交，前端界面必须满足几点： 1 ）必须要用 form 标签嵌套，这是一个表单，不是一个 ajax 程序； 2 ）表单的 method 属性必须是 POST 3 ）必须有 enttype ，值是“ multipart/form-data ”，什么意思？下面有图片讲解 4) file 控件必须有 name

最近在学习的过程中，学习了一些关于redux的一些知识，学之前用redux，虽然会用但是实现的原理就不是特别清楚，天天沉迷于搬砖 总是这木搬砖也不是个事啊，就准备开始深入了解一些原理性的东西 首先在看redux之前，我们要知道，redux和react没有关系，他想和谁玩就和谁玩，任何框架都行，redux本身就是一个状态管理器 好了，接下来在进入Redux之前，我们先来看一看一个模式，这个模式叫做观察者模式（又称发布订阅模式） 啥叫观察者模式，打个比方（注意，单身狗撤退，当心扎心），就是你家所有人都比较关心你，然后当你有了对象你告诉他们，老子有对象了，他们就会接收到这个信息，你有对象了 此处只描述肯定不行啊，有图才能有真相，好吧，今天让你们看看啥叫抽搐派大师 第一状态：啥都没发生 下面进入第二状态，你家亲人都关心你 第三状态：你有女朋友了，高声呼喊 第四状态，你的亲戚接收到你的信息 好了，发布订阅模式讲完了， 读者：!!!!你说什么呢，小老弟，你咋这木快，我都没感觉你就结束了？ 又帅有聪明的我：咋说话呢，男人就不能说快，我一点都不快好吧，非常持久，不过上面的图真的就结束了发布订阅模式啊 读者：你TM的蒙我啊,找削啊 又帅又聪明的我:不是不是，这位大侠，你细听分说 　　我们来解析一下上图， 你===发布者，亲戚===订阅者　，蓝色箭头==订阅 　　亲戚关心你

React 中 setState()详细解读 对于 setState() 相信伙伴们都用过，它是 React 官方推荐用来更新组件 state 的 API，但是对于 setState() 你真的了解吗？且待我慢慢详聊一番。 setState() 官方用法指南 语法1： setState(updater[, callback]) updater：函数类型，返回一个更新后的 state 中的状态对象，它会和 state 进行浅合并。 callback： 可选，回调函数。 语法2： setState(stateChange[, callback]) setState: 对象类型，会将传入的对象浅层合并到新的 state 中。 callback：可选，回调函数。 对于这两种形式，不同的是第一个参数选择问题，可以选择一个函数返回一个新的state对象，亦可以直接选择一个对象应用于状态更新，那么啥时候选择函数类型的参数，什么时候选择对象类型的呢？这里可以总结两句话： 当前状态更新无需依赖之前的state状态时，选择对象类型参数 当前更新状态依赖之前的状态时，选择函数类型参数 example： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width

react中setState方法到底是异步还是同步，其实这个是分在什么 条件 下是异步或者同步。 1.先来回顾一下react组件中改变state的几种方式： import React, { Component } from 'react' class Index extends Component { state = { count: 1 } test1 = () => { // 通过回调函数的形式 this .setState((state,props)=> ({ count:state.count +1 })); console.log( 'test1 setState()之后', this .state.count); } test2 = () => { // 通过对象的方式(注意：此方法多次设置会合并且只调用一次！) this .setState({ count: this .state.count+1 }); console.log( 'test2 setState()之后', this .state.count); } test3 = () => { // 不能直接修改state的值，此方法强烈不建议！！！因为不会触发重新render this .state.count += 1 ; } test4 = () => { //

setState何时同步，何时异步，为什么 答案：在React库控制时，异步；否则同步。 示例代码如下： constructor(props){ super(porps); this.state = { name:"异步" } } test(){ this.setState({ name:"同步" }) alert(this.state.name) } <TouchableOpacity onPress={()=>this.test()}> <Text>Button</Text> </TouchableOpacity> 上文TouchableOpacity中，是React库控制，此时使用setState则为异步，alert值为"异步"。 如何才能触发同步呢？看如下代码： test(){ this.setState({ name:"同步" },function(){ alert(this.state.name) }) } 　　此时使用回调的方式，即可触发同步，大部分开发中用到的都是React封装的事件，比如onChange、onClick、onTouchMove等，这些事件处理程序中的setState都是异步处理的。 React是怎样控制异步和同步的呢？ 在 React 的 setState 函数实现中，会根据一个变量 isBatchingUpdates 判断是直接更新 this