阅读 298

react-hooks详解

1 关于hook

1.1 为什么使用hook

在react类组件(class)写法中,有setState和生命周期对状态进行管理,但是在函数组件中不存在这些,故引入hooks(版本:>=16.8),使开发者在非class的情况下使用更多react特性。

以下是实现一个输入框,类组件和函数组件两种写法的对比:

/**
 * @name 类组件
 */
import React from 'react';
export default class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'world'
    };
  }
  componentDidMount() {
    console.log('组件挂载后要做的操作')
  }
  componentWillUnmount() {
    console.log('组件卸载要做的操作')
  }
  componentDidUpdate(prevProps, prevState) {
    if (prevState.name !== this.state.name) {
      console.log('组件更新后的操作')
    }
  }
  render() {
    return (
      <div>
        <p>hello {this.state.name}</p>
        <input type="text" placeholder="input new name"
          onChange={(e) => this.setState({ name: e.target.value })}>
        </input>
      </div>
    );
  }
}


复制代码
/**
 * @name 函数组件
 */
import React, { useState, useEffect } from 'react';

export default function Home() {
  const [name, setName] = useState('world');
  return (
    <div>
      <p>hello {name}</p>
      <DemoState />
    </div>
  )
}

function DemoState() {
  const [n1, setN1] = useState(1)
  const [n2, setN2] = useState(2)
  const [n3, setN3] = useState(3)

  useEffect(() => {
    setN1(10)
    setN1(100)
  }, [])
  const handleClick = () => {
    setN2(20)
    setN3(30)
  }
  console.log('demo-state', n1, n2, n3)
  return <button onClick={handleClick}>click</button>
}

复制代码

上述例子中,useState相当于constructor,完成数据的初始化;

useEffect相当于componentDidMount和componentDidUpdate两个生命周期,通过return () => {}的方式解绑生命周期,相当于componentWillUnmount周期,以监听页面滚动为例,通过effect实现监听与解绑如下:

useEffect(() = >{ window.addEventListener(‘scroll’, throttleFunc) return () = >{ window.removeEventListener(‘scroll’, throttleFunc) } }, [])

在同一个effect钩子中实现绑定与解绑,使状态的管理更加方便、代码更简洁。

此外还有发生在页面渲染前的useMemo相当于shouldComponentUpdate周期等,具体关系如下表:

class组件hooks
shouldComponentUpdateuseMemo
render函数本身
getDerivedStateFromPropsuseState 中的 update
getDerivedStateFromError
constructoruseState
componentWillUnmountuseEffect中的return函数
componentDidUpdateuseEffect
componentDidMountuseEffect
componentDidCatch
结论:使用hooks的函数组件,简化了很多代码,不用维护复杂的生命周期,也不用担心this的指向问题。

1.2 什么是hook

hooks挂载在Fiber结点上的memoizedState,filber结构如下:

FiberNode { // fiber结构
  memoziedState, // 组件更新的依据
  type, // 原生或react   
  key,
  tag,
  ...
}

复制代码

memoziedState这个字段很重要,是组件更新的唯一依据。在class组件里,它就是this.state的结构,调用this.setState的时候,其实就是修改了它的数据,数据改变了组件就会重新执行。

也就是说,即使是class组件,也不会主动调用任何生命周期函数,而是在memoziedState改变后,组件重新执行,在执行的过程中才会经过这些周期。

所以,这就解释了函数式组件为什么可以通过hooks改变状态,实际上就是修改了对应fiber节点的memoziedState。

hooks主要有以下特点:

1、无需修改组件结构的情况下复用状态逻辑;

2、可将组件中相互关联的部分拆分成更小的函数,复杂组件将变得更容易理解;

3、每一个组件内的函数(包括事件处理函数,effects,定时器或者api调用等等)会捕获某次渲染中定义的props和state;

4、memo缓存组件 ,useMemo缓存值, useCallback缓存函数

5、每次render都有自己的props、state和effects。(每一个组件内的函数,包括事件处理函数,effects,定时器或者api调用等等,会捕获某次渲染中定义的props和state);

6、**更新状态的时候(如setCount(count + 1)),React会重新渲染组件,**每一次渲染都能拿到独立的count状态,这个状态值是函数中的一个常量;

