React中ref还是很常用的,它使父组件具备操作子组件/原生DOM的能力,比如控制一个modal组件弹窗显示等等。但使用上有时会遇到一个不注意的坑,这里梳理下。

  1. ref挂载元素成功后,并不会触发组件重新渲染

    有时会将useEffect依赖中增加ref或者ref.current,但实际上当ref中引用的组件被挂载后,ref.current虽然已经保存了实例引用,但组件并不会触发重新渲染,更别说effect重新执行了,因此遇到此类需求需要修改方案来解决,方法如下

  2. ref的使用,可以直接ref对象赋值,也可以callback,两种方式本身作用是一致的,唯一区别是如果想在挂载时执行一些动作,可以使用callback,举个🌰

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    function App() {
    const pElRef = useRef<any>();
    const [refresh, setRefresh] = useState(0);
    useEffect(() => {
    console.log('render?');
    }, [refresh]);

    const onAttached = useCallback((ref) => {
    if (refresh === 0) {
    setRefresh(refresh + 1);
    }
    pElRef.current = ref;
    }, [refresh]);
    return (
    <div className="App">
    <header className="App-header">
    <img src={logo} className="App-logo" alt="logo"/>
    <p ref={onAttached}>
    Edit <code>src/App.tsx</code> and save to reload.
    </p>
    <a
    className="App-link"
    href="https://reactjs.org"
    target="_blank"
    rel="noopener noreferrer"
    >
    Learn React
    </a>
    </header>
    </div>
    );
    }

​ 如上,增加state参refresh,在挂载成功时修改从而做到重新渲染。

HOC下的ref传递

使用组件时有几个参数是特殊的,比如key,又或者是ref。它们并非属于props,react下会进行特殊处理,比如在HOC下,就需要注意。

阅读全文 »

在微信中打开一些网页时总会出现以下拦截提醒,遇到这种情况时必须点击继续访问。技术人不忍这种流氓事,于是着手从技术上解决这个体验问题。

Tampermonkey浏览器插件

首先想到的是这个方案,解决步骤如下

  1. Chrome浏览器下安装插件Tampermonkey(油猴)

  2. 插件中增加如下脚本,该脚本我已已经开源,不想了解具体实现的直接安装即可。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    // ==UserScript==
    // @name Redirect URL
    // @namespace https://1991421.cn
    // @version 0.1
    // @description 解决恼人的网页拦截,比如微信打开链接
    // @author Alan He
    // @match https://weixin110.qq.com/cgi-bin/mmspamsupport-bin/newredirectconfirmcgi*
    // @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
    // @grant none
    // @run-at document-end
    // ==/UserScript==

    (function() {
    'use strict';
    function htmlDecode(input) {
    var doc = new DOMParser().parseFromString(input, 'text/html');
    return doc.documentElement.textContent;
    }

    if(window.location.href.match(/^https:\/\/weixin110.qq.com\/cgi-bin\/mmspamsupport-bin\/newredirectconfirmcgi/)){
    window.location.href=htmlDecode(cgiData.url);
    }
    })();

如上操作后,当访问拦截被拦截,也会快速跳转到目标网页。

阅读全文 »

最近参与组件库开发,为更好的推广使用组件库,需要搭建下文档。调研了几款组件库文档框架,务实的选择了storybook,因为其流行且满足诉求。

框架简单,但还是踩了些坑,这里mark下。

使用

1
2
3
4
5
# 初始化
$ npx sb init

# 热启动,即可WEB浏览
$ npm run storybook
阅读全文 »

最近NAS Download Manager (for Synology)插件更新后发现只支持HTTPS地址,但是我的NAS下载服务目前仅支持HTTP,因此考虑在客户端解决该问题。

解决方案- whistle

