FrankKai

### 常用npm命令小结 - 批量安装包 `npm install` 在package.json中的devDependencies字段中写明依赖的第三方包，然后就可以批量下载第三方包了 - 淘宝node镜像源 `$ npm install -g cnpm --registry=https://registry.npm.taobao.org` - 更换npm到特定版本号 `npm install npm@版本号` - mac上管理node版本 `npm install n` - 只下载dependencies中的模块 `npm install --production`...

### 如何更加优雅地使用npm **- devDependencies与Dependencies区别** Dependencies`用于开发环境多放置开发依赖，例如jquery等用户需要加载的库；devDependencies用于生产环境多放置前端依赖，例如webpack等开发工具 **- --save和--save-dev的区别** --save是对生产环境所需依赖的声明(开发应用中使用的框架，库),--save-dev是对开发环境所需依赖的声明(构建工具，测试工具) **- npm i 是什么意思？** npm i 是npm install的简写 **- package.json中的proxy是什么？** 默认值为null，类型为url，一个为了发送http请求的代理。如果HTTP__PROXY或者http_proxy环境变量已经设置好了，那么proxy设置将被底层的请求库实现。 这个配置目前我只了解到可以与create-react-app的react-scripts结合使用:[Proxying API Requests in Development](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development) 可以到我的这篇博文去一探究竟：[如何理解package.json中的proxy字段？](https://github.com/FrankKai/FrankKai.github.io/issues/60) **- package.json 与package-lock.json区别是什么？** > package-lock.json是node_modules中所有依赖最终真实生成树，加速依赖的install，精确控制依赖版本。...

### Node与操作系统之间的纠葛 **- export命令** export 命令用于设置或显示环境变量。通过 export 添加的环境变量仅在此次登陆周期内有效。 比如很多时候我们的开发环境和生产环境，就可以通过设置一个临时环境变量来，然后在程序中根据不同的环境变量来设置不同的参数。 设置 NODE_ENV 环境变量。退出 SHELL 时失效 ``` $ export NODE_ENV=development ``` 查看当前所有环境变量 ``` $ export -p ... declare -x Apple_PubSub_Socket_Render="/private/tmp/com.apple.launchd.T7FbIu3TKI/Render" declare -x...

### npm semantic versioning 重点： ```js ^1.0.0 // same major range ~1.0.0 // same minor range 1.0.0 // fixed version ``` 关键词：major minor patch range npm semver calculator  ...

### nvm命令集 - 安装最新版node `nvm install node` - 安装指定版本 `nvm install 8.12.0` - 列举所有可用版本 `nvm ls-remote` - 切换最新版本 `nvm use node` `nvm run node --version` - 切换指定版本 `nvm use 8.12.0`...

### 其他 - WHATWG API与Legacy API区别？ 例如url模块，WHATWG API是被浏览器实现的新的API，而Legacy API是旧的遗留的API。 ```js // Legacy API import url from 'url' const Url = url.parse(str); // WHATWG API import { URL } from 'url';...

### useContext是什么意思？ #### context context: react中的context无需为每层组件手动添加props，就可以在组件树之间传递数据的方法。 例如：地区偏好，UI主题，当前认证用户 - 对于组件树而言是“全局” - context是为了解决组件一层一层往下传值的问题（vue中一般使用自定义的prop一层层传） - context可以跳过中间元素进行传值 - react中通过React.createContext创建myContext - 需要通过``包裹，并且用static contextType = myContex将值注入this.context - 挂载在 class 上的 contextType 属性会被重赋值为一个由 React.createContext() 创建的 Context 对象。这能让你使用...

### useRef如何解决空指针问题？ 通常来说，useRef用于引用组件的Dom节点。Vue中的ref则是引用一个vue组件。与Vue不同，react中的ref不仅仅是引用Dom节点，还可以生成一个内存不变的对象引用。 #### 使用useState导致的空指针示例 ```js const [foo, setFoo] = useState(null); const handler = () => { setFoo("hello") } useEffect(() => { return () => { // 无论怎样foo都是null，给useEffect的deps加入foo也不行 if (foo...

### 如何通过useReducer实现forceUpdate的效果？ 首先来看看useReducer的使用场景 - state有多个子值的复杂情况 - 下一次状态依赖上一次的值 - 深度更新时优化组件性能 再来看看为什么要用useReducer实现forceUpdate的效果？ - class方式的react组件有forceUpdate方法，而hooks方式的组件没有 - 使用setState在对应位置修改数据，不会触发重新渲染 如果某些情况下state没有发生变化的话，可以使用useReducer去强制重新渲染。 ```js const [ignored, forceUpdate] = useReducer(x => x + 1, 0); function handleClick() { forceUpdate();...

## DOM通信 ### DOM通过自定义事件通信 `触发事件 增加了自定义事件DOM` DOM通过自定义事件通信的意思是：可以为DOM增加一些自定义的事件，然后在某些情况下去触发这些事件，然后事件做出响应。 说简单一些就是：**增加了自定义事件的DOM，是一个鲜活的听话的人，发送对应的命令给它，它就会去做事。** #### 创建自定义事件（Creating custom events） ```js var event = new Event('build'); // Listen for the event. elem.addEventListener('build', function (e) { /* ... */...