React Hooks

useState

jsx

const [count, setCount] = useState(0)

useEffect

jsx

useEffect(() => {
  const subscription = subscribe()
  return () => subscription.unsubscribe()
}, [dependency])

自定义 Hook

jsx

function useLocalStorage(key, initialValue) {
  const [value, setValue] = useState(() => {
    const saved = localStorage.getItem(key)
    return saved ? JSON.parse(saved) : initialValue
  })

  useEffect(() => {
    localStorage.setItem(key, JSON.stringify(value))
  }, [key, value])

  return [value, setValue]
}

规则

只在顶层调用 Hook
只在 React 函数组件或自定义 Hook 中调用