7、没有了显性的生命周期,所有渲染后的执行方法都在useEffect里面统一管理

8、函数式编程,不需要定义constructor、render、class;

9、某一个组件,方法需不需要渲染、重新执行完全取决于开发者,方便管理。

1.3 常见hook

useState、useEffect、useMemo、useCallback、useRef、useContext、useReducer…。

所有的钩子都是为函数引入外部功能,react约定,钩子一律使用use前缀命名。

2 常用hook

2.1 useState

示例:

const [stateA, setStateA] = useState(0)

参数是初始state(定义初始state最好给出初始值,方便后期维护, 0/false/’’/[]/{})。

返回值:一个是当前state,一个是更新state的函数。

useState的实现很简单,只有两行

export function useState<S>(initialState: (() => S) | S) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}


复制代码

重点都在dispatcher上,dispatcher通过resolveDispatcher()来获取,这个函数只是将ReactCurrentDispatcher.current的值赋给了dispatcher

function resolveDispatcher() {
  const dispatcher = ReactCurrentDispatcher.current;
  return dispatcher;
}

复制代码

useState挂在dispatcher上,resolveDispatcher() 返回的是 ReactCurrentDispatcher.current,所以useState(xxx)等价于ReactCurrentDispatcher.current.useState(xxx)。

useState(hooks)的具体执行过程如下:

1.png

  • updateContainer → … → beginWork
  • beginWork中会根据当前要执行更新的fiber的tag来判断执行什么,在函数式组件,执行了updateFunctionComponent(判断执行函数式/组件式更新)

首次渲染时,React Fiber 会从 packages/react-reconciler/src/ReactFiberBeginWork.js 中的 beginWork() 开始执行。在beginWork函数中,可以根据workInProgress(是一个Fiber节点)上的tag值来走不通的方法加载或更新组件,如下:

function beginWork(current: Fiber | null, workInProgress: Fiber, renderExpirationTime: ExpirationTime, ) : Fiber | null {
	/****/
	// 根据不同的组件类型走不同的方法
	switch (workInProgress.tag) {
		// 不确定组件    
	case IndeterminateComponent:
		{
			const elementType = workInProgress.elementType;
			// 加载初始组件       
			return mountIndeterminateComponent(current, workInProgress, elementType, renderExpirationTime, );
		}
		// 函数组件     
	case FunctionComponent:
		{
			const Component = workInProgress.type;
			const unresolvedProps = workInProgress.pendingProps;
			const resolvedProps = workInProgress.elementType === Component ? unresolvedProps: resolveDefaultProps(Component, unresolvedProps);
			// 更新函数组件       
			return updateFunctionComponent(current, workInProgress, Component, resolvedProps, renderExpirationTime, );
		}
		// 类组件     
	case ClassComponent:
		{
			/****/
		}
	}
}

复制代码
  • 在updateFunctionComponent中,对hooks的处理如下
nextChildren = renderWithHooks(
  current,
  workInProgress,
  Component,
  nextProps,
  context,
  renderExpirationTime,
);

复制代码

所以,React Hooks 的渲染核心是renderWithHooks,在renderWithHooks函数中,初始化了Dispatcher。

export
function renderWithHooks < Props, SecondArg > (current: Fiber | null, workInProgress: Fiber, 
             Component: (p: Props, arg: SecondArg) = >any, props: Props, secondArg: SecondArg, nextRenderLanes: Lanes, ) : any {

	// 若Fiber为空,则认为是首次加载
	ReactCurrentDispatcher.current =
      current === null || current.memoizedState === null
        ? HooksDispatcherOnMount
        : HooksDispatcherOnUpdate;

	// 挂载时的Dispatcher
	const HooksDispatcherOnMount: Dispatcher = {
		readContext,
		// ...
		useCallback: mountCallback,
		useContext: readContext,
		useEffect: mountEffect,
		useMemo: mountMemo,

		useState: mountState,
		// ...
	};

	// 更新时的Dispatcher
	const HooksDispatcherOnUpdate: Dispatcher = {
		readContext,
		// ...
		useCallback: updateCallback,
		useContext: readContext,
		useEffect: updateEffect,
		useMemo: updateMemo,
		useRef: updateRef,
		useState: updateState,
		// ....
	};
}

