Twitter/X 博主@_georgemoller的分享
主要记录Twitter博主@_georgemoller分享的React技巧。对于我这种React小白很使用。于是搬运过来，并附上个人的一些理解。如有问题请邮箱本人，欢迎各位指正。
Solve re-render issues with composition
个人理解：功能单一，利用组合模式减少耦合，带来不必要的重新渲染
Utility Types For Enhanced Reusablity
个人理解：Typescript Pick的使用
Bad use case for useCallback
useCallback 使用在复杂逻辑的组件，简单组件不会消耗造成性能问题时不必使用
Intersection types to extends native props in a component
Don’t listen for ref changes with useEffect
本人曾经这么干过
useEffect vs useLayoutEffect
个人理解：useLayoutEffect在DOM更新后，浏览器绘制前执行。useEffect在DOM更新后，浏览器绘制后执行。
Separation of Concerns in React
React中的关注点分离 这是一个重要的软件设计原则，在React开发中也同样适用。它指的是将代码按照不同的功能或责任进行划分和组织，使每个部分专注于特定的任务。在React中，这通常体现为:
- 将UI和逻辑分离
- 将状态管理与渲染逻辑分离
- 将可复用的逻辑抽离成自定义Hook
- 将大型组件拆分成更小的、功能单一的组件
遵循这一原则可以提高代码的可维护性、可读性和可重用性。
Easy to read abstraction over array state
个人理解：对数组状态进行抽象，简化逻辑
How to import Server Components from Client Components
个人理解：服务端渲染框架中使用的小技巧
Avoid Transforming Data in useEffect
个人理解：在useEffect中避免对数据进行转换，避免不必要的重新渲染
原因：
- 性能问题：在 useEffect 中转换数据可能导致不必要的重渲染。
- 代码复杂性：可能使组件逻辑变得难以理解和维护。
更好的做法：
- 在渲染过程中直接转换数据。
- 使用 useMemo 缓存计算结果。
How and when to use flushSync
Defer creation of non-primitive values if you are using them within a dependency array
个人理解: useEffect使用Tips
Avoid premature optimization
How to expose custom refs with useImperativeHandle hook
Separate business logic from UI
How to virtualize large lists
Avoid difficult to read conditionals in React
Using inferred types in React
Avoid Provider Wrapping Hell
useEffect cheatsheet
开发中的学习
useState vs useReducer
个人理解useReducer是useState的进阶版本，useState适用于一些简单状态的管理。如果是多个简单状态之前存在复杂的逻辑关联，推荐使用useReducer去处理。
@uidotdev/usehooks 中 useThrottle 和 useDebunce的区别是什么？
-
作用目的
-
useThrottle（节流）： 目的是限制函数在一定时间内的执行次数。它确保函数在指定的时间间隔内最多被执行一次。
例如，在滚动事件处理中，当用户快速滚动页面时，使用节流可以避免频繁地执行某个昂贵的操作，如发送网络请求或进行大量的计算，从而提高性能。
-
useDebounce（防抖）： 主要用于在用户输入或触发某个事件后，等待一段时间，如果在这段时间内没有新的触发，则执行相应的函数。
常见的应用场景是在搜索框输入时，当用户停止输入一段时间后才进行搜索请求，避免在用户输入过程中频繁发送请求。
-
-
执行时机
-
useThrottle： 当触发事件开始时，函数会立即执行一次，然后在指定的时间间隔内，无论触发事件发生多少次，函数都不会再次执行。直到时间间隔结束后，下一次触发事件才能再次执行函数。
例如，假设设置节流时间为 1 秒，当用户连续触发事件时，函数在第一秒内执行一次，之后的触发会被忽略，直到下一个 1 秒间隔开始。
-
useDebounce： 当触发事件发生后，函数不会立即执行，而是启动一个定时器。如果在定时器到期之前又有新的触发事件，那么定时器会被重置。只有在定时器到期且没有新的触发事件时，函数才会执行。
比如，设置防抖时间为 500 毫秒，当用户输入内容后，500 毫秒内如果没有新的输入，函数就会执行；如果在这 500 毫秒内又有新的输入，定时器会重新开始计时。
-
-
适用场景
-
useThrottle： 适用于需要持续响应但又不能过于频繁执行的场景，比如滚动事件、窗口大小调整事件等，以减少资源消耗和提高性能。
例如，在地图应用中，当用户拖动地图时，可以使用节流来限制地图更新的频率，避免过度的计算和网络请求。
-
useDebounce： 非常适合处理用户输入、搜索框自动完成等场景，确保在用户停止操作一段时间后才执行相关操作，避免不必要的计算和网络请求。
例如，在在线文档的自动保存功能中，可以使用防抖来避免频繁保存，而是在用户停止编辑一段时间后进行保存操作。
-