React useState 和 useEffect 使用坑点注意总结

React Hooks 使用注意事项

Area: Hooks
Date: February 10, 2025
Important: 🌟🌟🌟

React Hooks 注意事项

要点：

• useState 的初始化值 只在第一次渲染时计算，并且这个值不会随着组件重新渲染而更新。
• useEffect 可能出现死循环，比如处理请求接口时，依赖项绑定对象类型数据，会死循环。

useState 的初始值问题

Case：useState 的初始化值 只在第一次渲染时计算，并且这个值不会随着组件重新渲染时更新。

理解：useState 的初始化值只在组件的第一次渲染时生效，不会随着 props 或 state 的变化而更新。

import React, {
    useState } from 'react'

// 子组件
function Child({
     userInfo }) {
   
  // render: 初始化 state
  // re-render: 只恢复初始化的 state 值，不会再重新设置新的值
  //            只能用 setName 修改
  const [name, setName] = useState(userInfo.name)

  return (
    <div>
      <p>Child, props name: {
   userInfo.name}</p>
      <p>Child, state name: {
   name}</p>
    </div>
  )
}

function App() {
   
  const [name, setName] = useState('双越')
  const userInfo = {
    name }

  return (
    <div>
      <div>
        Parent &nbsp;
        <button onClick={