whistle可以代理HTTPS请求,自行签发证书,因此可以解决。

  1. 配置whistle及Chrome插件,确保可以拦截请求

    步骤如下,具体可查看whistle官方文档

    1. whistle开启HTTPS
    2. rootCA证书安装且信任
    3. 安装插件比如SwitchyOmega,解决Chrome走whistle代理
  2. 增加并开启rule,解决HTTPS到HTTP的转换,使whistle代理后,最终还是发起http请求

    1
    2
    # NAS服务链接
    /https(://110.100.176.222:50098.+)/ http$1

如上配置后,将地址贴到下载插件下,即可正常联通使用。

阅读全文 »

最近nginx有需求实现上传feat,惊喜发现已经支持js了,因此尝试使用js实现上传。

nginx配置

  1. 为了支持njs需要模块加载

  2. 具体使用js业务模块,需要使用js相关指令

  3. load_module指令需要放在全局即default.conf

例子如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
load_module modules/ngx_http_js_module.so;

events { }


http {

# 这里就不再限制了,nginx默认为1MB
client_max_body_size 0;

js_path "/etc/nginx/njs/";

js_import main from upload.js;

server {

...
location /upload-cert {
js_content main.resolve;
}
...
}

阅读全文 »

团队最近的项目使用SB进行UI组件库开发及文档维护,在CI部署时,遇到报错如下

1
2
3
4
5
6
7
8
9
10
11
vendors~main.54994c12.iframe.bundle.js:2 Unexpected error while loading ./button.stories.tsx: Module parse failed: Unexpected token (22:2)
File was processed with these loaders:

* ../../../cache/node_modules/@storybook/source-loader/dist/cjs/index.js
You may need an additional loader to handle the result of these loaders.
| backgroundColor: { control: 'color' },
| },

> } as ComponentMeta<typeof Button>;
> |
> | // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args

查询官方repo发现有个问题描述类似,解决方案是升级SB相关包npx sb upgrade

按照提示进行了下包升级,果然问题解决。

但该问题原因如何?查看下官方PR

阅读全文 »

现象

进入页面后,一段时间内网页交互操作延时响应明显,比如光标移动到链接上,也并没有手型图标出现,同时更没法点击。等一段时间后,页面数据都完全显示出来,恢复响应。

针对这个问题,需要解决下。

首先先梳理下当前WEB页面加载后的几个操作

  1. 请求后台数据
  2. 数据进行base64解码
  3. 表格渲染显示数据
阅读全文 »

在办公PC remote时拉取私服镜像报错,Service Available,调研发现可以如下解决。

解决办法

  1. 关闭Docker App的代理

  2. 本地hosts增加配置,比如9.111.111.111 xxx.1991421.cn

  3. 设置~/.docker/config.json,增加hosts

    1
    2
    3
    4
    5
    6
    7
    {
    "credsStore" : "desktop",
    "auths" : {

    },
    "hosts":["tcp://127.0.0.1:12639"]
    }

CSS中关于透明度相关设定有三个地方,RGBA中的Alpha、颜色值设定中的transparent值、Opacity属性。

平时样式写的少,导致这些基本概念模糊,这里梳理Mark下。

alpha的单词含义

Alpha 通道 - 指定对象的不透明度。

曾经一直以为这个代表着透明度,跟opacity相反,当然这个认知是错的,为什么一直被误导,其中一个原因是该词在某些词典的解释误导人,如下为欧陆词典查词,其中一部分的解释。

不自觉就会以为alpha相关设定就会是透明度的设定,其实大大的错。

阅读全文 »

准备工作

  1. 下载Tuxera NTFS for Mac软件,有15天试用,因此够用

    • 选择该软件是因为Mac系统磁盘工具没有提供NTFS格式化选项
    • NTFS默认为只读,利用该软件改为读写支持
  2. 格式化移动硬盘/U盘

    • 如果盘里有数据,使用工具,格式化磁盘,格式为Microsoft NTFS
    • 不要选择FAT格式,ExFAT不能正常引导,FAT要求文件大小小于4GB,超过了Windows10文件大小
  3. 下载Windows镜像

  4. 挂载系统镜像到Mac上

    • 双击ISO镜像文件即可
  5. 打开终端,输入如下命令,前者为挂载的镜像文件路径,后者为挂载的硬盘/U盘路径,执行该命令

    1
    cp -rp /Volumes/CCCOMA_X64FRE_ZH-CN_DV9/* /Volumes/THINK_DISK

OK后系统盘即制作完成

阅读全文 »
0%