复制代码
  • 在renderWithHooks中,会先根据fiber的memoizedState是否为null,来判断是否已经初始化。因为memoizedState在函数式组件中是存放hooks的。是则mount,否则update(判断是否执行过,没有则挂载,有则更新)
  • 在mount(挂载)时,函数式组件执行,ReactCurrentDispatcher.current为HooksDispatcherOnMount,被调用,会初始化hooks链表、initialState、dispatch函数,并返回。这里就完成了useState的初始化,后续函数式组件继续执行,完成渲染返回。(首次渲染过程)
  • 在update(更新)时,函数式组件执行,ReactCurrentDispatcher.current为HooksDispatcherOnUpdate,被调用,updateWorkInProgressHook用于获取当前work的Hook。然后根据numberOfReRenders 是否大于0来判断是否处理re-render状态:是的话,执行renderPhaseUpdates,获取第一个update,然后循环执行,获取新的state,直到下一个update为null;否的话,获取update链表的第一个update,进行循环,判断update的优先级是否需要更新,对于优先级高的进行更新。(更新过程)
  • 结果返回当前状态和修改状态的方法

以挂载为例,生成一个hook对象(mountState),并对hook对象进行初始化(mountWorkInProgressHook),具体如下:

function mountState < S > (initialState: (() = >S) | S, ) : [S, Dispatch < BasicStateAction < S >> ] {
	// 创建一个新的hook对象,并返回当前workInProgressHook
	const hook = mountWorkInProgressHook();
	if (typeof initialState === 'function') {
		initialState = initialState();
	}
	hook.memoizedState = hook.baseState = initialState; // 第二步:获取初始值并初始化hook对象
	const queue = hook.queue = { // 新建一个队列  
		// 保存 update 对象
		pending: null,
		// 保存dispatchAction.bind()的值
		dispatch: null,
		// 一次新的dispatch触发前最新的reducer
		// useState 保存固定函数: 可以理解为一个react 内置的reducer
		// (state, action) => { return typeof action === 'function' ? action(state) : action }
		lastRenderedReducer: reducer
		// 一次新的dispatch触发前最新的state
		lastRenderedState: (initialState: any),
	}
	// 绑定当前 fiber 和 queue.
	const dispatch: Dispatch < BasicStateAction < S > ,
	>=(queue.dispatch = (dispatchAction.bind(null, currentlyRenderingFiber, queue, ) : any));
	// 返回当前状态和修改状态的方法
	return [hook.memoizedState, dispatch];
}

复制代码
function mountWorkInProgressHook() {

	// 初始化的hook对象
	var hook = {
		memoizedState: null,
		// 存储更新后的state值
		baseState: null,
		// 存储更新前的state
		baseQueue, // 更新函数
		queue: null,
		// 存储多次的更新行为
		next: null // 指向下一次useState的hook对象
	};

	// workInProgressHook是一个全局变量,表示当前正在处理的hook
	// 如果workInProgressHook链表为null就将新建的hook对象赋值给它,如果不为null,那么就加在链表尾部。
	if (workInProgressHook === null) {
		currentlyRenderingFiber.memoizedState = workInProgressHook = hook;
	} else {
		workInProgressHook = workInProgressHook.next = hook;
	}

	return workInProgressHook;
}

初始化完成后,setFn又是怎么对stateA值进行更新的呢?实际上就是通过dispatchAction方法进行更新的,如下:

// currentlyRenderingFiber$1是一个全局变量,表示当前正在渲染的FiberNode
var dispatch = queue.dispatch = dispatchAction.bind(null, currentlyRenderingFiber$1, queue);

复制代码

此外还有对hook对象的更新(dispatchAction),如下:

function dispatchAction(fiber, queue, action) {
	// ...
	// 1. 创建update对象
	// 该对象保存的是调度优先级/state/reducer以及用户调用dispatch/setState 时传入的action
	const update: Update < S,
	A > ={
		lane,
		action,
		eagerReducer: null,
		eagerState: null,
		next: (null: any),
	};
	// 2. 将update更新到queue.pending中,最后的update.next 指向第一个update对象,形成一个闭环。
	const pending = queue.pending;
	if (pending === null) {
		// This is the first update. Create a circular list.
		update.next = update;
	} else {
		update.next = pending.next;
		pending.next = update;
	}
	queue.pending = update;
}

