首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

有没有人能帮我理解为什么当会话变量用React改变时,我的参数不会触发?

当会话变量用React改变时,参数不会触发的原因可能是因为React的组件更新机制。在React中,组件的更新是基于状态(state)的变化来触发的,而不是基于会话变量的变化。

会话变量是指在用户会话期间存储和访问的数据,通常保存在浏览器的cookie或者服务器的session中。当会话变量发生改变时,React组件并不会自动重新渲染,因为React无法感知到会话变量的变化。

要解决这个问题,你可以使用React的生命周期方法或者钩子函数来监听会话变量的变化,并在变化时手动触发组件的更新。具体的做法可以是:

  1. 在组件的componentDidMount方法中,监听会话变量的变化。
  2. 当会话变量发生变化时,调用组件的setState方法来更新组件的状态(state)。
  3. 组件的状态更新会触发组件的重新渲染,从而更新参数。

以下是一个示例代码:

代码语言:javascript
复制
import React, { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    // 监听会话变量的变化
    window.addEventListener('storage', this.handleSessionVariableChange);
  }

  componentWillUnmount() {
    // 组件卸载时移除监听
    window.removeEventListener('storage', this.handleSessionVariableChange);
  }

  handleSessionVariableChange = (event) => {
    // 会话变量发生变化时更新组件状态
    if (event.key === 'sessionVariable') {
      this.setState({ sessionVariable: event.newValue });
    }
  }

  render() {
    // 渲染组件
    return (
      <div>
        {/* 使用更新后的参数 */}
        {this.state.sessionVariable}
      </div>
    );
  }
}

在上述示例中,我们通过监听storage事件来检测会话变量的变化,然后在handleSessionVariableChange方法中更新组件的状态(state),最后在组件的render方法中使用更新后的参数。

需要注意的是,这只是一种解决方案,具体的实现方式可能因项目的需求和架构而有所不同。另外,如果你使用的是React的函数式组件,可以使用useStateuseEffect等钩子函数来实现类似的效果。

关于React的相关知识和概念,你可以参考腾讯云的React产品文档和教程:

希望以上信息能够帮助你理解为什么会话变量用React改变时参数不会触发。如果还有其他问题,请随时提问。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

深入浅出解析React Router 源码

最近组里同学做了 React Router 源码相关分享,感觉这是个不错选题, React Router 源码简练好读,是个切入前端路由原理好角度。...在分享学习过程中,自己对前端路由也产生了一些思考和见解,所以写就本文,和大家分享对前端路由理解。...,将触发popstate事件 // 需要注意是,pushState 和 replaceState 对 url 修改都不会触发onpopstate,它只会在浏览器某些行为下触发, 比如点击后退、前进按钮...本小节我们来看 history 库用法,以及了解为什么 React Router 要选择 history 来管理会话历史。 在看具体用法之前,我们先思考一下我们"会话历史管理"需求。...,其实 只做了两件事,一是给子组件包了一层context,让路由信息( history 和 location 对象)传递给其下所有子孙组件;二是绑定了路由监听事件,使每次路由改变触发

3K10

2020最新前端面试题_2020年前端面试题

