React typescript useContext不触发更改时重新呈现
React TypeScript useContext 不触发更改时重新呈现是指在使用 React 的 useContext 钩子时，当上下文值发生变化时，组件是否会重新渲染的问题。
useContext 是 React 提供的一个钩子函数，用于在函数组件中获取上下文的值。它接收一个上下文对象作为参数，并返回该上下文的当前值。
当上下文的值发生变化时，React 默认会重新渲染使用了该上下文的组件。但是，有时候我们希望在上下文值发生变化时不触发组件的重新渲染，这时可以使用 React.memo 或 useMemo 进行优化。
React.memo 是一个高阶组件，用于对组件进行浅比较，如果组件的 props 没有发生变化，则不会重新渲染该组件。可以将使用了 useContext 的组件包裹在 React.memo 中，以避免不必要的重新渲染。
另一种方法是使用 useMemo 钩子函数，它接收一个函数和依赖项数组作为参数，并返回函数的记忆化版本。可以将 useContext 的返回值作为 useMemo 的依赖项，这样只有当上下文的值发生变化时，才会重新计算并返回新的值。
需要注意的是，使用 React.memo 或 useMemo 进行优化时，需要确保上下文的值是不可变的，否则可能会导致优化失效。
总结起来，当使用 React TypeScript 的 useContext 钩子时，如果不希望在上下文值发生变化时触发组件的重新渲染，可以使用 React.memo 或 useMemo 进行优化。这样可以提高组件的性能和效率。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发（移动推送、移动分析、移动测试等）：https://cloud.tencent.com/product/mobile
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云虚拟专用网络（VPC）：https://cloud.tencent.com/product/vpc
- 腾讯云安全产品（WAF、DDoS 防护等）：https://cloud.tencent.com/product/safety
- 腾讯云音视频处理（VOD、直播、短视频等）：https://cloud.tencent.com/product/mps
相关·内容
如果父级更新响应js中的上下文或状态，如何停止子组件的重新呈现？
我已经在使用React.memo了，但它仍在重新呈现。
这是我的子组件
const Ab = () => {
console.log("---ff-ddd");
const pageContext = useContext(PageContext);
useEffect(() => {
setTimeout(() => {
pageContext.updateGlobalMenu({});
}, 5000);
}, []);
return <
浏览 2提问于2022-05-24得票数 0
回答已采纳
在这个例子中，我使用memo来防止组件重新渲染，但是，即使项目属性没有改变，它也会在每次单击按钮时重新渲染。根据react文档，只有当道具被更改时，带有备忘录的组件才不会重新呈现。
import React, { memo, useContext } from "react";
import { BasketContext } from "./Context";
const ItemCard = React.memo(({ item }) => {
const [basket, setBasket] = useContext(BasketContex
浏览 6提问于2021-06-01得票数 0
1回答
我正在使用React中的上下文提供程序来跨多个组件共享数据。但是，由于值从我的一个子组件更改，它会重新呈现我的所有其他组件，这在一定程度上会导致性能问题。所以我想防止我的子组件被重新渲染。我尝试使用React.memo()，但每当我设置上下文提供程序的状态时，它仍然在呈现。 const Authenticator = React.memo(() => {
const [myChat, setMyChat] = useContext(ChatContext);
console.log("rerender"); // gets called everytim
浏览 15提问于2021-01-05得票数 4
我想知道如何避免对不接收props但使用useContext的子props进行不必要的更新。
我将React.memo添加到Child2 component中，以便进行一些演示测试。
如您所见，当我更改使用input将数据传递给child1的context值时，Child2不会重新呈现，因为React.memo会阻止这种行为。
如何在Child1中防止不必要的呈现？我知道React.memo不会像它需要props那样工作，使用context不会发生这种情况，因为没有props被传递给这个component
App.js
import React, {useState} from 're
浏览 3提问于2020-05-29得票数 0
回答已采纳
我正在将项目从类组件切换到功能组件，并在使用上下文时遇到问题。
我有一个父布局，其中包含一个打开和关闭的导航菜单(通过父进程中的状态变化)。此布局组件还包含我通过上下文传递的用户属性。
在切换到功能组件和钩子之前，一切都进行得很好。
我现在看到的问题是，当从布局组件(父组件)打开nav菜单时，它会导致子组件重新呈现。如果上下文发生变化，我会期待这种行为，但事实并非如此。只有在将useContext添加到子节点时才会发生这种情况。
我正在导出带有备注的子程序，并试图用备注包装一个容器，但这没有帮助(实际上，它似乎会导致更多的呈现)。
下面是代码的大纲：
AppContext.tsx
export
浏览 0提问于2021-08-05得票数 0
回答已采纳
4回答
我正在考虑使用react、useContext和context api来代替redux。话虽如此，我还是希望我的状态在结构上有点复杂。让我们看看这个结构是
state = {
key1: true,
key2: {
key3: [],
key4: ''
}
}
我明白的是redux和context api都允许我创建复杂的结构。在使用react的情况下，我可以很好地使用Provider，Consumer/useContext将我的存储状态值传递给我的所有组件。
Redux给我的更多信息是，如果有任何特定的键(比如key4
浏览 0提问于2021-02-03得票数 3
回答已采纳
React.memo和useMemo钩子都允许通过减少重新计算和重命名来优化性能。但是，它们确实起作用，因为React.memo用于包装一个函数组件，useMemo钩子几乎可以用于任何函数，甚至是纯计算。更重要的是，useMemo通常从父组件调用到子组件，而React.memo通常在子组件本身的声明中被调用。
虽然两者都有不同的优势，但React.memo的一个优点是，不必从每个父级调用到子级关系。然而，随着钩子的释放，显然，React开发希望转向使用钩子来处理状态、副作用事件和其他影响的功能组件。虽然我不认为会有勇气或无视他们的用户群在未来2年内随时删除React.memo，但这让我怀疑他们
浏览 1提问于2020-04-18得票数 3
背景
在发布React v16.8之后，现在我们可以使用钩子来响应本机了。
我正在做一些简单的测试来查看呈现时间和
钩式功能组件和类组件。这是我的样本：
@Components/Button.js
import React, { memo } from 'react';
import { TouchableOpacity, Text } from 'react-native';
const Button = memo(({ title, onPress }) => {
console.log("Button render"); //
浏览 2提问于2020-05-26得票数 4
回答已采纳
5回答
我有以下简单的组件：
const Dashboard = () => {
const [{ data, loading, hasError, errors }] = useApiCall(true)
if (hasError) {
return null
}
return (
<Fragment>
<ActivityFeedTitle>
<ActivityFeed data={data} isLoading={loading} />
</Fragment>
)
}
e
浏览 1提问于2019-10-22得票数 4
4回答
我使用带有钩子的React上下文作为我的React应用程序的状态管理器。每当存储中的值发生变化时，所有组件都会重新呈现。
有什么方法可以防止反作用组件重新渲染吗？
存储配置：
import React, { useReducer } from "react";
import rootReducer from "./reducers/rootReducer";
export const ApiContext = React.createContext();
export const Provider = ({ children }) => {
con
浏览 0提问于2019-07-14得票数 20
回答已采纳
5回答
我的bestSellerDummy数据不会改变，所以我希望防止相同的产品子程序被重新命名，如果父重命名器。我尝试过在父母中使用useMemo，在子中使用React.memo，但是没有成功，它仍然显示日志“呈现产品组件”。每次父母改换。我在这里错过了什么？请指点。
注意:每次我在Product中调用addToCart函数(of CartContext)时，都会对父函数进行重命名。
我正在使用CartContext，可能与此相关，我不确定。下面是沙箱：
Home.tsx
const [bestSellerDummy] = useState(
[...new Array(5)].map((ite
浏览 7提问于2020-11-15得票数 4
回答已采纳
我正在对TypeScript使用react。我在react中映射了一个JSON文件。在浏览器中渲染所有数据只需要一秒钟。我使用的是函数组件。下面是代码。请帮我在浏览器中优化渲染时间。
import users from "../data/users.json";
const Users:React.FC=() => {
const displayUsers=users.map((item){
return(
<p> {item.username} </p>
<p> {item.location} </
浏览 0提问于2021-03-14得票数 0
我需要演示如何使用React。我的工作代码如下所示，可以实现我想要的结果：
const SpeakerCardDetail = React.memo(
({id,...
我找到了一个，它表明我可以更多地使用这样的语法，但我无法准确地理解它。
据我所知：
const SpeakerDetail = React.useMemo(() => {
({ id,
但显然不是。我确实明白React.memo解决了这个问题，但我确实需要向useMemo展示实际情况，并且我希望有一种可以使用的替代语法。
浏览 2提问于2019-04-02得票数 47
回答已采纳
1回答
我试图将搜索筛选函数传递到我的搜索栏组件中。但是我一直收到错误TypeError:无法读取未定义的搜索属性' search‘，搜索函数不被识别，我的上下文文件在这里，
import React, { useContext, useEffect, useRef } from 'react';
import ProductContext from '../../src/context';
const ProductFilter = () => {
const productConsumer = useContext(ProductContext
浏览 0提问于2019-08-10得票数 0
回答已采纳
<SuperComponent>
<ChildComponent />
<ChildComponent />
</SuperComponent> 假设我们有一个由reducer控制的上下文，它是一个包含所有ChildComponent所需数据的对象。假设我们有10-15个孩子，而不是2个孩子。 在SuperComponent中调用一次useContext，然后将所需的数据作为道具传递给子对象，还是在每个ChildComponent中分别调用useContext更好？
浏览 12提问于2021-05-02得票数 1
我有一个简单的示例，它使用useMemo来回溯一个函数，并在单击任何子组件时重新呈现所有子组件。我尝试过几种替代方案(注释掉)，但没有一种可行。请参阅stackblitz及下面的代码。
Index.js
import React from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import { GlobalProvider } from "./GlobalState";
function App() {
retu
浏览 0提问于2020-08-01得票数 3
回答已采纳
这是我第一个使用钩子而不是redux的react的应用程序，并且希望得到应用程序结构的帮助。(我不使用react redux或redux-saga库。)
上下文
const AppContext = createContext({
client,
user,
});
动作示例之一
export const userActions = (state, dispatch) => {
function getUsers() {
dispatch({ type: types.GET_USERS });
axios
.get("
浏览 1提问于2019-06-24得票数 1
我在处理上下文应用程序接口，我在树中向下传递了几个值，让我们称它们为val和val2。我有三个不同的组件，让我们先调用它们，第二个和第三个。第二个和第三个将是React中的上下文Api的消费者。第二个将获得第一个val，第三个将获得第二个val2。现在，如果我有一个函数来更改第二个组件使用的第一个val，我将获得第三个组件的呈现，该组件使用val2值。使用redux，我不会得到这种不想要的渲染。我想知道是否有一种方法可以绕过react中的这种渲染，或者redux是否仍然是获得这种类型的性能的方法。下面是我正在讨论的内容的一个小标记： 状态和全局上下文保存在包装第一个组件的包装器中，该包装器包
浏览 15提问于2019-02-24得票数 1
2回答
如下所示，我有一个基本的react上下文设置。 我的愿望是，使用上下文的子组件应该只在上下文数据更改时重新呈现，但我发现情况并非如此。 如果我更新与上下文没有关联的调用setData2，则会在Container上触发状态更新，随后会触发重新计算，并导致使用子进程进行更新。 有问题的子组件已经在使用React.memo，所以只有当它的useContext钩子引导它更新时，它才会更新。但是，即使data1保持不变，当Container更新时，上下文也会更新。 有没有可能解决这个问题？ const Container = () => {
const [data1, setData1] =
浏览 24提问于2020-09-15得票数 0
我有一个简单的例子，在这个示例中，我将一个clickFunction作为一个值来响应上下文，然后在子组件中访问该值。尽管我使用的是React.memo和React.useCallback，但该子组件重新呈现事件。我在stackblitz中有一个示例，如果不使用上下文，就不会出现重呈现问题：
(这没有问题)
但是，当我添加上下文并将函数作为上下文值的一部分传递时，所有子组件都会重新呈现。在这里显示问题的示例：
下面是问题代码：
Hello.js
import React, { useCallback, useState, createContext } from "react"
浏览 4提问于2020-08-01得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
