生命周期危机章-js教程-PHP中文网

首页

web前端

js教程

生命周期危机章

DDD

Nov 11, 2024 pm 04:29 PM

Chapter The Lifecycle Crisis

第一章：生命周期危机

当阿琳跌跌撞撞地进入第七区时，警报在她耳边响起。几个小时前，她还在训练室里，在生命周期队长的注视下练习演习。现在，混乱降临了——没有模拟，没有准备。

“学员阿林，在这里！” Stateflow 中尉打来电话。阿琳蜿蜒穿过板条箱和行星防御军团（PDC）的其他成员，加入她的小队，网络事故。

“快活起来，网络事故！他们来了！” 生命周期队长喊道。阿林抬头看到虫群——闪烁的黑色身影在天空中前进。后方隐约可见Queen Glitch，一个更大的阴影在地平线上蔓延。

阿琳稳住身子，握紧手杖，集中注意力。今天，她必须学习——而且要快。

“产品生命周期灾难”

当 Bug Horde 逼近时，Arin 回想起之前发现的问题——产品模块，一团混乱的连接。原始代码困扰着她：

原始代码

import { useEffect, useState } from 'react';

function Products({ items, category, fetchProducts }) {
  const [processedItems, setProcessedItems] = useState([]);
  const [fullName, setFullName] = useState("");

  // Overdoing data transformations in useEffect
  useEffect(() => {
    const filteredItems = items.filter(item => item.category === category);
    setProcessedItems(filteredItems);
  }, [items, category]);

  // Misusing useEffect for derived state
  useEffect(() => {
    setFullName(`${category} Products`);
  }, [category]);

  // Using useEffect for API calls
  useEffect(() => {
    fetchProducts(); 
  }, [category]);

  return (
    <div>
      <h1>{fullName}</h1>
      {processedItems.map(product => (
        <div key={product.id}>
          <p>{product.name}</p>
        </div>
      ))}
    </div>
  );
}

登录后复制

物品或类别的每一个变化都会导致一连串的更新和故障——比如攻击它们的错误不断增加。 “学员，记住了！”生命周期队长的声音打断了她的思绪。 “你必须了解流程——控制它，不要只是做出反应！”

“第 1 步：处理数据转换”

生命周期队长移到了阿林身边。 “学员，每次挥杆都要高效、有意义。”

Arin回忆起混沌过滤逻辑：

useEffect(() => {
  const filteredItems = items.filter(item => item.category === category);
  setProcessedItems(filteredItems);
}, [items, category]);

登录后复制

不断的过滤导致了冗余的更新。解决方案在于效率。

重构：使用 useMemo 优化数据转换

const processedItems = useMemo(() => {
  return items.filter(item => item.category === category);
}, [items, category]);

登录后复制

她刻意挥动法杖，每一个动作都精准无比。就像使用 useMemo 减少冗余渲染一样，她的每次攻击都需要目的。

“第 2 步：管理派生状态”

Arin 与 渲染变形者 一起移动，后者流畅地适应了错误。 “别想太多，学员——保持直接，”雷德一边说，一边变形以偏转攻击。

Arin 思考了模块中过于复杂的逻辑：

const [fullName, setFullName] = useState("");
useEffect(() => {
  setFullName(`${category} Products`);
}, [category]);

登录后复制

重新计算这个简单的值感觉很混乱——就像混乱的战场一样。她需要简单。

重构：派生状态的直接计算

import { useEffect, useState } from 'react';

function Products({ items, category, fetchProducts }) {
  const [processedItems, setProcessedItems] = useState([]);
  const [fullName, setFullName] = useState("");

  // Overdoing data transformations in useEffect
  useEffect(() => {
    const filteredItems = items.filter(item => item.category === category);
    setProcessedItems(filteredItems);
  }, [items, category]);

  // Misusing useEffect for derived state
  useEffect(() => {
    setFullName(`${category} Products`);
  }, [category]);

  // Using useEffect for API calls
  useEffect(() => {
    fetchProducts(); 
  }, [category]);

  return (
    <div>
      <h1>{fullName}</h1>
      {processedItems.map(product => (
        <div key={product.id}>
          <p>{product.name}</p>
        </div>
      ))}
    </div>
  );
}

登录后复制

阿琳调整了自己的姿势，让她的动作变得直接而精简，就像简化了导出状态计算一样。每一次挥击都很精准，更有效地消灭虫子。

“第三步：处理外部威胁”