js两种变量, 局部变量和全局变量,局部变量是在他当前函数中产生作用,该函数结束之后, 该变量内存会被释放,全局变量的话会一直存在,直到浏览器关闭为止。...3.js垃圾回收方式 两种方式: 标记清除、引用计数 标记清除:大部分浏览器使用这种垃圾回收,变量进入执行环境(声明变量时候, 垃圾回收器将该变量进行了标记,变量离开环境时候,将其再度标记...它机制就是跟踪某一个值得引用次数,声明一个变量并且将一个引用类型 赋值给变量得时候引用次数加1,这个变量指向其他一个引用次数减1, 为0出发回收机制进行回收。...opacity=0,该元素隐藏起来了,但不会改变页面布局, 并且,如果该元素已经绑定一些事件,如click事件, 那么点击该区域,也触发点击事件 visibility=hidden,该元素隐藏起来了..., 但不会改变页面布局,但是不会触发该元素已经绑定事件 display=none,把元素隐藏起来,并且会改变页面布局, 可以理解成在页面中把该元素删除掉一样 css 预处理器 less sass <

6.7K10
  • Redux助力美团点评前端进阶之路

    UI捕获用户输入,然后UI按照数据源接口对数据源进行变更操作。数据源根据变更后最新数据按照UI理解格式进行渲染并传输到UI,最后UI用人们理解格式展现数据。 ?...state和props任何变化都会触发组件重新渲染。 裸React 每个组件都有自己本地state,而React间组件通信非常繁琐。...因此我们可以把React组件树抽象为一个函数。 ? 这是一个纯函数,意味着输入一个确定参数Props,它就会输出一个确定view。只要输入Props不变,那么输出view就一定不会改变。 ?...父模块对子模块特点action进行监听,监听被触发可以就可以做一些想做事件。...只有父子module通信,禁止隔代通信。 ? 每个action都有自己唯一ID值,以及action被触发源信息。 ?

    1.5K40

    96.精读《useEffect 完全指南》

    参数 [] 代表什么? useEffect 依赖可以是函数吗?是哪些函数? 为何有时候取数会触发死循环? 为什么有时候在 useEffect 中拿到 state 或 props 是旧?...}, [name]); // Our deps 直到 name 改变 Rerender,useEffect 才会再次执行。...,后果就是,依赖变量改变,useEffect 也不会再次执行: useEffect(() => { document.title = "Hello, " + name; }, []); //...但同时也配合一些 GIF 动图生动解释了 Render 执行原理,如果你想用好 Function Component 或者 Hooks,这篇文章几乎是必读,因为没有人猜到什么是 Capture Value...useEffect 不会在服务端渲染执行。 由于在 DOM 执行完毕后才执行,所以保证拿到状态生效后 DOM 属性。 4.

    80330

    React Hooks 万字总结

    (initialState) useState 一个参数,该参数可以为任意数据类型,一般用作默认值 useState 返回值为一个数组,数组第一个参数为我们需要使用 state,第二个参数为一个...hook 顺序为 name => age => sex 二次渲染根据上面的例子,调用 hook 只有一个 setSex 所以总结一下初始化阶段构建链表,更新阶段按照顺序去遍历之前构建好链表,取出对应数据信息进行渲染两次顺序不一样时候就会造成渲染上差异...useRef 创建 ref 仿佛就像在函数外部定义一个全局变量不会随着组件更新而重新创建。...count 值改变 ,log 执行循序 count 触发了 count effect 可以看出有点类似 effect, 监听 a、b 值根据值是否变化来决定是否更新 UI memo 是在 DOM 更新前触发...就个人而言一起确实帮我解决了部分复用问题,还是分享出来。

    94020

    美团前端一面必会react面试题4

    state 更新流程: 这个过程当中涉及函数:shouldComponentUpdate: 组件 state 或 props 发生改变,都会首先触发这个生命周期函数。...方法更新state,就会触发视图重新渲染,完成表单组件更新受控组件缺陷: 表单元素值都是由React组件进行管理,多个输入框,或者多个这种组件,如果想同时获取到全部值就必须每个都要编写事件处理函数...但是这里个点值得关注,执行 setState 时候不一定会重新渲染。 setState 传入 null ,并不会触发 render。...useEffect(callback, source)接受两个参数callback: 钩子回调函数;source: 设置触发条件,仅 source 发生改变才会触发;useEffect钩子在没有传入...为什么?对于异步请求,最好放在componentDidMount中去操作,对于同步状态改变,可以放在componentWillMount中,一般比较少。

    3K30

    React 作为 UI 运行时来使用

    宿主树是相对稳定,大多数情况更新并不会从根本上改变其整体结构。如果应用程序每秒都会将其所有可交互元素重新排列为完全不同组合,那将会变得难以使用。那个按钮去哪了?为什么屏幕在跳舞?...这个例子并不会遇到刚刚我们所描述问题。让我们对象注释而不是 JSX 也许可以更好地理解其中原因。来看一下 dialog 中子元素树: ?...局部状态是如此有用,以至于 React 让你组件也拥有它。 组件仍然是函数但是 React 对构建 UI 好处许多特性增强了它。在树中每个组件所绑定局部状态就是这些特性之一。...当然一些内容并没有提到——主要是因为我们也不太清楚。目前 React 对多道渲染支持并不太好,即父组件进行渲染需要子组件提供信息。...也许你会觉得 React 太过复杂,所以你不会再去深入理解它。不管怎样,都很乐意在 Twitter 上听到你声音!感谢你阅读。

    2.5K40

    react】203-十个案例学会 React Hooks

    (至少还没有),凭借着阅读社区中大量关于这方面的文章,下面将通过十个案例来帮助你认识理解并可以熟练运用 React Hooks 大部分特性。...,可以用来做一些副作用比如异步请求,修改外部参数等行为,而第二个参数是个数组,如果数组中值才会触发 useEffect 第一个参数函数。...比如第一个 useEffect 中,理解起来就是一旦 count 值发生改变,则修改 documen.title 值 而第二个 useEffect 中数组没有传值,代表不监听任何参数变化,即只有在组件初始化或销毁时候才会触发...a/b 改变,child1/child2 才会重新渲染。...可以认为 ref 在所有 Render 过程中保持着唯一引,因此所有对 ref 赋值或取值,拿到都只有一个最终状态,而不会在每个 Render 间存在隔离。

    3.1K20

    Hooks + TS 搭建一个任务管理系统(一)-- 登录注册页面

    这个项目是跟着视频做并不是完全由我创新 ,因此如果文章侵权行为的话,麻烦联系一下删除(应该不会吧,毕竟文章是自己写) 这个项目采用技术栈是 React Hooks + TS4 主要实现功能有...高能预警:本项目采用了很多 custom hook ,真的非常不错 下面开始今天主题,实现登录注册页面 一、状态驱动页面更新 为什么第一个要讲“状态驱动页面更新”呢?...注册新账号'} 这个是登录和注册切换按钮,点击这个按钮,会触发 setIsRegister 改变 isRegister 值,我们通过这个值 true or false 来判断展示内容...value 设置就是它 context 容器中值 通过编写这个 custom hook 我们对 useAsync 了更好理解,同时也学会了如何使用 context 来进行数据共享 六、按钮触发函数执行...返回函数,需要使用 useCallback 包裹 多利用解构赋值,来优化代码 useState 设置变量,类型会跟随初始值类型 对于不同事务,我们最好分离出来写,这样我们主文件思路会非常清晰

    1.4K11

    React一些 Router 必备知识点

    在处理 URL ,除了问号带参数方式,React-Router 帮我们做什么呢?在这其中,Route 组件 path 属性便可用于指定路由匹配规则。...URL 上,此时,参数名字(本 Case 中是 id)对应改变,将被认为是不同 URL。...别急,可以 ? 来解决,它意味着 id 不是一个必要参数,可传可不传。 场景 4 描述: id 只能是数字,不想要字符串怎么办?...个人理解是因为 React-Router 帮我们做了处理,通过路由和 hash 值(window.location.hash)做了解析封装。 例如: // url 为 /book?...上面代码中,用户访问 /router/book 不会触发第二个路由规则(不会展示“图书”),因为它会匹配 /router/:type 这个规则。因此,带参数路径一般要写在路由规则底部。

    2.7K20

    React一些 Router 必备知识点

    在处理 URL ,除了问号带参数方式,React-Router 帮我们做什么呢?在这其中,Route 组件 path 属性便可用于指定路由匹配规则。...URL 上,此时,参数名字(本 Case 中是 id)对应改变,将被认为是不同 URL。...别急,可以 ? 来解决,它意味着 id 不是一个必要参数,可传可不传。 场景 4 描述: id 只能是数字,不想要字符串怎么办?...个人理解是因为 React-Router 帮我们做了处理,通过路由和 hash 值(window.location.hash)做了解析封装。 例如: // url 为 /book?...上面代码中,用户访问 /router/book 不会触发第二个路由规则(不会展示“图书”),因为它会匹配 /router/:type 这个规则。因此,带参数路径一般要写在路由规则底部。

    2.9K40

    Angular(06)- 为什么数据变化,绑定视图就会自动更新了?

    以下是个人理解,仅供参考: 在还是 jQuery 时代,当在 js 中改变了某个变量数据,而这个变量是需要在 Html 中显示出来。...vue 要求得声明在 data 中变量它变化时才会被追踪到,以更新视图 为什么这些框架会有这些要求,或者说这些规定? 因为它需要知道我们到底什么时刻会去对数据进行更新啊。...对于 react 来说,当我们需要更新变量数据值,都通过调用它方法,那么,它自然就知道我们什么时候更新了数据了。...而 Angular 原理,类似于被动轮询模式。也就是,你不知道什么时候会变化,那么你就在可能会变化情况下,不断读取值,比对一下,看看有没有发生变化。...方式,来监听数据变化时机; angular 则是在会触发视图变化情况下,主动去检测绑定数据源,比对下是否发生变化来判断是否需要刷新视图。

    1.7K10

    Hooks + TS 搭建一个任务管理系统(终)-- 项目总结

    怎么实现页面刷新后仍然是上一次状态? 通过 token 以及本地存储实现,我们在登录,会将token 存储到本地中,这一步不需要我们手动操作,老师库会自动实现。...useRef ,它能够帮我们保存变量最初始状态,也就是 jira......useRef 自定义 hook 它会一直帮我们保存好这个 title值,不会改变, const oldTitle = useRef(document.title).current //...更多防止子组件重新渲染 useCallback 返回一个函数,把它返回这个函数作为子组件使用时,可以避免每次父组件更新都重新渲染这个子组件,子组件一般配合 memo 使用 useMemo...这里改变,不表示地址改变,只有值得改变

    81631

    react面试题笔记整理(附答案)

    shouldComponentUpdate什么为什么它很重要?组件状态数据或者属性数据发生更新时候,组件会进入存在期,视图会渲染更新。...如果我们知道用户界面的某一部分不会改变,那么没有理由让 React弄清楚它是否应该更新渲染。...Refs 回调是 React 所推荐React-Router 4Switch什么?...但是这里个点值得关注,执行 setState 时候不一定会重新渲染。 setState 传入 null ,并不会触发 render。...方法更新state,就会触发视图重新渲染,完成表单组件更新受控组件缺陷: 表单元素值都是由React组件进行管理,多个输入框,或者多个这种组件,如果想同时获取到全部值就必须每个都要编写事件处理函数

    1.2K20

    阿里前端二面必会react面试题总结1

    useEffect(callback, source)接受两个参数callback: 钩子回调函数;source: 设置触发条件,仅 source 发生改变才会触发;useEffect钩子在没有传入...如果我们知道用户界面的某一部分不会改变,那么没有理由让 React弄清楚它是否应该更新渲染。...展示专门通过 props 接受数据和回调,并且几乎不会有自身状态,但展示组件拥有自身状态,通常也只关心 UI 状态而不是数据状态。容器组件则更关心组件是如何运作。...props不可以变性就保证相同输入,页面显示内容是一样,并且不会产生副作用对React插槽(Portals)理解,如何使用,哪些使用场景React 官方对 Portals 定义:Portal...最典型应用场景:父组件具有overflow: hidden或者z-index样式设置,组件可能被其他元素遮挡,这时就可以考虑要不要使用Portal使组件挂载脱离父组件。

    2.7K30

    前端一面经典react面试题(边面边更)

    在vue或者react内部封装了diff算法,通过这个算法来进行比较,渲染修改改变变化,原先没有发生改变通过原先数据进行渲染。...// 第二个参数是 state 更新完成后回调函数对状态组件和无状态组件理解及使用场景(1)状态组件特点:是类组件继承可以使用this可以使用react生命周期使用较多,容易频繁触发生命周期钩子函数...不需要使用生命周期钩子时,应该首先使用无状态函数组件组件内部不维护 state ,只根据外部组件传入 props 进行渲染组件, props 改变,组件重新渲染。...: 组件内部状态且与外部无关组件,可以考虑状态组件,这样状态树就不会过于复杂,易于理解和管理。...useEffect(callback, source)接受两个参数callback: 钩子回调函数;source: 设置触发条件,仅 source 发生改变才会触发;useEffect钩子在没有传入

    2.3K40

    React 总结初稿一

    工作需要什么我们学什么,框架说到底都是库,死磕文档就好了(大佬说),道理是这样。 但是为什么还是要去学那么多呢?刚刚毕业,学习是最主要。...具体需求具体使用,一般情况当我们组件里面没有复杂逻辑,数据传递我们可以尝试使用,一个组件只有 render() 生命周期时候,我们完全可以一个无状态组件来替换。...生命周期函数是指在某一刻组件会自动调用执行函数 State React 很灵活,但是它有一条严格规则 reducer() 生命周期函数( 或者说 react 组件 ) 必须是纯函数(纯函数,给固定输入...state 里面的数据我们不能直接修改,直接修改并不会重新渲染一个组件,我们需要借助 setState() ( 状态更新是异步,解决这个问题我们常常在 setState 里面调用函数,函数接受两个参数...if 案例 在vue中,表单绑定实时渲染是作者帮我们封装好了,我们直接使用就好v-model,但是在react中,需要我们自己去写。

    77740

    整理了近期阿里携程面试题,分享给大家(后期会慢慢完善)

    => 模板字符串 解析结构 函数默认参数 展开运算符 对象字面量 与 class、 Promise Redux state , action,reducer state改变只能通过触发特定action...看项目中使用了dva,为什么要用dva?直接saga也达到同样效果,dva相比好在哪里?...触发子元素,事件会冒泡到父元素,监听器就会触发。这种技术好处是: 内存占用减少,因为只需要一个父元素事件处理程序,而不必为每个后代都添加事件处理程序。...说说React Native,Weex框架实现原理? React为什么自己定义一套事件体系呢,与浏览器原生事件体系什么关系? 用过 React 技术栈中哪些数据流管理库?...,将函数内部变量和方法传递到外部 闭包特性:函数内嵌套函数;内部函数可以引用外部参数变量参数变量不会被垃圾回收机制回收 6.http状态码哪些 简单版 100 Continue 继续,一般在发送

    1.7K21

    一天梳理React面试高频知识点

    react什么特点react使用过虚拟DOM,而不是真实DOMreact可以服务器渲染react遵循单向数据流 或者数据绑定Reactkey是什么?为什么它们很重要?...一个 匹配成功,它将渲染其内容,它不匹配就会渲染 null。没有路径 将始终被匹配。...在React 17之后,就不再需要引入,因为 babel 已经可以帮我们自动引入react。在 React中元素( element)和组件( component)什么区别?...这对于性能是好处。这也意味着在更新DOMReact不需要担心跟踪事件监听器。...Redux实现原理解为什么要用redux在React中,数据在组件中是单向流动,数据从一个方向父组件流向子组件(通过props),所以,两个非父子组件之间通信就相对麻烦,redux出现就是为了解决

    2.8K20

    React】393 深入了解React 渲染原理及性能优化

    虚拟元素可以理解为真实元素对应,它构建与更新都是在内存中完成,并不会真正渲染到 dom 中去。 回到我们计数器 counter 组件: ?...一旦接受到参数 props 或自身状态 state 有所改变React 组件就会执行相应生命周期方法。 React 生命周期全局图 ?...只会对相同层级 DOM 节点进行比较,发现节点已经不存在,则该节点及其子节点会被完全删除,不会用于进一步比较。 如果出现了 DOM 节点跨层级移动操作。...// Bad case // 每次父组件触发render 将导致传入handleClick参数都是一个全新匿名函数引用。...现在我们来点击改变标题, 看看会发生些什么。 ? 奇怪事情发生了,为什么只改了标题, 为什么不相关 ListItem 组件也会重新渲染呢? 我们可以回到组件生命周期看看为什么。 ?

    1.2K10
    领券