父与子父组件包裹子组件，父组件向子组件传递数据。123456789101112131415161718192021222324// 子 const Button = ({ text }) => { <b...

痛定思痛没有很好的设计模式，写代码将会凌乱无序。没有模块划分，也没有组合的思想。 把一个页面写成一个组件 一个组件有3000行代码 基于场景的设计分类围绕“如何组合”根据不同的场景设计不同模式 组件的类别 无状态组件/哑组件/展示组件： 只做...

react的最小单位是组件 相同点 实际用途是一样的，都可作为基础组件展示UI 在现代浏览器中，除极端场景下，类（类组件）和闭包（函数组件）的性能差异不大 区别点 代码实现思想 类组件的根基是OOP，面向对象编程 函数组件的根据是FP，函数式编程 ...

由于函数式组件会从头执行到尾，所以生命周期一定是在谈论类组件 梳理生命周期的时机和职责，建立时机与操作的对应关系 使用方式（时机梳理）： 挂载，更新，卸载 适用范围（职责梳理）：状态变更、错误处理 时机梳理挂载阶段挂载阶段是指组件从初始化到完成加载...

你可能不需要使用派生state 文中列举了两种反模式的使用方式 直接复制prop到state 在props变化后修改state 这两种使用方式除了增加代码的维护成本外，没有任何的好处

代码分割 splitChunck 动态引用 适用场景：抽离相同代码到一个共享块 脚本懒加载，使得初始下载代码更小 懒加载JS脚本方式 CommonJS: require.ensure ES6: 动态import（需要babel支持，@babel/...

webpack打包现象webpack构建后的代码存在大量的闭包代码 大量函数闭包包裹代码，导致体积增大(模块越多越明显) 运行代码时创建的函数作用域变多，内存开销变大 被webpack转换后的模块会带上一层包裹，import会被转换成webpack...

tree-shaking 静态分析，不是动态分析 代码不会被执行到，就不会打包到bound.js 必须使用ES6的语法(import、export)才支持tree-shaking，commonjs方式不支持 webpck默认支持，在.babelrc里...

ESlintESLint是一个用来识别ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。 12345678910111213141516171819202122232425262728293031323...

定位源代码 通过 source-map 定位到源代码 开发环境：建议使用 首先在源代码的列信息是没有意义的，只要有行信息就能完整的建立打包前后代码之间的依赖关系。因此不管是开发环境还是生产环境，我们都会选择增加cheap基本类型来忽略模块打包前后...