复制代码

简单理解:

  • 初次渲染的时候,按照 useState,useEffect 的顺序,把 state,deps 等按顺序塞到 memoizedState 数组中,共享同一个 memoizedState,共享同一个顺序。
  • 更新的时候,按照顺序,从 memoizedState 中把上次记录的值拿出来。
let memoizedState = []; // hooks 存放在这个数组
let cursor = 0; // 当前 memoizedState 下标

function useState(initialValue) {
  memoizedState[cursor] = memoizedState[cursor] || initialValue;
  const currentCursor = cursor;
  function setState(newState) {
    memoizedState[currentCursor] = newState;
    render();
  }
  return [memoizedState[cursor++], setState]; // 返回当前 state,并把 cursor 加 1
}

function useEffect(callback, depArray) {
  const hasNoDeps = !depArray;
  const deps = memoizedState[cursor];
  const hasChangedDeps = deps
    ? !depArray.every((el, i) => el === deps[i])
    : true;
  if (hasNoDeps || hasChangedDeps) {
    callback();
    memoizedState[cursor] = depArray;
  }
  cursor++;
}

复制代码
  • 具体 看下图

1、初始化时:数组为空,下标置0

1.png

2、首次渲染:将遇到的hook的依赖项加入数组,与下标一一对应

2.png

3、事件触发:触发hook的内容被修改,修改后的数据替换掉数组中原先的数据

3.png

4、重渲染:ReRender 的时候,重新去执行函数组件,但是对之前已经执行过的函数组件并不会做任何操作

4.png

下面看一个实例:

const DemoState = memo(() => {
  const [n1, setN1] = useState(1)
  const [n2, setN2] = useState(2)
  const [n3, setN3] = useState(3)

  useEffect(() => {
    setN1(10)
    setN1(100)
  }, [])
  const handleClick = () => {
    setN2(20)
    setN3(30)
  }
  console.log('demo-state', n1, n2, n3)
  return <div>
    <div className={`${classPrefix}-title`}>---useState---</div>
    <button onClick={handleClick}>改变n2、n3</button>
  </div>
})
// demo-state 1 2 3 => demo-state 100 2 3 => demo-state 100 20 30

复制代码

渲染时,effect对n1进行了两次赋值,实际上仅刷新一次;点击事件分别对n1和n2进行赋值,实际上也仅刷新一次。

结论:setState返回的函数执行会导致re-render; 框架内部会对多次函数操作进行合并,保证useState拿到最新的状态,避免重复渲染。

如果初始state需要通过复杂计算获得,可以传入一个函数,在函数中计算并返回初始state,此函数只在初始渲染时被调用,具体如下:

const [count, setCount] = useState(() => {
  const initialCount = someExpensiveComputation(props)
  return initialState
})
复制代码

那么,state在class和function中有什么区别吗?下面两段代码中,1s内点击事件各触发5次会有什么表现吗?

class HooksDemoRule extends React.PureComponent {
  state = {
    count: 0
  }
  increment = () => {
    console.log('---setState---')
    setTimeout(() => {
      this.setState({
        count: this.state.count + 1
      })
    }, 3000)
  }
  render() {
    return <div>
      <div className={`${classPrefix}-title`}>---useState && setState---</div>
      <div className={`${classPrefix}-text`}>setState 当前值:{this.state.count}</div>
      <button onClick={this.increment}>+1</button>
      <IKWebviewRouterLink
        ikTo='home'
        className={`${classPrefix}-to-home`}
      ><p>返回</p></IKWebviewRouterLink>
    </div>
  }
}
复制代码
const SecondDemo = memo(() => {
  const [count, setCount] = useState(0)
  const increment = () => {
    console.log('---useState---')
    setTimeout(() => {
      setCount(count + 1)
    }, 3000)
  }
  return <div>
    <div className={`${classPrefix}-title`}>---useState && setState---</div>
    <div className={`${classPrefix}-text`}>useState 当前值:{count}</div>
    <button onClick={increment}>+1</button>
    <IKWebviewRouterLink
      ikTo='rule'
      className={`${classPrefix}-to-home`}
    ><p>返回</p></IKWebviewRouterLink>
  </div>
})
复制代码

