11k 字 10 分钟

# 什么是状态管理？

# 状态

状态是表示组件当前状况的 JS 对象。在 React 中，可以使用 useState 或者 this.state 维护组件内部状态，通过 props 传递给子组件使用。

为了避免状态传递过程中出现混乱，React 引入了 “单向数据流” 的理念。主要思想是组件不会改变接收的数据，只会监听数据的变化，当数据发生变化时他们会使用接收到的新值，而不是修改已有的值。当组件的更新机制触发后，他们只是使用新值进行重新渲染。

父子组件通信可以直接使用 props 和回调方式；深层次、远距离组件则要通过 “状态提升” 和 props 层层传递。

8.6k 字 8 分钟

由于谷歌在 Monorepo 上的实践，Monorepo 受到了越来越多的关注。Monorepo 意味着把所有项目的所有代码统一维护在一个单一的代码版本库中，和多代码库方案相比，两者各有优劣，需要根据公司文化和产品特性进行取舍。原文：What is monorepo? (and should you use it?)[1]

Monorepos（单一代码库）有助于加快开发工作流程，在本文中，我们将帮助你认识这一代码组织模型是否适合你的团队和公司。

12k 字 11 分钟

# Q1：安装超时 (install timeout)

方案有这么些:

cnpm : 国内对npm的镜像版本
/*
cnpm website: https://npm.taobao.org/
*/
npm install -g cnpm --registry=https://registry.npm.taobao.org
//cnpm 的大多命令跟 npm 的是一致的，比如安装，卸载这些
yarn 和 npm 改源大法
// 使用 nrm 模块 : www.npmjs.com/package/nrm
npm config : npm config set registry https://registry.npm.taobao.org
yarn config : yarn config set registry https://registry.npm.taobao.org
   8.7k 字  8 分钟
# 前言
本文将简要介绍前端常用日期处理库：官方停止维护的 moment.js，无缝代替 moment.js 的 day.js，逐渐流行的 date-fns，最后基于 date-fns 封装常用日期处理的 utils。
如果项目中有用 moment.js 的可以用 day.js 代替减少体积做优化，新项目可以直接选择 date-fns。
   1.7k 字  2 分钟
在 JavaScript 开发过程中，资源管理一直是一个需要认真对待的问题。无论是文件句柄、数据库连接还是其他需要手动释放的资源，开发者都不得不编写繁琐的清理代码。传统的解决方案是使用 try…finally 结构，但这种方式往往导致代码冗长且易于出错。
   17k 字  16 分钟
# 从 15 个点来思考前端大量数据渲染与频繁更新的方案
先来总结一下处理方法有哪些：
  1. 惰性加载 (懒加载)
  2. DOM 操作合并处理
  3. 虚拟列表
  4. 分批数据加载
  5. 简化 DOM 结构
  6. 优化资源
  7. Web Workers
  8. 用户操作优化
  9. 差异更新
  10. 服务端渲染
  11. 动画优化
  12. 逐帧渲染
  13. 异步更新
  14. WebAssembly
  15. GPU 加速
   4.8k 字  4 分钟
# 路由参数解耦
通常在组件中使用路由参数，大多数人会做以下事情。
export default {
    methods: {
        getParamsId() {
            return this.$route.params.id
        }
    }
}
在组件中使用 $route 会导致与其相应路由的高度耦合，通过将其限制为某些 URL 来限制组件的灵活性。正确的做法是通过 props 来解耦。
const router = new VueRouter({
    routes: [{
        path:  /user/:id ,
        component: User,
        props: true
    }]
})
将路由的 props 属性设置为 true 后，组件内部可以通过 props 接收 params 参数。
export default {
    props: [ id ],
    methods: {
        getParamsId() {
            return this.id
        }
    }
}
您还可以通过功能模式返回道具。
const router = new VueRouter({
    routes: [{
        path:  /user/:id ,
        component: User,
        props: (route) => ({
            id: route.query.id
        })
    }]
})