【react】常用Hooks 以及对应的生命周期

useState

• 函数组件不需要构造函数,可以通过调用 useState 来初始化 state,可以独立管理组件变量

function Example() {
  const [count, setCount] = useState(0);
  return null;
}

useEffect

• useEffect 拥有两个参数，第一个参数作为回调函数会在浏览器布局和绘制完成后调用，因此它不会阻碍浏览器的渲染进程。
• 第二个参数是一个数组

useEffect(() => {
      console.log('当第二个参数不存在时，每次渲染后都会触发回调');
})
useEffect(() => {
   console.log('组件初始化调用一次， 空数组 == componentDidMount');
}, [])

useEffect(()=>{
      console.log('组件根据依赖参数props更新调用 == componentDidUpdate');
},[props])

// 当在useEffect 的回调中返回一个函数,这个函数会在组件卸载前被调用, 可在这里清除定时器或事件监听。
useEffect(()=>{
      return ()=>{
         console.log('组件卸载调用 == componentWillUnmount'); 
      }
},[]);

useMemo

useCallback

• 一个钩子函数，通过包裹我们的普通函数进行性能优化

useRef