手游托在什么网站申请微信公众号怎么创建

手游托在什么网站申请,微信公众号怎么创建,深圳软件公司开发,wordpress转cms对于 React 学习者来说#xff0c;掌握基础的 JSX 和 useState 往往只是第一步。当你开始构建更复杂的应用时#xff0c;你可能会遇到一些令人困惑的现象#xff1a;为什么我的组件在疯狂重新渲染#xff1f;为什么定时器里的数据永远是最旧的#xff1f; 这篇文章将带你深…对于 React 学习者来说掌握基础的 JSX 和useState往往只是第一步。当你开始构建更复杂的应用时你可能会遇到一些令人困惑的现象为什么我的组件在疯狂重新渲染为什么定时器里的数据永远是最旧的这篇文章将带你深入 React 的渲染机制通过三个经典的实战场景彻底搞懂useMemo、useCallback的核心作用以及那个让无数新手“翻车”的闭包陷阱。一、 为什么我们需要“缓存”首先我们需要建立一个核心认知React 组件本质上就是一个函数。每当组件的状态State或属性Props发生变化时这个函数就会从头到尾重新运行一次。这个过程被称为“重新渲染”Re-render。在大多数情况下这非常快。但是如果你的组件里包含了大量的计算逻辑或者你的组件树非常深无脑的“重算”就会导致页面卡顿。React 提供了三个 Hook 来帮助我们“缓存”数据避免无意义的消耗useMemo、useCallback和React.memo。二、 场景一拒绝昂贵的重复计算 (useMemo)想象这样一个场景我们需要对一个包含大量数据的列表进行关键词过滤。同时页面上还有一个毫无关联的计数器按钮。1. 问题代码在这个版本中每次点击“计数器”按钮导致状态更新组件函数都会重新执行。这意味着slowList的过滤逻辑和slowSum的累加逻辑会被强制重跑一遍尽管它们依赖的数据根本没有变。import { useState } from react; // 模拟一个昂贵的计算过程 function slowSum(n) { console.log(正在进行昂贵的计算...); let sum 0; // 模拟耗时操作 for (let i 0; i n * 10000000; i) { sum i; } return sum; } export default function App() { const [count, setCount] useState(0); // 与下方计算无关的状态 const [keyword, setKeyword] useState(); const list [apple, orange, peach, banana]; // 性能问题 // 每次点击 count1组件重新渲染filter 都会重新执行 const filterList list.filter(item { console.log(Filter 逻辑被触发了); return item.includes(keyword); }); // 性能问题 // 每次组件渲染这个昂贵的求和函数都会运行阻塞页面 const result slowSum(10); return ( div h3结果: {result}/h3 {/* 这里的输入框改变会导致 keyword 更新 */} input typetext value{keyword} onChange{(e) setKeyword(e.target.value)} placeholder输入关键词过滤 / {/* 这里的点击会导致 count 更新进而触发整个组件重绘 */} button onClick{() setCount(count 1)} Count: {count} (点我也许会卡顿) /button ul {filterList.map(item li key{item}{item}/li)} /ul /div ); }2. 优化方案使用 useMemouseMemo的作用是缓存计算结果。它类似于 Vue 中的computed属性。它接收两个参数计算函数。依赖项数组只有数组里的变量变了计算函数才会重新执行。import { useState, useMemo } from react; // ... slowSum 函数保持不变 ... export default function App() { const [count, setCount] useState(0); const [keyword, setKeyword] useState(); const [num, setNum] useState(10); const list [apple, orange, peach, banana]; // ✅ 优化 1缓存列表过滤结果 // 只有当 keyword 变化时才会重新执行过滤逻辑 const filterList useMemo(() { console.log(Filter 逻辑执行); return list.filter(item item.includes(keyword)); }, [keyword]); // 依赖项是 keyword // ✅ 优化 2缓存昂贵的数学计算 // 只有当 num 变化时slowSum 才会重新运行 const result useMemo(() { return slowSum(num); }, [num]); // 依赖项是 num return ( div p结果: {result}/p {/* 这里的操作现在非常流畅因为 filterList 和 result 都是直接取缓存值 */} button onClick{() setCount(count 1)} Count 1 (不会触发重算) /button {/* ... 省略渲染部分 ... */} /div ); }现在当你点击count 1时控制台不会再打印 “Filter 逻辑执行” 或 “正在进行昂贵的计算”因为 React 直接复用了上一次的结果。三、 场景二防止子组件“无辜陪跑” (useCallback)React 有一个默认行为当父组件重新渲染时所有的子组件也会跟着重新渲染无论子组件的 Props 有没有变化。1. 使用 React.memo 锁住子组件为了阻止这种“连坐”效应我们可以使用高阶组件memo。它的作用是只有当 Props 发生浅比较变化时才允许子组件重新渲染。import { useState, memo } from react; // 使用 memo 包裹子组件 const Child memo(({ count, handleClick }) { console.log(子组件渲染了); // 只有 props 变了才会打印 return ( div onClick{handleClick} style{{ border: 1px solid red, padding: 10 }} 我是子组件收到 Count: {count} /div ) });2. 引用类型的陷阱为什么 memo 失效了即使加了memo如果你向子组件传递了一个函数你可能会发现优化失效了。export default function App() { const [count, setCount] useState(0); const [otherNum, setOtherNum] useState(0); // 陷阱 // 每次 App 重绘都会创建一个全新的 handleClick 函数对象 // 虽然函数体代码没变但内存地址变了 const handleClick () { console.log(点击了子组件); } return ( div {/* 点击这个按钮App 重绘 - handleClick 变了 - Child 重绘 */} button onClick{() setOtherNum(otherNum 1)} 修改无关数据 ({otherNum}) /button {/* Child 虽然使用了 memo但 props.handleClick 每次都是新的所以依然会重绘 */} Child count{count} handleClick{handleClick} / /div ) }在 JavaScript 中函数是引用类型。第一次渲染创建的handleClick和第二次渲染创建的handleClick是两个不同的对象func1 ! func2。memo经过对比发现 Props 变了于是允许子组件更新。3. 终极解法使用 useCallbackuseCallback的作用就是缓存函数引用。只要依赖项不变它返回的永远是同一个函数引用。import { useState, useCallback } from react; export default function App() { const [count, setCount] useState(0); const [otherNum, setOtherNum] useState(0); // ✅ 优化 // 使用 useCallback 缓存函数 // 依赖项数组为空 []或者包含需要的依赖 // 这里如果 handleClick 内部不依赖外部变量依赖项可以是 [] const handleClick useCallback(() { console.log(点击了子组件); }, []); // 永远返回同一个函数引用 return ( div button onClick{() setOtherNum(otherNum 1)} 修改无关数据 ({otherNum}) /button {/* 此时handleClick 引用没变count 也没变Child 完全不会重新渲染 */} Child count{count} handleClick{handleClick} / /div ) }总结React.memo负责拦截组件更新useCallback负责提供稳定的函数引用两者往往需要配合使用才能生效。四、 场景三令人头秃的“闭包陷阱”在使用useEffect处理定时器或事件监听时新手最容易遇到“数据不更新”的诡异 BUG。1. BUG 复现import { useState, useEffect } from react; export default function App() { const [count, setCount] useState(0); useEffect(() { const timer setInterval(() { // 陷阱这里的 count 永远是 0 console.log(当前 Count 是:, count); }, 1000); return () clearInterval(timer); }, []); // 依赖项为空只在组件挂载时执行一次 return ( div p页面上的 Count: {count}/p button onClick{() setCount(count 1)}1/button /div ); }现象点击按钮页面上的数字变成了 1, 2, 3… 但控制台打印的永远是Current count: 0。原因这就是闭包陷阱Stale Closure。组件第一次渲染count是 0。useEffect执行创建了一个定时器函数。这个函数“记住”了它诞生时的环境也就是count 0。依赖项是[]所以useEffect再也没运行过。不管后来组件重新渲染多少次定时器里跑的永远是第一次那个“老旧”的函数它眼里只有旧的count。2. 解决方案解决闭包陷阱主要有两种方式方法 A诚实地填写依赖项推荐如果 Effect 内部用到了count就应该把它加入依赖数组。useEffect(() { const timer setInterval(() { console.log(当前 Count 是:, count); }, 1000); // 每次 count 变化 // 1. 执行清理函数 clearInterval // 2. 重新运行 Effect创建新闭包捕获最新的 count return () clearInterval(timer); }, [count]);方法 B使用函数式更新适用于setState如果你只是想基于旧值更新状态不需要读取值可以使用setCount(prev prev 1)这样就不需要依赖外部的count变量了。总结React 的性能优化并不神秘核心就在于管理好依赖和引用。Hook核心作用适用场景useMemo缓存值这里的计算太贵了不想每次渲染都算一遍useCallback缓存函数这个函数要传给用memo包裹的子组件不想破坏它的稳定性useEffect处理副作用记得处理好依赖项小心闭包陷阱希望这篇文章能帮你构建出更高效、更健壮的 React 应用如果你有任何疑问欢迎在评论区讨论。