eact Props 损害应用程序性能的错误

React 中的 Props 可能感觉很简单，但处理不当可能会使您的应用程序变得缓慢。随着时间的推移，在编码和查看一些 React 项目后，我注意到不断出现的十个与 props 相关的错误。这些问题也可能潜伏在您的代码中。

不过别担心——我们会一起修复它们。让我们深入研究，让您的 React 应用程序更快、更高效！

1} 当只需要特定属性时停止传递整个对象

当您的组件只需要几个属性时，将整个对象作为 props 传递会导致对象更新时不必要的重新渲染 - 即使您使用的值保持不变。

// Not ideal
function UserProfile({ user }) {
  // Only uses name and email
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

// Better
function UserProfile({ name, email }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}

只传递必要的内容。通过保持 props 的集中和最小化，您将减少组件重新渲染的频率，从而使您的应用程序的性能得到显着提升。

2} 避免在每次渲染时在 Props 中创建新对象

另一个隐藏的罪魁祸首是在 props 中创建内联对象。当您执行此操作时，每次渲染组件时都会创建新的对象引用。这些新引用会强制子组件重新渲染，即使值相同。

// Not efficient
function ParentComponent() {
  return (
    <ChildComponent 
      styles={{ margin: '20px', padding: '10px' }}
      config={{ theme: 'dark', animate: true }}
    />
  );
}

// Smarter approach
const styles = { margin: '20px', padding: '10px' };
const config = { theme: 'dark', animate: true };

function ParentComponent() {
  return (
    <ChildComponent 
      styles={styles}
      config={config}
    />
  );
}

在组件之外获取对象定义或使用 useMemo 来动态创建对象。这是一个简单的调整，但它可以显着减少不必要的渲染并保持一切顺利运行。

3} 避免不必要地传播道具

使用 prop spread (...props) 可能感觉很方便，但它往往弊大于利。它会传递您不需要的 props，使您的组件更难调试，甚至可能触发不需要的重新渲染。

// Inefficient
function Parent() {
  const props = {
    name: 'John',
    age: 30,
    email: 'john@email.com',
    phone: '1234567890',
    address: '123 Street'
  };

  return <UserCard {...props} />;
}

// A better way
function Parent() {
  const props = {
    name: 'John',
    age: 30,
    email: 'john@email.com',
    phone: '1234567890',
    address: '123 Street'
  };

  return <UserCard name={props.name} email={props.email} />;
}

通过仅指定您需要的 props，您可以使您的组件更清晰、更可预测。这使您的应用程序更快、更容易维护。

4} 始终记住回调道具

未记忆的回调函数可能会悄悄损害性能。每次重新渲染组件时，都会创建一个新的函数实例。这可能会破坏使用 React.memo 的子组件的优化或导致不必要的重新渲染。

// Not optimal
function TodoList() {
  const handleClick = (id) => {
    // handle click
  };

  return <TodoItem onClick={handleClick} />;
}

// Optimal approach
function TodoList() {
  const handleClick = useCallback((id) => {
    // handle click
  }, []); // Include dependencies if needed

  return <TodoItem onClick={handleClick} />;
}

将回调属性传递给记忆组件或在 useEffect 中使用它们时，用 useCallback 包装它们。这确保了稳定的引用并避免不必要的更新。

5} 停止通过多个级别进行 Prop 钻取

通过多个甚至不使用道具的组件传递道具肯定会创建不必要的重新渲染和混乱的代码。这称为道具钻探，随着应用程序的增长，它会使您的应用程序更难管理。

// Not ideal
function UserProfile({ user }) {
  // Only uses name and email
  return (
    <div>
      <h2>{user.name}</h2>
      <p>{user.email}</p>
    </div>
  );
}

// Better
function UserProfile({ name, email }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>{email}</p>
    </div>
  );
}

不要将 props 传递到每一层，而是使用 React Context 等工具或 Zustand 等库来管理深度嵌套的数据。这种方法可以使您的代码更加干净并避免不必要的渲染。

