[前端] 每日时报-2019.07.03

[前端] 每日时报-2019.07.03

GitHub： https://github.com/wubaiqing/zaobao

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

[类库] immer 的 React Hooks 版：https://github.com/immerjs/use-immer

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

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

配图 -

示例 - mirror-config-china

npm i -g mirror-config-china --registry=https://registry.npm.taobao.org # 查看 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 "http://registry.npm.taobao.org/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" 

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