React技术栈
文章平均质量分 83
@baby张
但凡不能杀死你的,必定会使你更强大。
展开
-
(已开源)基于高德SDK 、Api,实现纯H5的精准坐标选址工具
背景由于第一版是基于端上 Windvane 做的跨页面选址工具,社区内有不少同学希望做个支持纯H5的版本这也是我在一期时候的待完善计划之一一期:基于 高德 + Windvane 的选址工具,对高德选址组件说:拜拜一期端版本基础功能整个选址工具做成一个单独维护的项目,通过端上能力,跨页面访问,通信并返回最终数据结果。功能分析其中借助端上的能力有:openPage 新开页面exitPage 退出容器getLocation 获取(火星坐标)经纬度nativePostMsgToJs原创 2021-11-18 11:13:52 · 1561 阅读 · 3 评论 -
基于 高德 + Windvane 的H5选址工具,纵享丝滑,对高德选址组件说:走你
一、背景1.1 需求**多个产品和业务方反应:**高德的选址组件不好用,跟demo一样,能不能换一个?秉承着,作为一名即将优秀的程序员不能 Say NO 的原则,我接了下来1.2 现有方案缺失于是我查看了菜鸟可能涉及选址的多个App,发现基本还是使用的高德选址组件。个别的项目里有简单的选址功能,无法满足业务需求,且耦合性太强无法通用(如果已经有了,那可能是我没找到 勿怪)二、业务中分析痛点对于一般业务需求这个选址还是没毛病的以下只针对特殊业务需求,对高德选址组件的客观分析原创 2021-09-03 18:55:48 · 861 阅读 · 4 评论 -
多组件混合引用时,容易忽略的 import 小细节,可不能学我光为了代码好看(小坑)
报错截图组件页面展示正常,控制台报错index.js:1 Warning: React.createElement: type is invalid – expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it’s defi原创 2021-04-28 20:44:05 · 1198 阅读 · 1 评论 -
(建议收藏)Vue3 对比 Vue2.x 差异性、注意点、整体梳理,与React hook比又如何?(面试热点)
前言前不久Vue3的RC版本终于发布,一直没时间研究,这篇文章我将以下面的结构,为大家整体梳理下Vue3,顺便对比下vue2.x和react hook结合着带大家看看,可能有些长,耐心看完相信会有收获(面试热点)。文章目录前言一、为什么重写vue2.X?1.1背景1.2尤雨溪的回答是两个关键因素:二、Vue2.x 到 Vue3 详细对比2.1 生命周期的变化2.2- 使用proxy代替defineProperty2.2.1- Object.defineProperty()语法2.2.2- Proxy的原创 2020-11-06 12:31:12 · 846 阅读 · 0 评论 -
React hook + 完整Webpack配置详细翻译
抽空整理了react hook的使用demo,完整webpack4的配置详细翻译大致内容如下: github地址,项目里有详细说明,star原创 2020-09-02 12:05:33 · 439 阅读 · 0 评论 -
Ant Design v4+Craco 中如何动态生成 Icon 结点
Ant Design 4+ 出来之后一直没有在项目中使用,也不敢轻易升级项目中的版本,官网看似变化不大,其实几乎所有组件都有改动,甚至有的组件如Form 、Tree 、 Select、 Table 等整个重写了从v3到v4的更新变化,详细新项目尝试了下Antd4 感觉比以前更简单明了,由于很多组件存在细微变化,使用起来还是看文档为主,基本都正常解决,直到遇到一个问题~~~~侧边菜单的Icon动态生成问题当然直接使用antd 的Menu组件写死也是可以的,但菜单多的话,就不好管理了,那我们就创建原创 2020-08-04 18:18:40 · 1904 阅读 · 10 评论 -
Node-sass 无法安装报错坑
Node-sassNode-sass是一个库,它将Node.js绑定到LibSass(流行样式表预处理器Sass的C版本)。它允许用户以令人难以置信的速度将.scss文件本地编译为css,并通过连接中间件自动编译。安装时候问题之前基本一直用的less,今天拉了个sass的项目,install 一下直接炸裂。。。发现是node-sass安装问题,然后尝试单独安装node-sasscnpm install --save-dev node-sass//或yarn add node-sass无论我原创 2020-07-29 14:29:28 · 1739 阅读 · 0 评论 -
基于react-app、TS、webpack4一步步搭建可生产的react框架****demo有详细翻译注释说明****
文章供未搭建过生产环境框架的朋友学习,不严谨处望大佬指正Hello 小伙伴们,首先问一下你们有自己搭过react框架嘛?demo地址:https://github.com/babybrotherzb/React-Hook我好像听到了你们说:of course, react-app是的说到搭建框架,现在基本都是用的脚手架,简单、快速、高效的脚手架提供给我们的只是通常最基础的一些配套设备,对于我们自己写写demo的话甚至不需要对脚手架进行改动,也就更不会改webpack的配套文件了。然而但如果应用到原创 2020-07-08 18:14:13 · 1284 阅读 · 4 评论 -
Datav超炫酷的可视化,大屏数据展示组件库-dataV组件库,“react-vue -组件库”
对可视化有所了解的应该都知道,某云平台的一款datav大屏可视化的工具,作者前年买了个个人版的,直接在页面上拖住就可以了确实很强。最近平台发来邮件,说我的个人版datav到期了,本来想续租,发现之前的个人版下架了,只剩下企业版、专业版、至尊版,最便宜的企业版一年4800,看着这价钱我慌了,够我吃一年小龙虾的了,不香嘛。果断放弃续费。。。于是乎,就发现了这款github刚出来几个月的组件库。datav如他所言:开源长期维护, 目前支持vue 、react、npm所以组件都有vue和react版可以切.原创 2020-06-01 15:55:15 · 10756 阅读 · 8 评论 -
Sortable简单好用的拖拽排序工具
Sortable超简单好用的拖拽排序工具很好的拖拽排序工具,支持原始js,vue ,react,angular,可惜官网访问太慢,将文档整理放博客里,随时访问,https://www.npmjs.com/package/sortablejs特点兼容性好简单原生CSS框架兼容性零依赖SPA支持良好安装安装方法方法npm / yarnnpm install...原创 2020-04-03 17:06:36 · 7059 阅读 · 4 评论 -
基于Koa(Node)搭建websocket链接redis实现即时通信
项目中使用的场景:账户扫码登录,微信扫码授权,消息实时提醒,配置结果响应,客户端同步数据。。。之前项目里做即时通信都是用的轮循,轮询的效率低,非常浪费资源,后面好几个项目都开始用的websocket配合koa和redis来实现,现在整理整理深入了解下整个即时通信实现的过程。前提:需要安装的包koa 由 Express 幕后的原班人马打造,使用起来比Node更优雅简洁 https://k...原创 2020-03-18 16:16:57 · 2623 阅读 · 4 评论 -
【坑】antd 汉化、国际化语言配置失效 (设置中文不起作用)
最近做一个新项目,react + ts +antd ^3.26.0,在国际化全局配置之后,发现日历的语言并没用变成我设置的中文,百度找了也没有例子,然后看了 ^3.26.0版本的antd语言包和之前版本项目语言包进行了对比,发现了新版本的antd ^3.26.0居然没有配置日期的汉化。一、问题截图在App入口的时候进行了全局的语言包配置import React, { memo } fro...原创 2019-12-20 11:25:56 · 11764 阅读 · 11 评论 -
基于React Hook 的 React Router4 路由统一配置管理(v4.0+ )
写过vue的小伙伴都知道,vue的路由是在new Router 里统一配置的,写起来也特别爽,路由层次很清除,也很方便管理,然而react的路由相比较而言就有局限性,也不方便管理。import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)let roles = [ { pa...原创 2019-12-17 16:59:22 · 3893 阅读 · 3 评论 -
React hook 10种 Hook (详细介绍及使用)
React Hook是什么?React官网是这么介绍的: Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。完全可选的 你无需重写任何已有代码就可以在一些组件中尝试 Hook。但是如果你不想,你不必现在就去学习或使用 Hook。100% 向后兼容的 Hook 不包含任何破坏性改动。现在可用 H...原创 2019-11-07 21:51:20 · 14830 阅读 · 5 评论 -
styled-components:前端组件拆分新思路
感觉文章挺好的转载收藏一波:作者:神三元 https://juejin.im/post/5d1ae68fe51d454f7230255d一直在思考React组件如何拆分的问题,直到接触到styled-components,让我有一种如鱼得水的感觉,今天我就给大家分享一下这个库如何让我们的前端组件开发的更优雅,如何保持更合适的组件拆分粒度从而更容易维护。一、使用方法styled-c...转载 2019-10-12 11:04:04 · 638 阅读 · 0 评论 -
UMeditor实战应用
***一、最好下载最新版的UMeditor,使用PhP的版本开发 ,UM比Ue更简洁,优化程度更高,(官方文档都是对ueditor的介绍,对UM的实用性不高,很多东西都无法参考)https://ueditor.baidu.com/website/umeditor.htmlthird-party 文件夹里是算法js和JQ文件themes 文件夹里放的是一些默认的images和c...原创 2019-03-04 19:39:43 · 3537 阅读 · 5 评论 -
websocket(Redis,node, react 三方处理)
利用Redis发布/订阅特性来广播消息,nodejs订阅Redis的消息,订阅到消息后利用前端创建的websocket来发送通知前端更新消息这就类似于用收音机广播的时候,你想下次继续收听,你首先得订阅这个频道,后面想听只要打开收音机,调到对应的频道,就可以了。一、后端Redis广播消息定义广播事件代码相关片段<?php namespace App\Events; use I...原创 2019-08-22 10:38:15 · 2304 阅读 · 0 评论 -
Redux 使用 compose 和中间件增强 store(可视化)
使用过redux的小伙伴都知道store的创建很简单import { createStore } from 'redux'import rootReducer from './reducers'let store = createStore(rootReducer )这样就创建好了,但实际开发中这并不满足我们的开发需求,这时候我们就要对store进行增强,redux给我提供了一个comp...原创 2019-08-28 11:48:17 · 1347 阅读 · 2 评论 -
自己封装Redux 中间件
一、类似于redux-logger的打印效果const logger = store => next => action => { console.group(action.type) console.log(colors.yellow('pre state'), store.getState()) console.log(colors.blue('action')...原创 2019-08-28 15:25:03 · 460 阅读 · 0 评论 -
React+Css3图片预览(缩放、旋转、切换)
自己写的一个react缩放组件,主要通过CSS3的动画来实现的,有对应的介绍和使用方法。这是之前发布的一个JQ版的缩放demo,原理差不多。https://blog.csdn.net/weixin_43648947/article/details/88132986一、新建的文件夹 newimg.jsx这个里面是处理图片的子组件import React, {Component} f...原创 2019-03-04 20:09:59 · 8328 阅读 · 0 评论