初始化state,注入props
componentWillMount:组件挂载到DOM前调用
render:根据props和state返回虚拟DOM
componentDidMount:组件挂载到DOM后调用
componentWillReceiveProps:组件接收到新的props时调用,在这个钩子里调用this.setState()不会引起第二次渲染
shouldComponentUpdate:props或state发生变化时,渲染执行前调用,return false可阻止渲染
componentWillUpdate:调用render方法前执行
componentDidUpdate:组件更新后调用,参数为prevProps,prevState
componentWillUnmount:卸载阶段,清除定时器,清除手动创建的DOM对象
componentWillReceiveProps,componentWillUpdate废弃
getDerivedStateFromProps 会在调用 render 方法之前调用,并且在初始挂载及后续更新时都会被调用,返回一个对象来更新 state,如果返回 null 则不更新任何内容
此方法适用于罕见的用例,即 state 的值在任何时候都取决于 props
getSnapshotBeforeUpdate() 在最近一次渲染输出(提交到 DOM 节点)之前调用。它使得组件能在发生更改之前从 DOM 中捕获一些信息(例如,滚动位置)。此生命周期的任何返回值将作为第三个参数传递给 componentDidUpdate()。
Hook是react 16.8的新增特性,在函数组件中也可以使用state以及其他React特性
Hook可以让我们不用修改组件结构复用状态逻辑
Hook 将组件中相互关联的部分拆分成更小的函数
import { useEffect, useRef } from 'react';/*** 仅更新时执行* @param {Function} effect* @param {Array<any>} dependencies*/function useUpdateEffect(effect, dependencies = []) {const isInitialMount = useRef(true);useEffect(() => {if (isInitialMount.current) {isInitialMount.current = false;} else {effect();}}, dependencies);}export default useUpdateEffect;
import { useState, useCallback } from 'react';import Cache from '@/lib/cache';// 对API请求做一层封装,loading态,请求结果的缓存function useRequest(fetchRequest, { initData, cacheKey } = {}) {const [res, setRes] = useState(Cache.get(cacheKey) || initData);const [isLoading, setIsLoading] = useState(false);const callMethod = (o) => {setIsLoading(true);return fetchRequest(o).then((r) => {setRes(r);if (cacheKey) {Cache.set(cacheKey, r);}return r;}).finally(() => {setIsLoading(false);});};const callRequest = useCallback(callMethod, []);return [callRequest, res, isLoading];}export default useRequest;
import { useEffect, useState, useMemo } from 'react';import io from 'socket.io-client';const connectState = ['connect', 'reconnect'];const failState = ['connect_error','connect_timeout','disconnect','error','reconnect_error','reconnect_failed',];function useSocketIO(url, options, dependencies = []) {const [connect, setConnect] = useState(false);const socket = useMemo(() => {return io(url, options);}, [url, options,...dependencies]);useEffect(() => {connectState.forEach((state) => {socket.on(state, () => {console.log(state);setConnect(true);});});failState.forEach((state) => {socket.on(state, () => {console.log(state);setConnect(false);});});return () => {connectState.forEach((state) => {socket.off(state);});failState.forEach((state) => {socket.off(state);});socket.close();};}, [socket]);return [connect, socket];}export default useSocketIO;