6} 不要使用数组索引作为键

使用数组索引作为键可能看起来无害，但它可能会导致微妙的错误和性能问题，特别是在项目被重新排序或删除的列表中。

// Not efficient
function ParentComponent() {
  return (
    <ChildComponent 
      styles={{ margin: '20px', padding: '10px' }}
      config={{ theme: 'dark', animate: true }}
    />
  );
}

// Smarter approach
const styles = { margin: '20px', padding: '10px' };
const config = { theme: 'dark', animate: true };

function ParentComponent() {
  return (
    <ChildComponent 
      styles={styles}
      config={config}
    />
  );
}

始终使用稳定、唯一的标识符作为键。这有助于 React 正确跟踪您的组件，确保顺利更新并准确维护状态。

7}停止传递未使用的道具

传递不必要的 props 会让你的组件变得臃肿并触发本可避免的重新渲染。每个额外的 prop 都会增加开销，即使它没有在组件中使用。

// Inefficient
function Parent() {
  const props = {
    name: 'John',
    age: 30,
    email: 'john@email.com',
    phone: '1234567890',
    address: '123 Street'
  };

  return <UserCard {...props} />;
}

// A better way
function Parent() {
  const props = {
    name: 'John',
    age: 30,
    email: 'john@email.com',
    phone: '1234567890',
    address: '123 Street'
  };

  return <UserCard name={props.name} email={props.email} />;
}

定期重构你的组件并删除任何不必要的 props。更精简的组件意味着更少的重新渲染和更快的应用程序。

8} 始终使用正确的道具类型

跳过 PropTypes 或 TypeScript 是一个常见错误，可能会导致错误和运行时错误。这些工具有助于在开发过程中捕获与 prop 相关的问题，使您的应用程序更加健壮且更易于调试。

// Not optimal
function TodoList() {
  const handleClick = (id) => {
    // handle click
  };

  return <TodoItem onClick={handleClick} />;
}

// Optimal approach
function TodoList() {
  const handleClick = useCallback((id) => {
    // handle click
  }, []); // Include dependencies if needed

  return <TodoItem onClick={handleClick} />;
}

使用 TypeScript 或 PropTypes 不仅可以帮助您及早发现问题，还可以使您的组件更具可预测性和可维护性。

9} 切勿直接改变 Props

直接更改 props 违背了 React 的不变性原则，常常会导致意外的错误和错过更新。

// Not ideal
function GrandParent({ user }) {
  return <Parent user={user} />;
}

function Parent({ user }) {
  return <Child user={user} />;
}

function Child({ user }) {
  return <span>{user.name}</span>;
}

// Smarter solution
function App() {
  const [user] = useState(userData);

  return (
    <UserContext.Provider value={user}>
      <GrandParent />
    </UserContext.Provider>
  );
}

function Child() {
  const user = useContext(UserContext);
  return <span>{user.name}</span>;
}

通过使用函数或状态更新来保持 props 不可变。这确保了 React 可以正确跟踪更改并在需要时重新渲染组件。

结论

这些 prop 错误可能看起来很小，但随着时间的推移，它们累积起来会造成严重的性能问题。为了让你的 React 应用程序顺利运行：

• 仅传递组件实际需要的 props。
• 使用 useCallback 来记忆函数并避免不必要的渲染。
• 依赖 Context 或 Zustand 等状态管理工具，而不是钻孔 props。
• 永远不要直接改变 props——始终使用不可变的更新。
• 使用 TypeScript 或 PropTypes 强制类型安全并尽早发现错误。

帮助您优化的工具：

• React DevTools 性能选项卡：查明性能瓶颈。
• why-did-you-render：自动检测不必要的渲染。
• ESLint React Hooks 插件：确保正确的钩子使用。
• TypeScript：添加静态类型以提高可靠性。

立即解决这些问题，您会发现您的应用感觉更快、响应更灵敏且更易于维护。

编码愉快！！

以上是eact Props 损害应用程序性能的错误的详细内容。更多信息请关注PHP中文网其他相关文章！