当前位置: 首页 > 软件库 > Web应用开发 > >

React-use-context-selector

基于 Context API 的封装
授权协议 MIT
开发语言 TypeScript
所属分类 Web应用开发
软件类型 开源软件
地区 不详
投 递 者 路金鑫
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

React-use-context-selector 是一个基于 Context API 的封装,应用于 useland 的 React useContextSelector hook,可优化 Context 导致的 rerender 问题。虽然存在部分限制,但可以通过这个设计实现更好了解 Context API。

用法

import React, { useState } from 'react';
import ReactDOM from 'react-dom';

import { createContext, useContextSelector } from 'use-context-selector';

const context = createContext(null);

const Counter1 = () => {
  const count1 = useContextSelector(context, v => v[0].count1);
  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 Counter2 = () => {
  const count2 = useContextSelector(context, v => v[0].count2);
  const setState = useContextSelector(context, v => v[1]);
  const increment = () => setState(s => ({
    ...s,
    count2: s.count2 + 1,
  }));
  return (
    <div>
      <span>Count2: {count2}</span>
      <button type="button" onClick={increment}>+1</button>
      {Math.random()}
    </div>
  );
};

const StateProvider = ({ children }) => {
  const [state, setState] = useState({ count1: 0, count2: 0 });
  return (
    <context.Provider value={[state, setState]}>
      {children}
    </context.Provider>
  );
};

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

ReactDOM.render(<App />, document.getElementById('app'));
  • Redux 什么是Redux? Redux是用action事件来管理和更新应用状态的模式和工具库,它对整个应用中的状态进行集中管理,称为仓库Store。 为什么用Redux? 有许多state是很多组件都需要使用的,而组件之间的通信很麻烦,而且会造成很多组件传递自己并不需要的数据。于是需要一个状态管理仓库来帮助管理全局的状态。这样每个组件只从仓库中获取自己需要的那部分数据即可,当然组件仍然可以有自

  • React-router5 什么是前端路由? 把不同路由对应不同的内容或页面的任务交给前端来做。 前端路由原理及实现方式 本质是监听URL变化,然后匹配路由规则,显示相应的页面,并且无需刷新页面。 目前前端使用的路由有2种实现方式:Hash模式,History模式 Hash模式 像www.testpage.com/#/ 这样的就是一个hash URL,当#后面的哈希值发生变化时,可以通过hashC

  • redux中文官网链接:入门 Redux | Redux 中文官网 Redux 是 JavaScript 应用的状态容器,提供可预测的状态管理 react-redux中文官网链接:入门 React Redux | React Redux 中文文档 React Redux 是 Redux 的官方 React UI 绑定库。它使得你的 React 组件能够从 Redux store 中读取到数据,并且

  • react-redux 安装 npm install --save react-redux Provider标签 react-redux 是官方提供的解决方案,Provider 本身并没有做很多事情,只是把store放在context里罢了。实际上如果你用react-redux,那么连接视图和数据层最好的办法是使用 connect 函数。本质上Provider 就是给 connect 提供stor

  • Hooks API useReducer const [state, dispatch] = useReducer(reducer, initialArg, init); 其中init是个函数处理initialArg参数的 useReducer是useState的替代方案。它接收一个形如(state, action)=>newState的reducer,并返回当前的state以及配套的dispa

  • 背景:在平时中,我们直接去使用Redux,需要每个页面都需要引入store,执行getState()来获取到值,以及需要每次都进行订阅和取消订阅。维护起来不方便。 1.主要作用 react-redux配合redux使用,将redux定义的store数据注入到组件中,可以使组件轻松的拿到全局状态,方便组件间的通信。使react组价与redux数据中心(store)联系起来,调用dispatch函数修

  • react-redux使用及源码分析(下) 上节主要讲解了 react-redux 在类组件和函数组件中的用法,本节主要分析一下如何自己实现一个 react-redux 1、Provider 组件的实现 我们发现 react-redux 的 Provider 其实和 react 中的 Context 用法很像,其实 react-redux 就是基于 Context 实现的。 Provider 组件

  • 为什么需要react-redux? 为什么需要react-redux需要从两方面说起, readux并不是react专有的,其他语言也是有redux,react-redux对redux进行了一层封装 redux在使用的时候,有很多不方便的地方,比如组件必须必须订阅,在订阅中手动更新组件,这导致在使用的时候比较麻烦。react-redux本质就是简化redux的操作 react-redux程序思想

  • 这比较适合看过redux但看了跟没看一样的同学,帮助记忆理清里面的基础知识 一. Redux 1. Store Store是保存数据的地方,可以把它看做一个容器。整个应用只能有一个Store。 Redux提供createStore这个函数生成store import { createStore } from 'redux'; const store = createStore(fn); // s

  • react-redux 作用? 首先理解redux是一个独立的状态管理库,可以用到react 中,也可以用到vue中。react-redux 从名字不难看出,是用来连接react到redux。 怎么使用 react-redux 官网地址 Provider 使组件层级中的 connect() 方法都能够获得 Redux store。 connect 连接 React 组件与 Redux store。

  • ES7 React/Redux/React-Native/JS snippets Version Install Downloads Ratings This extension provides you JavaScript and React/Redux snippets in ES7 with Babel plugin features for VS Code Search command

  • react-redux 核心原理实现 - 附加 useMemo和UseCallBack redux不是react官方出的库,react-redux才是react官方出的库,是在redux的基础上进行封装。react-redux是将组件再次进行细分,分成了容器组件和UI组件 为什么要使用react-redux 这一点在我刚学习react-redux的时候也一直是困扰了我许久,因为我感觉就直接使用re

 相关资料
  • useReactRouter useReactRouter is a React Hook that provides pub-sub behavior for react-router.Unlike the withRouter Higher-Order Component, useReactRouter will re-render your component when the locati

  • react-use-localstorage depends on stable v16.8.1~ Access Local Storage using React hooks. Fork it on CodeSandbox How to use it import React from 'react';import ReactDOM from 'react-dom';import useLoca

  • 本文向大家介绍基于jQuery的ajax方法封装,包括了基于jQuery的ajax方法封装的使用技巧和注意事项,需要的朋友参考一下 ajax (ajax开发)简介 AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。 AJAX = 异步 JavaScript和XML(标准通用标记语言的子集)。

  • 本文向大家介绍基于jQuery拖拽事件的封装,包括了基于jQuery拖拽事件的封装的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了基于jQuery封装的拖拽事件,供大家参考,具体内容如下 HTML代码: 封装的jQuery拖拽事件: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持呐喊教程。

  • 前一部分介绍 @Context 的使用。第5章描述了 JAX-RS 的所有标准的JAX-RS Java类型,可以使用 @Context。 当 JAX-RS 应用程序使用 servlet ,那么 ServletConfig 、ServletContext 、HttpServletRequest 和 HttpServletResponse,是可用 @Context 。

  • 本文向大家介绍基于JDBC封装的BaseDao(实例代码),包括了基于JDBC封装的BaseDao(实例代码)的使用技巧和注意事项,需要的朋友参考一下 最近闲暇时萌发写一写dao的封装的例子,就将以前写的整理一下。 以上这篇基于JDBC封装的BaseDao(实例代码)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持呐喊教程。