脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React Context

React使用Context的一些优化建议

 更新时间：2024年04月10日 08:57:57   作者：奇舞精选  
Context 提供了一个无需为每层组件手动添加 props,就能在组件树间进行数据传递的方法,本文为大家整理了React使用Context的一些优化建议,希望对大家有所帮助

常用 API

React.createContext

const MyContext = React.createContext(defaultValue);

创建一个 Context 对象。当 React 渲染一个订阅了这个 Context 对象的组件，这个组件会从组件树中离自身最近的那个匹配的 Provider 中读取到当前的 context 值。

Context.Provider

<MyContext.Provider value={/* 某个值 */}>

每个 Context 对象都会返回一个 Provider React 组件，它允许消费组件订阅 context 的变化。

Provider 接收一个 value 属性，传递给消费组件。一个 Provider 可以和多个消费组件有对应关系。多个 Provider 也可以嵌套使用，里层的会覆盖外层的数据。

useContext

const store = useContext(MyContext)

接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定。

当 Provider 的 value 值发生变化时，它内部的所有消费组件都会重新渲染

了解了 API 后，我们来看一个简单的例子。

示例

index.js

const MyContext = React.createContext(null);

function reducer(state, action) {
  switch (action.type) {
    case 'addCount': {
      return {
        ...state,
        count: state.count + 1
      }
    }
    case 'addNum': {
      return {
        ...state,
        num: state.num + 1
      }
    }
    default: return state;
  }
}

const MyProvider = ({ children }) => {
  const [store, dispatch] = useReducer(reducer, { count: 0, num: 0 })
  return <MyContext.Provider value={{store, dispatch}}>{children}</MyContext.Provider>
};

export default () => {
  return (
    <MyProvider>
      <ChildCount />
      <ChildNum />
      <Child  />
    </MyProvider>
  );
}

ChildCount.js

export default () => {
    const { state, dispatch } = React.useContext(MyContext);
    console.log('re-render ChildCount', state.count)
    return (
      <>
        <div>count is: {state.count}</div>
        <button onClick={() => dispatch({ type: 'addCount' })}> AddCount </button>
      </>
    )
}

ChildNum.js

export default () => {
    const { state, dispatch } = React.useContext(MyContext);
    console.log('re-render ChildNum', state.num)
    return (
      <>
        <div>num is: {state.num}</div>
        <button onClick={() => dispatch({ type: 'addNum' })}> AddNum </button>
      </>
    )
}

Child.js

export default () => {
  console.log('re-render Child')
  return <div>Child</div>
}

点击 AddCount 按钮，输出：

re-render ChildCount 1re-render ChildNum 0

点击 AddNum 按钮，输出：

re-render ChildCount 1re-render ChildNum 1

我们可以发现，Context.Provider 下的所有消费组件，在 Provider.value 变化后，都会 re-render

改变 count 、num 任意一个值，ChildCount，ChildNum 都会 re-render

针对以上 re-render 情况，有以下方案可以优化

优化

针对子组件做函数记忆

React.memo

我们如下修改所有的 Child 组件

export default React.memo(() => {
    const { state, dispatch } = React.useContext(MyContext);
    console.log('re-render ChildCount', state.count)
    return (
      <>
        <div>count is: {state.count}</div>
        <button onClick={() => dispatch({ type: 'addCount' })}> AddCount </button>
      </>
    )
})

点击 AddCount 后发现，依然打印出

re-render ChildCount 1
re-render ChildNum 0

我们重新认识下 React.memo

React.memo 默认情况下仅仅对传入的 props 做浅比较，如果是内部自身状态更新(useState, useContext等)，依然会重新渲染，在上面的例子中，useContext 返回的 state 一直在变化，导致就算被 memo 包裹的组件依然触发更新了。

useMemo

我们如下修改所有的 Child 组件

export default () => {
    const { state, dispatch } = React.useContext(MyContext);
    return useMemo(() => {
      console.log('re-render ChildCount', state.count)
      return (
          <>
            <div>count is: {state.count}</div>
            <button onClick={() => dispatch({ type: 'addCount' })}> AddCount </button>
          </>
      )
    }, [state.count, dispatch])
}

点击 addCount 后发现，只打印出了

re-render ChildCount 1

点击 addNum 后发现，只打印出了

re-render ChildNum 1

useMemo 可以做更细粒度的缓存，我们可以在依赖数组里来管理组件是否更新

我们可以思考一下，有没有一种办法，不用 useMemo 也可以做到按需渲染。就像 react-redux 中 useSelector 一样实现按需渲染

动手实现 useSelector

我们先想一下，在上面的例子中，触发子组件re-render的原因是什么？

没错就是因为 Provider.value 的值一直在变更，那我们要想个办法让子组件感知不到 value 的变更，同时在 value 的某个值发生变更的时候，能够触发消费 value 的子组件 re-render

我们使用 观察者模式 实现

1、我们使用 useMemo 缓存首次的 value，让子组件感知不到 value 的变化

2、如果 value 不变化，那子组件就不会re-render，此时我们需要在真正 value 变化的时候，re-render 子组件，我们需要一个 hooks（useSelector） 帮助我们实现子组件 re-render

3、子组件在初始化时，useSelector 要帮助其订阅 state 变更的回调函数，并返回最新的 state（函数内部获取前后两次的 state 做对比，不一样则强制更新组件）

4、在 Context.Provider 中创建一个收集子组件订阅state变更回调的集合，在其内部监听 state（value），如果变更则遍历集合，执行所有回调函数

基于以上，我们依次实现了Context.Provider, useSelector, useDispatch

Context.Provider

