React Hook 简介

一、Hook 的优点

React Hook 是 React 16.8 的新特性，目的是希望让函数组件代替 class 组件使用，做这样的代替有什么好处呢？

• 没有了 this，少了很多心智负担
• 不用写长长的一段声明 extends React.Component 和 constructor 等，让组件变得更轻量

既然是代替，那就需要让函数组件一样，还需要有这些

• 内部的 state
• 生命周期钩子

二、Hook 核心用法

useState 来模拟内部 state

const [count,setCount] = useState(0)
const [age,setage] = useState(20)

useEffect 来模拟生命周期钩子

// 相当于 componentDidMount 和 componentDidUpdate
useEffect(()=>{
    console.log('lift cycle')
}) //监控所有 state

useEffect(()=>{
    console.log('组件首次挂载和状态更新时执行')
  return ()=>{
      console.log('状态更新和组件卸载时执行')
  }
},[count])  // 只监控 count 状态

useEffect(()=>{
    console.log('组件首次挂载时执行')
  return ()=>{
      console.log('组件卸载时执行')
  }
},[])  // 都不监控

遇到这种写法不要惊讶

useEffect(()=>()=>{
      console.log('组件卸载时执行')
  },[])  // 都不监控

三、Hook 规则

只在最顶层使用 Hook，不要在条件和嵌套中调用 Hook

「@浪里淘沙的小法师」