use-context-selector源码解读&思考

React可以通过Context来解决跨组件的属性共享问题,但是Context方案会存在性能问题,Context更新会触发使用该Context的组件渲染. React提出过Context selectors的提案,use-context-selector就通过实现Context selectors 来解决Context的性能问题.

use-context-selector简单使用


    import { createContext, useContextSelector } from 'use-context-selector';
    // 创建Context 这个使用方式跟React提供的createContext是一样的
    const Context = createContext(null);

    const Counter1 = () => {
        // 通过useContextSelector获取想要的属性
        const count1 = useContextSelector(Context, (v) => v[0].count1);
        // 获取设置Context的函数,可以看上去有reducer的感觉
        const setState = useContextSelector(Context, (v) => v[1]);
        // 更新调用
        const increment = () =>
            setState((s) => ({
            ...s,
            count1: s.count1 + 1,
            }));
        return (
            <div>
                <span>Count1: {count1}</span>
                <button type="button" onClick={increment}>
                    +1
                </button>
                {Math.random()}
            </div>
        );
    };
    const StateProvider = ({ children }) => (
        <Context.Provider value={useState({ count1: 0})}>
            {children}
        </Context.Provider>
    );

    const App = () => (
        <StateProvider>
            <Counter1 />
        </StateProvider>
    );

在上面的例子中Context的value是一个useState的返回值,这里就留下一个疑问,use-context-selector是如何实现订阅更新的呢??!!

use-context-selector原理

react的context方案中,子组件通过useContext获取Context的值和触发更新.Context的值变化的时候会触发所有使用该Context组件的更新. use-context-selector中提供Ref的方式来存储Context的值,通过订阅的方式实现更新,这样就实现了渲染的优化

Provider值生成/订阅逻辑

// 通过ref来存储context的值
const contextValue = useRef(undefined);
if (!contextValue.current) {
  const listeners = new Set();
  const update = (fn, options) => {
    versionRef.current += 1;
    const action = {
      n: versionRef.current,
    };
    listeners.forEach((listener) => listener(action));
    fn();
  };
  contextValue.current = {
    [CONTEXT_VALUE]: {
      /* "v"alue     */ v: valueRef,
      /* versio"n"   */ n: versionRef,
      // 订阅列表
      /* "l"isteners */ l: listeners,
      // context更新函数
      /* "u"pdate    */ u: update,
    },
  };
}
// 传给Provider的是useRef创建的contextValue
return createElement(
  ProviderOrig,
  { value: contextValue.current },
  children,
);

useContextSelectord订阅更新实现

    const {
        v: { current: value },
        n: { current: version },
        l: listeners,
    } = contextValue;
    // 通过selector从contextValue中获取想要的属性
    const selected = selector(value);
    // 生成useReducer  每个组件都对应自己的useReducer 
    // 只有selected变化的时候 当前组件才会更新
    const [state, dispatch] = useReducer(
        (prev, action) => {
            if (!action) {
                return [value, selected];
            }
            if ('p' in action) {
                throw action.p;
            }
            if (action.n === version) {
                if (Object.is(prev[1], selected)) {
                    return prev;
                }
                return [value, selected];
            }
            try {
                if ('v' in action) {
                    if (Object.is(prev[0], action.v)) {
                        return prev;
                    }
                    const nextSelected = selector(action.v);
                    if (Object.is(prev[1], nextSelected)) {
                        return prev;
                    }
                    return [action.v, nextSelected];
                }
            } catch {
            }
            return [...prev];
        },
        [value, selected]
    );

    if (!Object.is(state[1], selected)) {
        dispatch();
    }
    useIsomorphicLayoutEffect(() => {
        // 添加订阅
        listeners.add(dispatch);
            return () => {
                listeners.delete(dispatch);
            };
    }, [listeners]);
    // 返回useReducer中的值 这个值会关联更新
    return state[1];

一点思考

use-context-selector会在一些场景下用于Context的渲染优化,在看它的源码实现上也比较巧妙做到了不需要对原来的Context使用方式做较大改变就能实现代码的升级.这点在在进行代码重构或者架构设计的时候可以借鉴.

在代码重构的时候去hack中间层,减少对代码大范围的改动
在架构设计上,分层且封装中间层逻辑,降低代码对特定库或者使用方式的依赖.