最终结果:在类组件中,页面上的数字依次从0增加到5;在函数组件中,页面上的数字只会从0增加到1。

原因在于,在类组件中,通过this.state引用count,每一次setTimeout的时候都能通过引用拿到上一次的最新count,所以最后加到5。但是在函数组件中,每一次更新都是重新执行当前函数,1s内setTimeout里读取的count实际上都是初始值0,所以最后只加到1。如果想让函数组件也加到5要怎么实现呢,下文useRef会讲到。

简单来说,类组件的state依赖上一次state,函数组件的state是重新执行当前函数。

2.2 useEffect

useEffect的实现很简单,也是只有两行:

export function useEffect (create: () = >(() = >void) | void, deps: Array < mixed > |void | null, ) : void {
  const dispatcher = resolveDispatcher();
  return dispatcher.useEffect(create, deps);
}
复制代码

useEffect产生的hook会放在fiber.memoizedState上,调用后生成一个effect对象,存储到对应hook的memoizedState中,与其他effect连接成环形链表。 单个的effect对象包含以下几个属性: create:传入useEffect函数的第一个参数,即回调函数; destory:回调函数中的return函数,在改effect销毁的时候执行,默认发生在第一次渲染后,也可以让它在依赖项数组中的值改变时执行,通过return清除副作用函数(如监听、订阅、计时器等); deps:依赖项,传入的第二个参数,用来控制该Effect包裹的函数执不执行。如果依赖项为空数组[],则该Effect在每次组件挂载时执行,且仅执行一次,相当于class组件中的componentDidMount和componentDidupdate生命周期的融合;如果没有第二个参数,则effect会不停地调用。 next:指向下一个effect; tag:effect的类型,区分useEffect和useLayoputEffect。 hook会挂载到fiber.memoizedState上。hook按出现顺序进行存储,memoizedState存储了useEffect的effect对象(effect1),next指向useLayoutEffect的effect对象(effect2),effect2的next又会指向effect1,最终形成闭环。结构如下:

1.png

const DemoEffect = memo(() => {
  useEffect(() => {
    console.log('useEffect1');
    const timeId = setTimeout(() => {
      console.log('useEffect1-setTimeout-2000');
    }, 2000);
    return () => {
      clearTimeout(timeId);
    };
  }, []);
  useEffect(() => {
    console.log('useEffect2');
    const timeId = setInterval(() => {
      console.log('useEffect2-setInterval-1000');
    }, 1000);
    return () => {
      clearInterval(timeId);
    };
  }, []);
  return (
    <div>
      <div className={`${classPrefix}-title`}>---useEffect---</div>
      {(() => {
        console.log('render');
        return null;
      })()}
    </div>
  );
})
// render => useEffect1 => useEffect2 => useEffect2-setInterval-1000 => useEffect1-setTimeout-2000 => index.js:67 useEffect2-setInterval-1000 * n

复制代码

结论:effect在页面完成渲染后按照先后顺序执行,并且内部执行时异步的

useEffect和useLayoutEffect: useLayoutEffect也是一个hook方法,跟useEffect类似,区别在于渲染时机不同,useEffect发生在浏览器渲染结束后执行,useLayoutEffect则是发生在dom更新完成后。

PS:useEffect和useLayoutEffect都是effect钩子 下面是一个方块移动的例子,在effect中添加右移的方法,理解两者的区别:两者都发生在render之后,且useLayoutEffect发生在useEffect之前

const moveTo = (dom, delay, options) => {
  dom.style.transform = `translate(${options.x}px)`
  dom.style.transition = `left ${delay}ms`
}
const Animate = memo(() => {
  const squRef = useRef()
  const squRef1 = useRef()
  const squRef2 = useRef()

  useLayoutEffect(() => { // 方块直接出现在右侧,不会闪一下
    console.log('useLayoutEffect-1')
    moveTo(squRef1.current, 500, { x: 600 })
  }, [])
  useEffect(() => { // 会有方块移动的过程,闪一下
    console.log('useEffect')
    moveTo(squRef.current, 500, { x: 600 })
  }, [])
  useLayoutEffect(() => {
    console.log('useLayoutEffect-2')
    moveTo(squRef2.current, 500, { x: 600 })
  }, [])
  console.log('render')
  return (
    <>
      <div className={`${classPrefix}-title`}>---useEffect && useLayoutEffect---</div>
      <div className={`${classPrefix}-square`} ref={squRef}></div>
      <div className={`${classPrefix}-square1`} ref={squRef1}></div>
      <div className={`${classPrefix}-square1`} ref={squRef2}></div>
    </>
  )
})
// render -> useLayoutEffect-1 -> useLayoutEffect-2 -> useEffect
复制代码