const MyProvider = ({children}) => {
  const [state, dispatch] = useReducer(reducer, initState);
  
  // ref state
  const stateRef = useRef(null);
  stateRef.current = state;

  // ref 订阅回调数组
  const subscribersRef = useRef([]);

  // state 变化，遍历执行回调
  useEffect(() => {
    subscribersRef.current.forEach(sub => sub());
  }, [state]);

  // 缓存 value， 利用 ref 拿到最新的 state, subscribe 状态
  const value = useMemo(
    () => ({
      dispatch,
      subscribe: cb => {
        subscribersRef.current.push(cb);
        return () => {
          subscribersRef.current = subscribersRef.current.filter(item => item !== cb);
        };
      },
      getState: () => stateRef.current
    }),
    []
  )

  return <MyContext.Provider children={children} value={value} />;
}

useSelector

export const useSelector = selector => {
  // 强制更新
  const [, forceRender] = useReducer(v => v + 1, 0);
  const store = useContext(MyContext);

  // 获取当前使用的 state
  const selectedStateRef = useRef(null)
  selectedStateRef.current = selector(store.getState());

  // 对比更新回调
  const checkForUpdates = useCallback(() => {
    // 获取变更后的 state
    const newState = selector(store.getState());
    // 对比前后两次 state
    if (newState !== selectedStateRef.current) forceRender({});
  }, [store]);
  
  // 订阅 state
  useEffect(() => {
    const subscription = store.subscribe(checkForUpdates);
    return () => subscription();
  }, [store, checkForUpdates]);
  
  // 返回需要的 state
  return selectedStateRef.current;
}

useDispatch

export const useDispatch = () => {
  const store = useContext(MyContext);
  return store.dispatch
}

我们用上面重写的 API，改写下刚开始的例子

index.js

export default () => {
    return (
      <MyProvider>
        <ChildCount />
        <ChildNum />
        <Child />
      </Provider>
    );
}

ChildCount.js

export default () => {
    const dispatch = useDispatch();
    const count = useSelector(state => state.count);
    console.log('re-render ChildCount', count)
    return (
      <>
        <div>count is: {count}</div>
        <button onClick={() => dispatch({ type: 'addCount' });}> AddCount </button>
      </>
    )
};

ChildNum.js

export default () => {
    const dispatch = useDispatch();
    const num = useSelector(state => state.num);
    console.log('re-render ChildNum', num)
    return (
      <>
        <div>num is: {num}</div>
        <button onClick={() => dispatch({ type: 'addNum' });}> AddNum </button>
      </>
    )
}

Child.js

export default () => {
    console.log('re-render Child')
    return <div>Child</div>
}

点击AddCount: 只打印了 re-render ChildCount 1

点击AddNum: 只打印了 re-render ChildNum 1

以上通过对 Context 使用中的一些思考，我们简单的实现了 useSelector，实现了 Context 组件的按需渲染

总结

在使用 Context API 的时候，要避免不必要的re-render，可以使用 useMemo 做细粒度更新，也可以使用 useSelector 实现按需渲染

以上就是React使用Context的一些优化建议的详细内容，更多关于React Context的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:

相关文章

  • 详解React中如何获取真实的dom

    详解React中如何获取真实的dom

    这篇文章主要为大家详细介绍了React中获取真实的dom的相关方法,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-02-02
  • react ant-design Select组件下拉框map不显示的解决

    react ant-design Select组件下拉框map不显示的解决

    这篇文章主要介绍了react ant-design Select组件下拉框map不显示的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • React Hooks使用方法全方位介绍

    React Hooks使用方法全方位介绍

    在react类组件（class）写法中，有setState和生命周期对状态进行管理，但是在函数组件中不存在这些，故引入hooks（版本：>=16.8），使开发者在非class的情况下使用更多react特性
    2023-03-03
  • React的createElement和render手写实现示例

    React的createElement和render手写实现示例

    这篇文章主要为大家介绍了React的createElement和render手写实现示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2022-08-08
  • react源码层深入刨析babel解析jsx实现

    react源码层深入刨析babel解析jsx实现

    同作为MVVM框架，React相比于Vue来讲，上手更需要JavaScript功底深厚一些，本系列将阅读React相关源码，从jsx -> VDom -> RDOM等一些列的过程，将会在本系列中一一讲解
    2022-10-10
  • React+echarts (echarts-for-react) 实现中国地图及省份切换功能

    React+echarts (echarts-for-react) 实现中国地图及省份切换功能

    这篇文章主要介绍了React+echarts (echarts-for-react) 画中国地图及省份切换,有足够的地图数据，可以点击到街道，示例我只出到市级，本文结合实例代码给大家介绍的非常详细需要的朋友可以参考下
    2022-11-11
  • 详解在create-react-app使用less与antd按需加载

    详解在create-react-app使用less与antd按需加载

    这篇文章主要介绍了详解在create-react-app使用less与antd按需加载，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • 详解react-router 4.0 下服务器如何配合BrowserRouter

    详解react-router 4.0 下服务器如何配合BrowserRouter

    这篇文章主要介绍了详解react-router 4.0 下服务器如何配合BrowserRouter，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-12-12
  • 如何使用React构建一个高效的视频上传组件

    如何使用React构建一个高效的视频上传组件

    本文介绍了如何使用React构建一个高效的视频上传组件,包括基础概念、常见问题与解决方案以及易错点,通过实际代码案例,展示了如何实现文件大小和格式验证、上传进度显示等功能,并详细解释了跨域请求和并发上传控制等技术细节
    2025-01-01
  • react-dnd实现任意拖动与互换位置

    react-dnd实现任意拖动与互换位置

    这篇文章主要为大家详细介绍了react-dnd实现任意拖动与互换位置，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-08-08

最新评论