<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[一条宝鱼的专栏]]></title><description><![CDATA[一条在程序大海中乱飘的鱼]]></description><link>https://blog.youkuaiyun.com/zshake</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; zshake]]></copyright><item><title><![CDATA[create-react-app craco进行webpack配置]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/121964168</link><guid>https://blog.youkuaiyun.com/zshake/article/details/121964168</guid><author>zshake</author><pubDate>Wed, 15 Dec 2021 23:25:46 +0800</pubDate><description><![CDATA[如何在不通过npm run eject进行webpack配置呢？

现在我们用craco配置来去进行webpack相关配置。




 yarn add  @craco/craco
//或者
 npm install  @craco/craco --save


在项目根目录新建craco.config.js文件







修改package.json










"scripts": {
    "start": "craco start",
    "build": "craco bui..]]></description><category></category></item><item><title><![CDATA[vue+sentry 前端异常日志监控]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/119389792</link><guid>https://blog.youkuaiyun.com/zshake/article/details/119389792</guid><author>zshake</author><pubDate>Wed, 04 Aug 2021 17:48:38 +0800</pubDate><description><![CDATA[敲代码最糟心不过遇到自己和测试的环境都OK， 客户使用有各种各样还复现不了的问题，被逼无奈只能走到这一步：前端异常日志监控!



vue官方文档如下推荐：



就是说， vue有错误机制处理errorHandler（错误机制处理也有errorCaptured），而Sentry利用这个钩子函数提供了集成。

那接下来就是使用了， 首先我们点一下上图中的官方集成四个大字，来到了sentry官方文档（中关于VUE的文档）：https://sentry.io/for/vue/。

Get Started！

鉴]]></description><category></category></item><item><title><![CDATA[sentry的搭建和使用]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/119389743</link><guid>https://blog.youkuaiyun.com/zshake/article/details/119389743</guid><author>zshake</author><pubDate>Wed, 04 Aug 2021 17:47:09 +0800</pubDate><description><![CDATA[Sentry 简介（https://sentry.io）

Sentry是一个开源应用程序监控平台，可帮助您实时识别问题。支持 web 前后端、移动应用以及游戏，支持 Python、OC、Java、Go、Node、Django、RoR 等主流编程语言和框架 ，还提供了 GitHub、Slack、Trello 等常见开发工具的集成。

Sentry 服务支持多用户、多团队、多应用管理，每个应用都对应一个 PROJECT_ID，以及用于身份认证的 PUBLIC_KEY 和 SECRET_KEY。由此组成一个这样]]></description><category></category></item><item><title><![CDATA[react脚手架]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/118224530</link><guid>https://blog.youkuaiyun.com/zshake/article/details/118224530</guid><author>zshake</author><pubDate>Fri, 25 Jun 2021 16:57:42 +0800</pubDate><description><![CDATA[https://createapp.dev/webpack
]]></description><category></category></item><item><title><![CDATA[protobufjs]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/117066025</link><guid>https://blog.youkuaiyun.com/zshake/article/details/117066025</guid><author>zshake</author><pubDate>Thu, 20 May 2021 10:39:58 +0800</pubDate><description><![CDATA[protobufjs

protobuf.js是一个纯JavaScript实现，支持Node.js和浏览器的TypeScript，它容易使用速度快速，可以直接反射.proto文件，不需要生成任何文件。

protobuf.js是基于ByteBuffer.js的Protocol Buffers纯JavaScript实现，主要功能是解析.proto文件，构建Message类，编码解码。

安装

下载安装protobufjs

https://github.com/protobufjs/prot...]]></description><category></category></item><item><title><![CDATA[yarn和npm的区别]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/117065921</link><guid>https://blog.youkuaiyun.com/zshake/article/details/117065921</guid><author>zshake</author><pubDate>Thu, 20 May 2021 10:31:00 +0800</pubDate><description><![CDATA[https://blog.youkuaiyun.com/weixin_53430951/article/details/111132595
]]></description><category></category></item><item><title><![CDATA[react-native-splash-screen集成实践（ios & android）]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/115943068</link><guid>https://blog.youkuaiyun.com/zshake/article/details/115943068</guid><author>zshake</author><pubDate>Wed, 21 Apr 2021 11:53:36 +0800</pubDate><description><![CDATA[react-native在启动的时候会有瞬间的白屏出现，ios白屏时间会很短，安卓要相对长一些，大概1-3s时间。这是react-native的工作机制决定的。 react-native在启动时会装载js bundle到内存并渲染界面，这段时间界面是一个空View.
上面的过程我们称之为项目的初始化，那么在这段项目初始化的过程中我们为了有更好的用户体验需要渲染一个对用户友好的界面来代替白屏，毕竟白屏对用户不太友好，你可以理解为跟h5中的loading是一个意思。然而配置原生的启动图不像我们加个loading]]></description><category></category></item><item><title><![CDATA[exports、module.exports和export、export default到底是咋回事]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/113993353</link><guid>https://blog.youkuaiyun.com/zshake/article/details/113993353</guid><author>zshake</author><pubDate>Tue, 23 Feb 2021 16:04:12 +0800</pubDate><description><![CDATA[前言

难得有空，今天开始重新规范的学习一下node编程。
但是引入模块我看到用require的方式，再联想到咱们的ES6各种export、export default。

阿西吧，头都大了....

头大完了，那我们坐下先理理他们的使用范围。


require: node 和 es6 都支持的引入export / import: 只有es6 支持的导出引入module.exports / exports: 只有 node 支持的导出


这一刻起，我觉得是时候要把它们之间的关系都给捋清楚了，不然我...]]></description><category></category></item><item><title><![CDATA[【前端适配】vw+rem自适应适配方案]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/111385716</link><guid>https://blog.youkuaiyun.com/zshake/article/details/111385716</guid><author>zshake</author><pubDate>Fri, 18 Dec 2020 17:08:53 +0800</pubDate><description><![CDATA[先说好处：无需借助js，只用css就可以实现一定屏宽范围内元素大小随屏幕宽度改变平稳变化。

再说用法：

第一步：元素大小单位选用rem。

第二步：根据设计稿的屏幕宽度设置html的font-size大小，且单位用vw。

第三步：通过media query设置html根font-size的最大最小px值。

以上就是把大象关冰箱的三个步...啊呸，是一定范围内适配任意屏幕宽度的三个步骤。

例：假设设计稿是1200px的屏幕，第一二步的效果将是：

1200px宽度的屏幕，html的font-size]]></description><category></category></item><item><title><![CDATA[react-router-dom中link与Navlink]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/111157922</link><guid>https://blog.youkuaiyun.com/zshake/article/details/111157922</guid><author>zshake</author><pubDate>Mon, 14 Dec 2020 12:01:32 +0800</pubDate><description><![CDATA[React Router 是一个基于React之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。

目前react-router最新版本已经到4.0+，因为新的版本是一次非常大的改动，所以这里直接讨论4.0以上版本。

引用


react-router 　　　　　　 // React Router 核心
react-router-dom 　　　　// 用于 DOM 绑定的 React Router
react-router-native 　　// 用于 Re..]]></description><category></category></item><item><title><![CDATA[react native开发Android 篇——Image动态加载图片]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/110115214</link><guid>https://blog.youkuaiyun.com/zshake/article/details/110115214</guid><author>zshake</author><pubDate>Wed, 25 Nov 2020 10:10:11 +0800</pubDate><description><![CDATA[react native开发Android 篇——Image动态加载图片

网络图片和base64 图片
	本地图片


网络图片和base64 图片


import React, { Component } from 'react';
export default class DaysScreen extends React.Component {
	render() {
	    let urlHttp='https://facebook.github.io/react-native/docs/as.]]></description><category></category></item><item><title><![CDATA[ChatOps的前世，今生和未来]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/109967853</link><guid>https://blog.youkuaiyun.com/zshake/article/details/109967853</guid><author>zshake</author><pubDate>Sun, 22 Nov 2020 23:07:43 +0800</pubDate><description><![CDATA[在人人都在讨论DevOps的今天，有一个词ChatOps显得比较突出，什么是ChatOps？它是怎么工作的？它能带来有什么好处？最近调研了一下ChatOps，本文将基于个人的理解，尝试回答这几个问题。

起源

ChatOps这个词在2013年出现，最初由GitHub提出，他们发现在日常的工作中，需要不停的运行以下命令:




git checkout -b feature/xxx
# do sth.
git commit -m "Bump version"
git push origin featur.]]></description><category></category></item><item><title><![CDATA[关于this.setState()的那些事]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/109668490</link><guid>https://blog.youkuaiyun.com/zshake/article/details/109668490</guid><author>zshake</author><pubDate>Fri, 13 Nov 2020 09:47:18 +0800</pubDate><description><![CDATA[在网上看了很多关于this.setState()的介绍，觉得受益匪浅，就总结了一些帮助自己理解的点，在此分享出来，如果有侵权的地方，请及时提醒。

一、State的定义

状态（state） 和 属性（props） 类似，都是一个组件所需要的一些数据集合，但是它是私有的，并且由组件本身完全控制，可以认为它是组件的“私有属性（或者是局部属性）”。

二、关于 setState() 有三件事是你应该知道的。# 参考链接

1.不要直接修改 state(状态)




this.state.comment = .]]></description><category></category></item><item><title><![CDATA[react-navigation使用技巧（再进阶）]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/109469926</link><guid>https://blog.youkuaiyun.com/zshake/article/details/109469926</guid><author>zshake</author><pubDate>Tue, 03 Nov 2020 15:10:04 +0800</pubDate><description><![CDATA[本文是基于最新的react-navigation^3.x来书写的。


以下15条，在我开源的识兔中，都是可以找到实例的，欢迎参考，欢迎star

前言

关于react-navigation的文章，这已经是第三篇了，这个库从最初的beta版到最新的2.x版本，更新频率是很快的，这个库也越来越完善，很多1.x的技巧已经完全不适用于新的版本，然而群里每天又有很多人再问，为了解(jiao)决(yu)这个问题，所以，动手写了这篇文章。

更新版本到react-navigation3.x！


因为react-n.]]></description><category></category></item><item><title><![CDATA[Immutable 详解及 React 中实践]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/109447829</link><guid>https://blog.youkuaiyun.com/zshake/article/details/109447829</guid><author>zshake</author><pubDate>Mon, 02 Nov 2020 14:02:04 +0800</pubDate><description><![CDATA[Shared mutable state is the root of all evil（共享的可变状态是万恶之源）

-- Pete Hunt


有人说 Immutable 可以给 React 应用带来数十倍的提升，也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明，因为同期 React 太火，它的光芒被掩盖了。这些至少说明 Immutable 是很有价值的，下面我们来一探究竟。

JavaScript 中的对象一般是可变的（Mutable），因为使用了引用赋值，新的对...]]></description><category></category></item><item><title><![CDATA[React Hooks 教程]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/109333108</link><guid>https://blog.youkuaiyun.com/zshake/article/details/109333108</guid><author>zshake</author><pubDate>Wed, 28 Oct 2020 15:05:34 +0800</pubDate><description><![CDATA[https://jspang.com/detailed?id=50#toc21
]]></description><category></category></item><item><title><![CDATA[React Native - 调试技巧及调试菜单说明（模拟器调试、真机调试）]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/109280247</link><guid>https://blog.youkuaiyun.com/zshake/article/details/109280247</guid><author>zshake</author><pubDate>Sun, 25 Oct 2020 22:31:35 +0800</pubDate><description><![CDATA[React Native - 调试技巧及调试菜单说明（模拟器调试、真机调试）

一、模拟器调试

我们在ios模拟器上按快捷键command + D，安卓模拟器上按快捷⌘ + m，即可弹出如下调试菜单。下面分别介绍菜单中的各个调试功能。



1，Reload

刷新页面，其快捷键是（iOS） command + R/（安卓）两按R键。

注意：只有修改JavaScript文件时，刷新功能才起作用。如果新增了文件或者修改了Native代码，就需要使用Xcode重新编译应用了。



2，De...]]></description><category></category></item><item><title><![CDATA[React-Native 脚手架的基本使用]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/109278742</link><guid>https://blog.youkuaiyun.com/zshake/article/details/109278742</guid><author>zshake</author><pubDate>Sun, 25 Oct 2020 20:57:18 +0800</pubDate><description><![CDATA[构建项目

在相应的路径下执行命令行：react-native init 项目名(名称不可使用连接符等特殊字符,命名可以参考APP应用名称 比如 FaceBook)


	
react-native --v //查看版本
react-native init demo --version 0.48.0//安装指定的版本
react-native init demo --verbose --version 0.48.0 //verbose是初始化的时候显示安装详情的，安装什么模块以及进度
npm view r.]]></description><category></category></item><item><title><![CDATA[精读《Function VS Class 组件》]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/109178452</link><guid>https://blog.youkuaiyun.com/zshake/article/details/109178452</guid><author>zshake</author><pubDate>Tue, 20 Oct 2020 12:00:22 +0800</pubDate><description><![CDATA[1. 引言

为什么要了解 Function 写法的组件呢？因为它正在变得越来越重要。

那么 React 中Function Component 与 Class Component 有何不同？

how-are-function-components-different-from-classes这篇文章带来了一个独特的视角。


顺带一提，以后会用 Function Component 代替 Stateless Component 的说法，原因是：自从 Hooks 出现，函数式组件功能在不断丰富，函数..]]></description><category></category></item><item><title><![CDATA[简单易懂的 React useState() Hook 指南]]></title><link>https://blog.youkuaiyun.com/zshake/article/details/109164618</link><guid>https://blog.youkuaiyun.com/zshake/article/details/109164618</guid><author>zshake</author><pubDate>Mon, 19 Oct 2020 17:20:02 +0800</pubDate><description><![CDATA[状态是隐藏在组件中的信息，组件可以在父组件不知道的情况下修改其状态。我更偏爱函数组件，因为它们足够简单，要使函数组件具有状态管理，可以useState()Hook。

本文会逐步讲解如何使用useState()Hook。此外，还会介绍一些常见useState()坑。

1.使用 `useState()` 进行状态管理

无状态的函数组件没有状态，如下所示(部分代码)：



可以找 codesandbox 尝试一下。

运行效果：



这时，要如何添加一个按钮来打开/关闭灯泡呢？为此，咱们需要具有状...]]></description><category></category></item></channel></rss>