useLayoutEffect和useEffect很像,唯一的不同点就是useEffect是异步执行,而useLayoutEffect是同步执行的。

当函数组件刷新(渲染)时,

包含useEffect的组件整个运行过程如下: 1、触发组件重新渲染(通过改变组件state或者组件的父组件重新渲染,导致子节点渲染) 2、组件函数执行 3、组件渲染后呈现到屏幕上 4、useEffect hook执行

包含useLayoutEffect的组件整个运行过程如下: 1、触发组件重新渲染(通过改变组件state或者组件的父组件重新渲染,导致子组件渲染) 2、组件函数执行 3、useLayoutEffect hook执行, React等待useLayoutEffect的函数执行完毕 4、组件渲染后呈现到屏幕上

useEffect异步执行的优点是,react渲染组件不必等待useEffect函数执行完毕,造成阻塞。

百分之99的情况,使用useEffect就可以了,唯一需要用到useLayoutEffect的情况就是,在使用useEffect的情况下,我们的屏幕会出现闪烁的情况(组件在很短的时间内渲染了两次)。

2.3 useReducer

参数:第一个是reducer纯函数,第二个是初始state,第三个是修改初始state,用于重置 返回值是一个数组,数组第一个元素是state的当前值,第二个元素是发送action的dispatch函数

管理包含多个子值的state对象时,应该怎么处理呢?以获取某一接口为例,具体操作如下:

const fetchReducer = (state, action) => {
  switch (action.type) {
    case 'FETCH_INIT': // 接口初始化
      return {
        ...state,
        status: '初始化',
        loading: true,
        error: false
      };
    case 'FETCH_SUCCESS': // 请求成功
      return {
        ...state,
        status: '成功',
        loading: false,
        error: false,
        data: action.data
      };
    case 'FETCH_FAIL': // 请求失败
      return {
        ...state,
        status: '失败',
        loading: false,
        error: true
      };
    default:
      return null
  }
};

const DemoReducer = memo(() => {
  const [state, dispatch] = useReducer(fetchReducer, {
    loading: false,
    error: false,
    status: '',
    data: {}
  });

  const getData = async () => {
    const { data } = await Apis.GET_USER_INFO().catch(() => {
      dispatch({ type: 'FETCH_FAIL', data: null })
      return false
    })
    if (!data) return
    dispatch({ type: 'FETCH_SUCCESS', data })
  }

  useEffect(() => {
    dispatch({ type: 'FETCH_INIT' })
    getData()
  }, [])
  console.log('state---', state)

  return <div>
    <div className={`${classPrefix}-title`}>---useReducer---</div>
    <div className={`${classPrefix}-text`}>请求状态: {state.status}</div>
  </div>
})
复制代码

结论:useReducer可以处理多个用useState实现的逻辑(加载状态、错误信息、请求数据)

思考题:useState的出现,让我们可以使用多个state变量来保存state,如

const [width, setWidth] = useState(100)
const [height, setHeight] = useState(100)
const [left, setPageX] = useState(0)
const [top, setPageY] = useState(0)
复制代码

也可以像class组件的this.state一样,将所有state放在一个obj中,如

const [state, setState] = useState({ width: 100, height: 100, left: 0, top: 0 });
复制代码

也可以使用useReducer处理,如

