useState/useEffect简单使用

useState

// 传入初始值，作为 state
const [state, setState] = useState(initialState)

//  `惰性初始 state`；传入函数，由函数计算出的值作为 state
// 此函数只在初始渲染时被调用
const [state, setState] = useState(() => {
  const initialState = someExpensiveComputation(props)
  return initialState
})

useEffect

该 Hook 接收一个包含命令式、且可能有副作用代码的函数.

在函数组件主体内（这里指在 React 渲染阶段）改变 DOM、添加订阅、设置定时器、记录日志以及执行其他包含副作用的操作都是不被允许的，因为这可能会产生莫名其妙的 bug 并破坏 UI 的一致性。

使用 useEffect 完成副作用操作，赋值给 useEffect 的函数会在组件渲染到屏幕之后。你可以把 effect 看作从 React 的纯函数式世界通往命令式世界的逃生通道。

默认情况下，effect 将在每轮渲染结束后执行，可以选择让它 在只有某些值改变的时候才执行。

清除 effect
通常，组件卸载时需要清除 effect 创建的诸如订阅或计时器 ID 等资源。要实现这一点，useEffect 函数需返回一个清除函数。

useEffect(() => {
  const subscription = props.source.subscribe()
  return () => {
    // 清除订阅
    subscription.unsubscribe()
  }
}, [依赖])