React

React 是一个用于构建用户界面的 JavaScript 库。

Hooks

useState

import { useState } from 'react'

function Counter() {
  const [count, setCount] = useState(0)
  
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  )
}

useEffect

import { useEffect, useState } from 'react'

function DataFetcher() {
  const [data, setData] = useState(null)
  
  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData)
  }, [])
  
  return <div>{data && <p>{data.message}</p>}</div>
}

组件

函数组件

function Welcome({ name }) {
  return <h1>Hello, {name}!</h1>
}

自定义 Hooks

function useCounter(initialValue = 0) {
  const [count, setCount] = useState(initialValue)
  
  const increment = () => setCount(count + 1)
  const decrement = () => setCount(count - 1)
  
  return { count, increment, decrement }
}