突然，大地震动。阿琳抬头看着故障女王，一股黑暗的力量扭曲了她周围的一切。 “她瞄准的是核心！”斯泰特弗洛中尉喊道。 “遏制外部威胁！”

Arin 回顾了产品模块中管理外部 API 调用的有缺陷的方法：

useEffect(() => {
  const filteredItems = items.filter(item => item.category === category);
  setProcessedItems(filteredItems);
}, [items, category]);

登录后复制

不受控制的 API 调用反映了她面前的不稳定——没有策略的反应。答案在于刻意的行动。

重构：正确使用 useEffect 进行外部交互

const processedItems = useMemo(() => {
  return items.filter(item => item.category === category);
}, [items, category]);

登录后复制

Arin 稳住了自己，意识到专注于重要事情的重要性——让互动变得有意义。她将自己的能量与战斗的流程同步，每一步都经过深思熟虑，就像妥善管理 API 调用来稳定核心一样。

学习与平静

太阳落入地平线以下，虫群撤退了。格利奇女王就像乌云升起一样消失了。阿林筋疲力尽，单膝跪地，呼吸粗重。

Stateflow 中尉走过来，向她点点头。 “你今天学会了适应，学员。你让每一个行动都很重要。”

生命周期队长加入了他们。 “这是第一步，阿林。生命周期稳定性不是一场一次性的战斗，而是持续不断的战斗。”

阿琳站了起来，身体疼痛，但她的理解加深了。今天的任务不仅仅是战胜错误，而是稳定流程并理解有意的行动。产品模块的每一课都反映了这里的斗争——消除混乱，使每个效果都有意义，每个依赖关系都清晰。

她看着天空，格利奇女王已经消失了，她知道她的旅程才刚刚开始。法典星球需要稳定性，而阿林已准备好学习、适应和捍卫。

备忘单：“生命周期危机”的教训

Scenario	Initial Misstep	Refactored Approach	Why It's Better
Data Transformation	useEffect with setState to transform data	useMemo for transforming data	Avoids unnecessary re-renders by recomputing only when dependencies change, improving efficiency and reducing bugs.
Derived State from Props	useState and useEffect to calculate derived state	Direct computation in the component	Simplifies the code, reduces complexity, and ensures better maintainability without extra state or re-renders.
Fetching External Data	useEffect without managing dependencies well	useEffect with appropriate dependencies	Ensures API calls are only triggered when necessary, focusing on external interactions and improving performance.
Event Handling	Inside useEffect	Use direct event handlers	Keeps logic focused and avoids unnecessary complexity inside useEffect. Helps maintain clearer code and intended behaviors.
Managing Subscriptions	Forgetting cleanup	Always include cleanup in useEffect	Ensures that no memory leaks occur and resources are properly managed, leading to a stable component lifecycle.
Dependency Management	Over-complicating dependencies in useEffect	Thoughtful and minimal dependencies	Prevents unintended re-renders and helps maintain predictable behavior in components, resulting in a smoother experience.
Understanding Lifecycle	Mapping lifecycle methods directly from class-based components	Rethink with functional Hooks like useEffect, useMemo	Ensures that the functional components are optimized, taking advantage of the benefits of React Hooks, and reducing redundancy.

场景最初的失误重构方法为什么更好标题> 数据转换 useEffect 配合 setState 来转换数据 useMemo 来转换数据仅在依赖项发生变化时才重新计算，从而避免不必要的重新渲染，从而提高效率并减少错误。从 Props 派生状态 useState 和 useEffect 计算派生状态组件中直接计算简化代码，降低复杂性，并确保更好的可维护性，无需额外状态或重新渲染。获取外部数据 useEffect 没有很好地管理依赖项具有适当依赖项的 useEffect 确保 API 调用仅在必要时触发，专注于外部交互并提高性能。事件处理内部useEffect 使用直接事件处理程序保持逻辑集中并避免 useEffect 内部不必要的复杂性。帮助维护更清晰的代码和预期行为。管理订阅忘记清理始终在 useEffect 中包含清理确保不会发生内存泄漏并且资源得到正确管理，从而实现稳定的组件生命周期。依赖管理 useEffect 中的依赖关系过于复杂周到且最小的依赖防止意外重新渲染并帮助维持组件中的可预测行为，从而带来更流畅的体验。了解生命周期直接从基于类的组件映射生命周期方法重新思考 useEffect、useMemo 等功能性 Hooks 确保功能组件得到优化，利用 React Hooks 的优势，并减少冗余。表>