const stateReducer = (state, action) => {

  switch  (action.type) {
    case 'WIDTH':
      return {
        ...state,

        width: action.width
      };
   case 'HEIGHT':
    return {
      ...state,
      height: action.height
    };

   ......

}

const [state, dispatch] = useReducer(stateReducer, { width: 100, height: 100, left: 0, top: 0 })

复制代码

这三种方法哪种好呢?

2.4 useMemo

参数是创建函数和依赖项数组。

返回值是一个带有memoized的值,发生在render之前, 并且这个值仅在依赖项改变时才重新计算。

const DemoMemo = memo(() => {
  const [num1, setNum1] = useState(1)
  const [num2, setNum2] = useState(2)
  const expensive = useMemo(() => {
    console.log('运算')
    let sum = 0
    for (let i = 0; i < num1 * 100; i++) {
      sum += i
    }
    return sum
  }, [num1])
  const handleClick1 = () => {
    console.log('num1++')
    setNum1(num1 + 1)
  }
  const handleClick2 = () => {
    console.log('num2++')
    setNum2(num2 + 1)
  }
  return <div>
    <div className={`${classPrefix}-title`}>---useMemo---</div>
    <div className={`${classPrefix}-text`}>当前num1:{num1}</div>
    <div className={`${classPrefix}-text`}>当前num2:{num2}</div>
    <div className={`${classPrefix}-text`}>当前expensive(仅依赖num1):{expensive}</div>
    <div>
      {(() => {
        console.log('render');
        return null;
      })()}
      <button onClick={handleClick1}>num1++</button>
      <button onClick={handleClick2}>num2++</button>
    </div>
  </div>
})
// 运算 => render
// 点击num1++:  num1++ => 运算 => render
// 点击num2++:  num1++ => render
复制代码

结论:useMemo发生在render前,返回一个缓存的数据,且仅在依赖项改变后变化。

使用useMemo可以避免多余的计算开销。

2.5 useCallback

参数是内联回调函数和依赖项数组,

返回值是回调函数的memoized版,该回调函数仅在某个依赖项改变时才会更新。

const set = new Set();
const DemoCallback = memo(() => {
  const [num1, setNum1] = useState(1)
  const [num2, setNum2] = useState(2)

  const callback = useCallback(() => {
    // 这里做复杂运算
    return num1;
  }, [num1])
  set.add(callback)
  const handleClick1 = () => {
    setNum1(num1 + 1)
  }
  const handleClick2 = () => {
    setNum2(num2 + 1)
  }
  console.log('demo-callback', set.size)
  return <div>
    <div className={`${classPrefix}-title`}>---useCallback---</div>
    <div className={`${classPrefix}-text`}>当前num1:{num1}</div>
    <Child callback={callback}/>
    <div>
      <button onClick={handleClick1}>num1++</button>
      <button onClick={handleClick2}>num2++</button>
    </div>
  </div>
})

const Child = memo(({ callback }) => {
  console.log('---child render')
  return <div>
    <div className={`${classPrefix}-text`}>child刷新(仅依赖num1):{set.size}</div>
  </div>
})
// demo-callback 1 => ---child render
// 点击num1++:  demo-callback 2 => ---child render
// 点击num2++:  demo-callback 2
复制代码

结论:返回一个缓存的函数,添加依赖项数组可以避免函数的无意义计算,降低了子组件的渲染开销。

2.6 useRef

返回值是一个可变的ref对象,并且这个对象的值发生改变时不会引起页面的渲染。

const DemoRef = memo(() => {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    inputEl.current.focus()
    inputEl.current.value = '自定义'
  };
  return (
    <>
      <div className={`${classPrefix}-title`}>---useRef---</div>
      {(() => {
        console.log('render');
        return null;
      })()}
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>click</button>
    </>
  );
})
// render
// 点击click:  
复制代码

结论:useRef可以存储不需要引起页面渲染的数据;修改useRef值的唯一方法是修改.current,且修改后不会引起重渲染。

2.1中的问题,可以通过以下方法解决

const SecondDemoNew = memo(() => {
  const [ count, setCount ] = useState(0)
  const ref = useRef(0)
  const increment = () => {
    console.log('---useState---')
    setTimeout(() => {
      setCount((ref.current += 1))
      // setCount(count => count + 1)
    }, 3000)
  }
  return <div>
    <div className={`${classPrefix}-title`}>---useState && setState---</div>
    <div className={`${classPrefix}-text`}>当前值:{count}</div>
    <button onClick={increment}>+1</button>
  </div>
})
复制代码

另外, useRef也可以用来实现锚点跳转,具体如下

const scrollRef = useRef(null)

