8. Hooks 的设计动机和规则？为什么不能条件调用？

答案：

Hooks 的设计动机：

1. 逻辑复用

解决类组件中逻辑复用困难的问题
避免高阶组件和渲染属性模式的复杂性
让状态逻辑更容易测试和复用

2. 解决类组件的痛点

复杂的生命周期方法
this 绑定问题
难以理解的组件逻辑

3. 函数式编程思想

更简洁的代码
更好的可读性
更容易进行单元测试

Hooks 的规则：

1. 只在函数组件顶层调用

javascript 复制代码

// ✅ 正确：在顶层调用
function MyComponent() {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('')

  return <div>{count}</div>
}

// ❌ 错误：在条件语句中调用
function MyComponent({ shouldUseName }) {
  if (shouldUseName) {
    const [name, setName] = useState('') // 错误！
  }

  const [count, setCount] = useState(0)
  return <div>{count}</div>
}

2. 只在 React 函数中调用

javascript 复制代码

// ✅ 正确：在函数组件中
function MyComponent() {
  const [count, setCount] = useState(0)
  return <div>{count}</div>
}

// ✅ 正确：在自定义Hook中
function useCounter() {
  const [count, setCount] = useState(0)
  return [count, setCount]
}

// ❌ 错误：在普通函数中
function regularFunction() {
  const [count, setCount] = useState(0) // 错误！
}

为什么不能条件调用：

1. 链表结构依赖 React 内部使用链表结构来存储 Hooks 的状态，每个 Hook 在链表中的位置是固定的。

javascript 复制代码

// React 内部实现（简化版）
let hookIndex = 0
let hooks = []

function useState(initialValue) {
  const currentIndex = hookIndex++

  if (hooks[currentIndex] === undefined) {
    hooks[currentIndex] = initialValue
  }

  const setState = (newValue) => {
    hooks[currentIndex] = newValue
    // 触发重新渲染
  }

  return [hooks[currentIndex], setState]
}

2. 调用顺序必须一致

javascript 复制代码

// 第一次渲染
function MyComponent({ showName }) {
  const [count, setCount] = useState(0) // hookIndex: 0
  if (showName) {
    const [name, setName] = useState('') // hookIndex: 1
  }
  const [age, setAge] = useState(0) // hookIndex: 2
}

// 第二次渲染（showName = false）
function MyComponent({ showName }) {
  const [count, setCount] = useState(0) // hookIndex: 0 ✅
  // name hook 被跳过
  const [age, setAge] = useState(0) // hookIndex: 1 ❌ 应该是 2
  // 导致状态错乱！
}

3. 状态错乱问题

javascript 复制代码

// 错误示例
function BadComponent({ showExtra }) {
  const [count, setCount] = useState(0)

  if (showExtra) {
    const [extra, setExtra] = useState('') // 条件调用
  }

  const [name, setName] = useState('')

  // 当 showExtra 变化时，name 的状态会错乱
}

正确的做法：

javascript 复制代码

// ✅ 正确：始终在顶层调用
function GoodComponent({ showExtra }) {
  const [count, setCount] = useState(0)
  const [extra, setExtra] = useState('')
  const [name, setName] = useState('')

  // 在渲染逻辑中处理条件
  return (
    <div>
      <div>Count: {count}</div>
      {showExtra && <div>Extra: {extra}</div>}
      <div>Name: {name}</div>
    </div>
  )
}

ESLint 规则： 使用 eslint-plugin-react-hooks 来确保 Hooks 规则的正确使用：

json 复制代码

{
  "plugins": ["react-hooks"],
  "rules": {
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  }
}