业余前端的职业经历

然后就是 在哪个 .npm-global 里面 我这个可能是通过yarn安装的全局依赖 但是npm 安装应该和这个区别不大。删除那个全局依赖之后 你就可以使用 npx create-react-app（首先你本地的这个版本不要过低哈）现在安装 react项目其实都不建议你全局安装这个 create-react-app 了。这个时候建议你去找到那个 create-react-app的全局安装包。就是我的npm安装create-react-app一直抱着个问题。把它删除掉 （我这个是mac本）...

taro 中使用dva

taro 小程序 按需加载

直接先上效果哈有些动画效果 要很逼真的效果,不管是原生的css 还是 gif动图 可能效果都不是太理想吧选来选去 最后选择使用了。lottie-web 这个插件他这个是根据一个json文件渲染动画如果json中有引用的图片的话,你用ae做出来的图片最好放到静态服务器上,然后更换json中的本地图片路径换成删除原来u的那个字段使用方法安装npm i lottie-web --save or yarn add lottie-web --save使用import lottie

因为create-react-app 没有给我默认搭建路由所以只能让我们自己去搭建了 不过 简单的路由还是很快可以搭建好的npm i react-router-dom --saveor yarn add react-router-dom --save这里是 react-router-dom v6版本的哈然后就是使用了index.jsimport { BrowserRouter } from 'react-router-dom'ReactDOM.render( <BrowserR

如果是在web端的话 这个还是比较简单的，直接设置那个元素的 滚动他底部就可以了但是小程序中 只有 页面滚动 pageScroll但是这个时候 我们就搞不了吗建议将长列表 改成 ScrollView滚动列表进行操作，然后通过设置这个列表的scrollTop 进行设置我这里拿taro举例子。其实原生小程序和uniapp 差不多和这个一样<ScrollView className='scrollview' scrollY scrollWithAni

之前的一个taro项目。前辈们每一个样式文件 都引入的项目中用到的某个定义基础变量的文件，随着项目越来越大 引入的地方无比庞大。一旦文件发生大的变动。我光更改路径就改了半天。一旦那个页面忘记更改 就会发生一个小灾难了这个需要我们在配置文件中配置下就行全局引入某一个sass文件module.exports = { // ... sass: { resource: path.resolve(__dirname, '..', 'src/styles/variable.scss') }}

这个可能更多的就是css样式上的书写，js上很简单就是个状态的控制封装一个 FloatTop.jsximport "./index.scss"const FloatTop = ({ children, showMask, handleChange}) => { return ( <div className="float-container"> <div className="content"> .

最近遇见了一个小问题，就是我们支付的时候，会开启一个轮询的情况，但发现用户 把浏览器切换到后台之后，轮训还是继续，这个就有点交互上的小问题了.查询了下 浏览器有没有 进入不可见的情况的监听事件，没想到还真有之前我还一直很纳闷， uniapp 是怎么监听onShow 和 onHide的方法。看了这个事件后，我似乎有些清晰了。visibilitychange 监听文档的是否可视化。同时查看浏览器可视化状态是什么Document.visibilityState 可见性状态**Document.vis

其实吧，create-react-app 脚手架，帮我们配置好了很多东西，而且那么多的配置都隐藏起来了 也不用看见那么“心烦了”这不 我们前端去一家公司的时候，一般来说项目都比较成熟了，不需要我们去配置了，但是这个就表示你不用去了解这么配置了吗？最好还是了解下我用creact-react-app 新创建了一个项目 吧 css样式文件改成了。scss 就直接报错了好像默认不支持了 sass. 这个时候就需要我们 去解决了这个同时也给大家了一个处理问题的思路，正常来说 如果一个小白看见怎么配置

在pc端预览图片还是常见的业务，但是吧 antd中好像没有直接预览图片的插件，但是你可以通过 Modal 和 Carousel 两个插件配合起来封装一个。当然你也可以直接找一个预览图片的插件这里就推荐两个插件。react-images 和。react-images-viewerreact-images1. 安装yarn add react-images --saveornpm/cnpm i react-images --save2. 在代码中使用可以直接封装成一个组件 方便以后

没办法 因为csdn上传动态图片有限制，最高只能5m 所以我操作的很快见谅但大体的实现的效果就是这样了 相比里面的细节流程我就不一一赘述了， 看了网上的几个代码实例，毕竟不是自己写的。还是看着很难受的。 并不是通俗易懂，然后我又很长时间没写过这样原生的react代码，都是基于umi或者react的那种 约定式路由 或者配置式路由。我直接去 react-router的官网看了 几个例子 直接改一改就好了废话不多说了 直接上代码了文件目录结构很简单 就是初始使用 create-react-a.

在 表格中需要添加一个key值rowKey={record => record.id}<Table rowKey={record => record.id} dataSource={users.data} columns={columns} />关注我 持续更新。前端知识。

这个 和小程序是一样的设置徽章第一个是下标 第二个是文案Taro.setTabBarBadge({ index: 2, text: 1)移除下标Taro.removeTabBarBadge({ index: 2 })关注我。持续更新前端知识。

taro-ui 是 taro的 ui库，虽然有自带的图标，但是吧 可能有些需求的图标还是没有的，需要我们自己来搞，那么inconfont图标库就是一个不错的选择去图标库中找几个图标下载到本地首先你的项目得支持引入本地静态资源，这个好像是默认配好了 不用管在src文件夹下 创建一个 assets 文件夹 存放静态资源然后就是。css 和 字体 fonts分别 把我们刚才下载下来的那个 文件解压缩 然后放到指定的文件夹中（iconfonts.css 放到 css文件夹中。字体的文件 放到字体文件

我们都知道移动端设备 根据设备的不同 可能展示出来的东西会有点不太一样特别是 宽度的问题，同样的宽度 在不同的手机 用户看到的可能是不一样的效果，这样是不是就太糟糕了。之前如果是纯h5的开发。rem用的比较多，用小程序的话 我们就要用rpx 进行设计。它自动帮我们完成转换同样的 我们使用taro. 来做小程序和h5开发的话。其实也很简单如果 你的设计稿是按照 苹果6的那个 750 设计的话那个你量出来的是多少 就可以 直接写多少 px因为 taro 默认使用就是 750px比如。设计稿是 2

其实 有一个好的ui库。无疑会给我们工作做到事半功倍的效果。3.*版本的taro出来之后，但是由于taro-ui的3.*版本还没出来 现在最新稳定版本的还是。2.3.4今天讲解的就是 2.3.4在项目中安装yarn add taro-ui --save现在默认安装的版本就是 2.3.4的然后就是在全局的样式文件中，引入taro-ui的样式库在app.scss 中 (如果你选择的scss样式库的话)@import "~taro-ui/dist/style/index.scss";然后

因为项目是比较老的项目用的2.*的版本比较老了想着最近升级下版本，因为taro已经升级到 taro3 但是taro-ui 并没有完全升级到 适配3。因为ui版本的不稳定 导致 不敢直接 升级到3.0后来就考虑升级到了 2.*的最新版本 搭配着。taro-ui的最新2.3.4 版本。可以支撑到项目平稳再运行几年， 而且taro3的官网好像也并没有迁移的指南2.*版本之间的升级还是比较简单的。如果只是单个项目升级到 指定的2.*版本的话全局依赖升级方式比如你的项目当前是 2.0.1。想升级到。2.1

这个其实事件要触发 你得首先在当前的页面config中配置下enablePullDownRefresh: trueconfig = { navigationBarTitleText: '信息', enablePullDownRefresh: true }然后 就可以直接使用了onPullDownRefresh 注意不要已经声明的重复声明这个事件，也不要敲错了哈onPullDownRefresh() { console.log('下拉事件') // do som

因为公司的小程序使用的是 Taro进行开发的，近期要做一个聊天的业务，最后选择了 腾讯的im服务。至于什么 去腾讯那边开通im的业务啥的我就不说了，直接切入项目的基础的搭建中，项目准备阶段首先。你可以选择 npm的方式进行集成哈在项目中安装npm i tim-wx-sdk tim-upload-plugin --save一个是sdk. 一个是 发送图片或者什么玩意需要用到的插件 哈哈其实你可以下载tim-sdk 到你的本地，然后。放在utils 文件夹中我就是这样做的import TI

正常来说我们的redux中state 发生改变的话 或引发页面的刷新。但是redux有点很难受的就是。他是浅比较，我有一个对象里面有三层，导致我第三层对象改变的时候还是没有触发这个时候就需要我们用到深克隆了return { ...state, allConversation: [ ...list ] }之前我是这样搞的。就是想让页面中 allConversation 发生改变之后 重新渲染 可是页面一直没变。 但数据是改变了后来改成深 深拷贝之后就可以了 直接把state进行深拷贝state

想啥的小伙子， reducers 作为一个纯函数，还想调用其他的reducers其实，但是真的没有其他的替换方法了吗一定要用reducers 嘛， 可以使用effects effects: { *save({ payload }, { put, call }) { // 调用 saveTodoToServer，成功后触发 `add` action 保存到 state yield call(saveTodoToServer, todo); yield put(

最近要用react技术栈开发小程序，并接入腾讯的im。本来一开始 要打算是用新版本的sdk，因为新版本的使用websocket嘛， 后来不知道为啥 一直登陆失败，哎 太失败了。2.13.* 版本因为从2.11.2 版本就开始使用socket了。 我并且配置了。服务器域名白名单，可还是不行。崩溃了。后来看 官网demo是使用的 2.9.3. 更换到2.9.3 可以正常登录，但登陆之后还是，发现了另一个问题 就是 登陆成功后。 sdk ready事件一直又触发不了。很生气哈。一步一个坑后来在网上找

这个问题 困了好久， 好像之前是闲着没事，把本地的依赖删除了，重新安装之后，就一直报的这个问题，我去吧 taro-ui 和 taro 的 git. issue 翻了一个遍 看了各种各样的文档也没解决我的问题把各种文档翻了个遍，我的taro版本本来就是 2.*的 所以按理说 安装2.*的 tari-ui 是应该没问题的。1， 后来我才用了排除法，一个一个注释掉，看是哪个文件编译出了问题在 page.json 那个文件中 一个一个文件注释。最后定位到了一个文件， 就那个文件进入编译的时候，就会报错

因为有一个内容审核的业务， 要求审核内容前面都有一个复选框， 突然一天老大要求加一个 全选 和全不选的功能了。但是 我当初写的时候 使用的是 checkboxGroup这个我以为很简单 ， 但实际好像不是哪个样子 挺复杂的 最后 中间也踩坑了先来看下 效果把代码不建议 通过添加 checkBox的 check属性进行控制哈import React from 'react'import 'antd/dist/antd.css';import { Checkbox, Row, Col, But

其实 bootstrap 号称最流行前端ui框架，不过也确实很厉害，基本上学过前端的小伙伴 都有学习bootstrap的经历，毕竟bs中的 样式书写 可以堪称大师级别的写法了。现在大多数ui框架 都是深受bootstrap的影响了。但工作之后 发现其实用的也有bs,但是比较少，用vue的时候，我用的是 vant,element， 使用 react的时候 用的是 antd。今天写这个就是一个抛砖引玉的效果哈，使用react-boot版本 重新体验下 当年学习 boot的那种感觉现在的r-bs

咋说了，如果是 react和styled-components 关系好像是夫妻一样， react是丈夫的话，那么styled-components 无疑是个贤内助。经常在项目中其实 写样式 还是比较烦人的，因为要不你用内联样式，要不外部搞一个 样式文件， 还得有 less 或者 scss那种强大的预处理能力 ，我觉得这点吧styled-components 算是一个集合吧话不多说 我们来 试试看 这个东西 怎么用安装npm i styled-components -S or yarn add

其实 从入门到上手工作，react可能比vue的难度会大些，但不代表一直进展不下去的那种难， 我们碰见一个问题学习一个就可以了。不管是在vue中还是react中，都一个问题就是 组件嵌套很深的情况下，下层组件如何拿到上层组件的值。我们当然也可以通过props 一步一步传递下去 比如下面的这个例子function Demo(props) { return ( <div> <Test user={props.user} /> </div&gt

咋说了，可能跟 js本身弱类型语言有关吧， 当我们的react项目 越来越庞大而又复杂的时候， 特别是那种公共组件，如果不限制类型 可能会千奇百怪的往里面传入一些数据，除非 你的文档中很详细描述每个 props 是什么类型的，或者你的项目使用 ts进行书写。对于初学的react人员 比如博主这样的， 查看公共组件，或者使用公共组件， 应该特别是使用这块吧， 因为你要传给 组件一些props 值 然后就得看看一些类型的约束了，而不是由我们进行乱传。这个 propTypes 还是需要我们简单了解了解呢

其实每次看nextJs中文网的时候就很尴尬，到数据获取的那个章节都是英文的很奇怪，看的也确实难受， 哎 还是因为英文太差的缘故呢如果是的单页的应用的话 我们的可能会在生命周期中 直接调用 请求方法 进行数据获取，但如果用到了 next.js 其实还是推荐使用 预获取数据的方式进行处理，页面需要作用预渲染的方式。其实在老版本的next.js 中有一个 api getInitProps 但是在高版本中这个方法 好像被去掉了我们今天就讲一讲如何通过函数的方式进行数据获取吧就是这个方法

用过vue的服务端渲染框架nuxt的小伙伴， 可能也会了解react版本的next.js。如果网站需要做seo优化的话，那么单页应用可能不太适合做这个事情，特别是一些电商，或者新闻类的网站,不管是淘宝，还是京东 都没有使用 纯的react或者 vue 这些框架，除非你的网站也不做服务端渲染，因为本身名声已经够大了 没必要专门搞个服务端渲染好了 有点扯远了 回归正题了next 允许我们手动去创建哈 但建议还是 能用人家的脚手架 用人家的脚手架我今天早上又专门试了试 使用npm 的方式

在antd中 有时候 还是会碰见这样得问题得，但是antd已经帮我们封装好了,通过form表单来控制 各个表单元素 ，当我们想要监控某一个表单的变化的时候 发现不好搞了最近有个小需求 就是 监听表单中 单选框值得变化 来触发一些 效果，这样的话就要求你要知道每次值发现改变的回调了在 配置的时候 有一个api方法 可以用来 监控变化 以及变化后的值onValuesChange 字段值更新时触发回调事件 function(changedValues, allValues)onFieldsCha

其实 博主之前是搞vue开发的，后来就转了react，现在全职搞react也有两个月了， 之前面试的时候碰见一个 有趣的问题，面试官问 如何在react中实现同步的写法，我有点疑惑了，说实话刚转过来，对react并不是太熟悉 有的功能也没有完全摸透。我就实话说说了，这个还真没有用过呢， 麻烦老哥稍微提点一下，那个面试官就说了，在某些原生js事件种，或者 setTimeout 和 setIntrval中可以获取到 最新的state状态 达到同步的效果。这里 我们来尝试看下 效果哈拿类式组件 来做例子

前几天 测试小姐姐 提出了一个bug, 我们列表展示 第一页 正常 第二页不正常，好像复用了 第一页的一些数据，这样的话 我就明白了 其实 时 在遍历组件的时候 使用 下标索引 作为 key值翻页的时候 重新 渲染 但是 key 还是以 下标形式渲染，就导致 第二页数据 复用了 第一页中的 数据解决方法 就是 把 后端参数的一个唯一字段作为 key值 就可以 解决这个问题了其实 有些场合 使用下标也是可以 ， 就是你的数据是一些纯展示性 组件 完全可以使用 key作为下标但防止 分不清

计时器 这个 可能在验证码 或者拍卖的相关业务中 会用到之前的 旧项目中我们可能会使用 类组件进行封装现在 我们用hooks做个简单地小例子const CountDown = ({time}) => { const [h, setH] = useState(0) const [m, setM] = useState(0) const [s, setS] = useState(0) let endTime = new Date(time).getTime(); let tim

最近做了一个业务就是在输入框中处理防抖的业务，本来就可以，测试小姐姐说要 加个按钮可以 清空下 输入框中的值。我想了想 本来想直接搞一个 state状态值 然后直接 setState方式清空呢 发现根本不行 因为防抖触发的就是异步的 导致 连输入内容都不行。其实 这个时候 我就想到了 要用 form组件的 setFieldValue的形式 进行处理 但是那样的话 我好想很大部分要重写了，不想这么大动干戈哎后来就想了想 原生的非受控组件 可以直接通过dom操作清空输入框中的值我先试试看 好像不太行

相信很多前端的小伙伴中就算没有使用过，面试的过程中也可能被问过防抖和节流的相关问题，但今天不是来复习基础知识的基础知识 可以去之前博主的文章中博主所有防抖节流相关文章今天要讲解就是 很常见的一个场景 就是搜索框，用户输入完成之后 就等待一段时间后开始 搜索，之前做的处理是 当用户 鼠标焦点脱离之后 发送请求，但是这样用户使用太难受 就投诉了然后就要加上防抖，用户输入完成之后就 可以了防抖本来打算自己 写的 然后想了想吧 还是算了吧 自己写的那么垃圾 还是使用现成的lodsh的库吧至于lods

因为公司的前台项目需要做seo优化，单页应用项目是不适合做seo的，然后就选择了next.js，之前是搞vue出身了，react简直就是个白纸，菜鸟。我们都知道如果在react中路由跳转使用，link 和 this.history.push那么在 next中怎么跳转的呢，和怎么获取参数呢。其实也是这两种呢， 只不过next可能封装了下吧也是link方式import Link from "next/link"使用注意它这个是 使用的 href 好像 和 react中还有点不用 reac

这几天 老大被我们写的各种花里胡哨的jsx代码 给搞得有点难受，组件各种传值，随便命令 类型随意切换，搞得让别人看见代码就很难受，老大就说了 过段时间切成 ts版本，不让你们这么随意 书写代码，好歹给个类型约束也行，现在写的代码也就你们自己能看懂！好了 前面是闲话 现在是正文了，安装ts版本的也是通过 create-react-app 来创建啊的这个最好你的网络环境比较好哈 , 我就是网络环境差 才安装几次失败了几次 惭愧第一个 按照官网的文档 来走create-react-app m

有的业务是 点击空白处 关闭弹窗 有的可能不是这样的 业务其实很简单的 就是在 modal 上 添加一个属性即可默认是 ture 可以 关闭的maskClosable={false}关注我 持续更新 前端知识