const scrollToRef = (ref) = >{ // 跳转
  if (!ref) return

  ref.current.scrollIntoView({
    behavior: 'smooth'
  })
}

......

< div onClick = { () = >scrollToRef(scrollRef) } > 航行进度 < /div>

<span ref={scrollRef}></span >
复制代码

2.7 useContext

跨组件共享数据的钩子函数,接收一个context对象,并返回该对象的当前值。

当前的context值由上层组件中距离当前组件最近的<MyContext.Provider>的value决定,并且父组件的context发生改变是,子组件都会重新渲染。

const MyContext = React.createContext() // 创建context,用于支持调用
const DemoContext = memo(() => {
  const [value, setValue] = useState('initValue')
  return (
    <div>
      <div className={`${classPrefix}-title`}>---useContext---</div>
      {(() => {
        console.log('render');
        return null;
      })()}
      <button onClick={() => {
        setValue('newValue')
      }}>
        改变value
      </button>
      <MyContext.Provider value={value}>
        <Child1 />
        <Child2 />
      </MyContext.Provider>
    </div>
  );
})

const Child1 = memo(() => {
  const value = useContext(MyContext)
  console.log('Child1-value', value)
  return <div className={`${classPrefix}-text`}>Child1-value: {value}</div>
})

const Child2 = () => {
  console.log('Child2');
  return <div className={`${classPrefix}-text`}>Child2</div>;
}
// render => Child1-value initValue => Child2
// 点击btn后:  render => Child1-value newValue => Child2
复制代码

结论:useContext会在context值变化时重新渲染,<MyContext.Provider>的value发生变化时,包裹的组件无论是否订阅value值,都会重新渲染,可以使用memo对未使用value的子组件进行优化。

2.8 自定义hook

有时候我们需要重复使用一些状态逻辑,怎么处理可以在不增加组件的前提下实现复用,自定义hook可以达到这一目的。

通过自定义hook,抽取多个组件重复使用的逻辑,将这些重复的逻辑添加到一个叫做useSomething的自定义hook中,调用这一hook达到逻辑复用的目的,在不增加组件的情况下实现了逻辑共享。

自定义的hook是一个函数,名称以“use”开头,函数内部可用调用其他hook。以处理请求过程为例,自定义hook如下:

3 优化

hook主要从以下三个方面对函数式组件进行优化:

useCallback用于缓存函数 useMemo用于缓存计算结果,简单理解useCallback(fn, deps) === useMemo(() => fn, deps) useReducer用于处理多状态的state

4 小结

hooks执行流程:

在react中,组件返回的JSX元素被转换为虚拟DOM,就是下方的vnode,每个vnode上挂载了一个_component属性,这个属性指向组件实例。在组件实例上又挂载了一个_hooks属性,这个_hooks属性里保存了执行一个组件时,里面所有Hook方法的相关信息。

1.png

首先,有一个全局的currentIndex变量,当组件第一次渲染或更新时,它会在每次进入一个函数组件的时候都重置为0,每次遇到一个hook方法就会加1,同时将这个hook方法加到_list(缓存)中。当下次进来或进入下一组件时,currentIndex又被重置为0;在组件更新时,则会从_list中根据currentIndex取出对应项。具体如下添加链接描述:

组件渲染 => currentIndex 重置 0 => 遇到 Hooks 方法,放进 _list数组 => 索引currentIndex++ => 渲染结束 组件更新 => currentIndex 重置 0 => 遇到 Hooks 方法,获取 _list[currentIndex]=> currentIndex++ => 重复上面步骤 => 更新结束

hooks使用规则:(eslint-plugin-react-hooks控制以下两条规则)

  • 只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用(hook2拿到的state其实是上一次hook1执行后的state, 而不是上一次hook2执行后的state。如果把hook1放在一个if语句中,当这个hook没有执行时,这样显然会发生错误)。
  • 只能在 React 的函数组件中调用 Hook(因为只有函数组件的更新才会触发renderWithHooks函数,处理hooks的相关逻辑)。

hooks优化策略: 优化本身也会带来大量的计算,无意义的优化反而会增加额外的开销。所以针对3中优化需谨慎。

blog.csdn.net/qq_30997503… github.com/brickspert/…

文章分类
前端
文章标签