All Posts

1. 在单次渲染的范围内，props和state始终保持不变，可以看成固定值，在任何地方读取都是一样的（Capture Value） 2. React只会在浏览器绘制后运行effects。这使得你的应用更流畅因为大多数effects并不会阻塞屏幕的更新。Effect的清除同样被延迟了。上一次的effect会在重新渲染后被清除。 3. useEffect 里的 return，清理的也是当前渲染的这一...

先介绍两个概念 - 状态共位：将状态尽可能放置在离其使用位置最近的组件中。从而减少不必要的渲染和 props 传递，简化组件结构，提高可维护性。适用于状态仅被单个或少数几个组件使用的场景 - 状态提升：将共享状态提升到共同的祖先组件中。实现多个组件之间状态共享，父组件通过 props 向下传递数据和回调函数。使用于状态被多个兄弟组件所需要时。 一句话总结：共置状态 -> 提升状态 -> 组件组合 ...

四点建议： 1. 一开始不要过度考虑组件的扩展性。如果在一开始就把各种情况都考虑到，会导致组件核心功能不清晰，为了实现各个 props，可能会导致代码存在很多的逻辑判断 2. 如果为了高扩展性设计，可以考虑更多使用 props.children 插槽的方式，让外界更自由的使用。而组件只关心自己的核心功能。如果是为了让用户即插即用，可能确实需要支持更多的 props。 3. 关注传入 props 的...

1. 在需求设计阶段打好地基，明确模块的单一职责，避免功能混杂，预判扩展性，安全性和对性能造成的影响 2. 在业务迭代中，定期重构冗余代码，进一步抽象逻辑，将页面拆分为更独立的组件。注意在重构过程中，通过自动化用例测试避免引入新的问题 3. 强化错误定位能力，通过归档生产环境 SourceMap ，提高定位线上问题的效率 4. 通过性能检测平台监测关键指标（页面响应速度，操作响应时间），及时发现错...

前端性能优化指的是，通过各种技术手段，提高网页的加载速度，渲染速度，交互响应速度，减少资源占用，提高用户体验。 按照测量在先，优化在后的原则，我将从以下几个方面进行分析： 1. 性能检测 2. 网络请求优化 3. 资源加载优化 4. 代码与架构优化 5. 渲染性能优化 6. 感知体验优化 性能检测 1. 确立性能指标与目标：关注核心 Web 指标（Core Web Vitals）： - LCP（最...