💻🔍React：你可能想知道的事情

嘿，大家好！

祝大家新年快乐！愿我们每个人都能发挥出最好的一面！

1. useEffects 用法可以变得超级简单

我们都见过这样的事情：

import React, { useState, useEffect } from "react";

const MyComponent = ({ propValue }) => {
  const [internalValue, setInternalValue] = useState("");

  useEffect(() => {
    setInternalValue(...); // Some extra logic modifying the propValue

  }, [propValue]);

  return {internalValue};
};

简化版本：

import React from "react";

const MyComponent = ({ propValue }) => {
  const internalValue = // Some extra logic modifying the propValue

  return {internalValue};
};

**为什么它更好：**

**更少的样板**：不需要 useState 或 useEffect。

**立即更新**：当道具改变时，值会自动更新。

**更清晰的代码**：更易于阅读和维护。

2. 状态可能不需要存在于父组件中

**非最佳示例：父组件中的状态**

这里，父母持有的状态（姓名和年龄）只与一个孩子有关：

import React, { useState } from "react";

const Parent = () => {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  return (
    
      Parent Component
      
      
      
    
  );
};

**好例子：子组件中的状态**

这里，状态被封装在子组件中，确保仅在需要时重新渲染：

import React, { useState } from "react";

const Parent = () => {
  return (
    
      Parent Component
      
      
      
    
  );
};

const Child = () => {
  const [name, setName] = useState("");
  const [age, setAge] = useState("");

  return (
    
      Child Component
       setName(e.target.value)}
        placeholder="Enter name"
      />
       setAge(e.target.value)}
        placeholder="Enter age"
      />
    
  );
};

**为什么它更好**：

**封装**：状态属于使用它的组件。

**改进的性能**：其他兄弟节点不会不必要地重新渲染。

**更清洁的父组件**：父组件只关注协调其子组件。

3. 大多数情况下，React 的优化方法可能不需要

现在这是一个很难触及的问题，但我们只能说 React 确实非常擅长处理重新渲染，而真正需要优化机制的情况非常罕见。

这并不是说它们没有用，只是你需要记住过早优化是一件事情。我并不真正支持“如果它没有完全坏掉就不要修复它”的说法，但我只能说，你需要在使用这些机制之前对它进行适当的检查，而不是直接使用它们。

尽管，我认为实际上有一些非常好的文章向我们展示了大量使用它们并没有太多的缺点（我猜除了由于人们对它们的工作原理缺乏了解而可能导致的错误）。但我的观点是，你可能根本不需要经历它们，而且……还可以为你节省一些时间

4. 你不必将所有东西都“钩化”……

钩子很酷，对吧？它们使我们能够以功能性的方式管理状态、副作用等。但是，仅仅因为钩子可用并不意味着您需要为所有东西创建一个。我见过很多开发人员陷入将简单逻辑转变为自定义钩子的陷阱，只是为了这样做。相反，您应该考虑它会帮助您解决什么问题？您会重复使用它吗？它会为您抽象一些逻辑吗？等等……

我想就此结束，我真的希望这会有所帮助，我们都能学到一些新东西 :))) 请随时回复我可能遗漏的任何可能情况或改进。我很乐意听到它们并学习。

CLIS.CC