2019.07.03

[类库] 一个非常可爱的 React 卡通人脸库，很有意思：https://github.com/miukimiu/react-kawaii (opens new window)

[类库] immer 的 React Hooks 版：https://github.com/immerjs/use-immer (opens new window)

[工具] yarn-lock-cli 可以直接修改 yarn.lock 文件中的源地址：https://github.com/kokororin/yarn-lock-cli (opens new window)

[工具] mirror-config-china 是为中国内地的 Node.js 开发者准备的镜像配置，大大提高 Node 模块安装速度，不仅有淘宝，还有清华等镜像源地址：https://github.com/gucong3000/mirror-config-china (opens new window)

配图 - 一个非常可爱的 React

示例 - mirror-config-china

npm i -g mirror-config-china --registry=https://registry.npmmirror.com
# 查看npm配置
npm config list
# 查看环境变量
source ~/.bashrc && env

示例 - use-immer

import React from "react";
import { useImmerReducer } from "use-immer";

const initialState = { count: 0 };

function reducer(draft, action) {
  switch (action.type) {
    case "reset":
      return initialState;
    case "increment":
      return void draft.count++;
    case "decrement":
      return void draft.count--;
  }
}

function Counter() {
  const [state, dispatch] = useImmerReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
    </>
  );
}

示例 - yarn-lock-cli

In

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1

react@^15.6.1:
  version "15.6.2"
  resolved "https://registry.npmmirror.com/react/download/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"

Out

# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1

react@^15.6.1:
  version "15.6.2"
  resolved "https://registry.npmjs.org/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"

今日图 - 前端真是越来越简单了啊