useState 的传参方式，有什么区别？

---

在 React 中，useState 是一个 Hook，用于在函数组件中添加状态。useState 接受一个参数，即状态的初始值，返回一个包含当前状态和更新状态的函数的数组。有两种方式来传递初始值：

1. 直接传递初始值：

const [count, setCount] = useState(0);

这是最常见的用法，直接将初始值作为 useState 的参数传递。count 是当前状态的值，而 setCount 是用于更新状态的函数。

2. 传递一个函数：

const [count, setCount] = useState(() => {
  // some complex logic to compute the initial state
  return 0;
});

初始值也可以作为一个函数传递，这个函数在组件首次渲染时会被调用一次。这种方式适用于计算初始状态值的逻辑较为复杂的情况，例如依赖于 props 或其他状态。

区别：

1. 惰性初始化： 使用函数的方式可以实现惰性初始化，即在初始化时执行一些逻辑。这在需要进行复杂计算或依赖于外部参数的情况下很有用。

   const [count, setCount] = useState(() => {
     // 惰性初始化的逻辑
     return computeInitialValue();
   });

2. 避免重复计算： 如果直接传递初始值，那么每次组件重新渲染时都会计算一次初始值。而使用函数的方式可以确保初始值只在组件首次渲染时计算一次。

   // 直接传递初始值，每次渲染都会计算
   const [count1, setCount1] = useState(computeInitialValue());
   
   // 使用函数，仅在组件首次渲染时计算
   const [count2, setCount2] = useState(() => computeInitialValue());

总的来说，这两种方式在大多数情况下没有本质的区别，但在特定场景下选择使用函数的方式可以带来一些额外的优势。例如，如果初始值的计算逻辑复杂且耗时，或者依赖于 props 的值，使用函数可以更好地处理这些情况。

---

原文链接：codingdict.net

---