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

ReactJS -为什么我的输入栏的样式不会因为setState而改变?

ReactJS是一个用于构建用户界面的JavaScript库。它采用了组件化的开发模式,通过使用虚拟DOM来实现高效的页面渲染。在React中,组件的状态通过setState方法来更新,而不是直接修改DOM。

当你调用setState方法时,React会将新的状态与旧的状态进行比较,然后计算出需要更新的部分,并将其应用到DOM上。这个过程是异步的,React会将更新操作放入一个队列中,然后在适当的时机进行批量更新。因此,当你调用setState方法时,不会立即改变输入栏的样式。

如果你想在状态更新后立即改变输入栏的样式,可以在组件的render方法中根据状态来设置样式。例如,你可以使用条件渲染来根据状态的值来决定是否添加特定的CSS类名,从而改变输入栏的样式。

另外,你还可以使用React的生命周期方法来监听状态的变化,并在状态更新后执行相应的操作。例如,你可以在componentDidUpdate方法中获取新的状态,并根据需要更新输入栏的样式。

总结起来,React中的状态更新是异步的,不会立即改变输入栏的样式。你可以通过在render方法中根据状态设置样式,或者使用生命周期方法来监听状态的变化并更新样式。

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

相关·内容

把 React 作为 UI 运行时来使用

这样做会造成性能上问题和潜在 bug 。例如,当商品列表顺序改变时,原本在第一个输入内容仍然会存在于现在第一个输入框中 — 尽管事实上在商品列表里它应该代表着其他商品!...为什么要编写 不是 Form()? React 能够做更好如果它“知晓”你组件不是在你递归调用它们之后生成 React 元素树。 ?...这样我们才能保证用户不会看见半更新状态 UI ,浏览器也不会对用户不应看到中间状态进行不必要布局和样式重新计算。 这也是为什么 React 将所有的工作分成了”渲染阶段“和”提交阶段“原因。...例如,渲染一棵很深树(在每次页面转换时候发生)不阻塞浏览器。改变跟踪并不会让它变得更快 — 这样只会让其变得更慢因为我们执行了额外订阅工作。另一个问题是我们需要等待返回数据在渲染视图之前。...当状态逻辑变得更加复杂不仅仅只是少数 setState 调用时,建议你使用 useReducer Hook 【https://reactjs.org/docs/hooks-reference.html

2.5K40
  • React: JSX 、虚拟 DOM、组件配置(props、state、PropTypes、createContext、props.children)

    多个上下文 9. state 在setState中使用函数,不是对象 10. 无状态组件 11....ReactComponent ReactComponent 是一个 JS 对象,至少有一个 render() 函数,返回一个 ReactElement 4. props 是参数 props 是组件输入...中使用函数,不是对象 为什么?...下面是一个点击减少按钮 使用对象方式赋值给 state,如果用户点击过快,计算机非常慢, setState 是异步,如果碰到更高优先级响应过载,这个减少按钮点击响应还在队列中等待,那么用户可能点了...无状态组件 React 中 只需要 render() 方法组件 无状态组件,它不是一个类,我们不会引用 this 这种函数式组件,性能更好 const Header = function(props

    1.8K10

    照着官方文档学习react

    搭建一个基于webpackreact环境:Hello ReactJS. 一些要点 在想是否应该完整记录照抄过程呢。毕竟已经开始一段,前面的要不要补上?...另外,setState是一个merge异步操作。merge是说,每次set时候,只会修改指定变量,不会整体替换。...异步是说不能直接this.state.xx来操作属性,因为有可能你调用this.state.xx来获取xx时候,前一次setState还没执行完。....'); return false"> Click me 这样,你点击a标签后,浏览器地址不会有#,如果你不return false,浏览器地址就会发生跳转。...观察浏览器地址可以发现没有任何变化,证明默认行为被阻止了。如果注释掉e.preventDefault();,刷新页面,点击a标签,观察地址就会发现发生了改变

    2.8K70

    一看就懂ReactJs入门教程(精华版)

    自从接触了ReactJSReactJs虚拟DOM(Virtual DOM)和组件化开发深深吸引了,下面来跟我一起领略 ReactJS风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一、ReactJS...如果这时因为用户一个点击需要改变某个状态文字,那么也是通过刷新整个页面来完成。服务器端并不需要知道是哪一小段HTML发生了变化,只需要根据数据刷新整个页面。...html模板如下(js路径改成自己): 这里大家可能会奇怪,为什么scripttype是text/jsx,这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。...下面我们来编写一个小例子,一个文本框和一个button,通过点击button可以改变文本框编辑状态,禁止编辑和允许编辑。通过这个例子来理解ReactJS状态机制。...3、为组件添加外部css样式时,类名应该写成className不是class;添加内部样式时,应该是style={{opacity: this.state.opacity}}不是style="opacity

    6.6K70

    React 性能优化大挑战:一次理解 Immutable data跟shouldComponentUpdate

    state 改变了,所以会先触发 App render function,因为裡面有回传,所以也会触发 Content render function。...因为在 virtual DOM diff 时候,React 会发现你这次跟上次 virtual DOM 长得一模一样(因为没有东西改变嘛),就不会对 DOM 做任何操作。...={ ...obj, text:'world' } 有了 Immutable 概念之后,shallowEqual就不会出错了,因为如果我们有新资料,就可以保证它是一个新 object,这也是为什么我们在用...setState时候总是要产生一个新物件,不是直接对现有的做操作。...为什么因为它帮你做了shallowEqual。 别忘记了,shallowEqual也是需要执行时间

    86480

    开始学习React js

    自从接触了ReactJSReactJs虚拟DOM(Virtual DOM)和组件化开发深深吸引了,下面来跟我一起领略 ReactJS风采吧~~ 章有点长,耐心读完,你会有很大收获哦~ 一、...如果这时因为用户一个点击需要改变某个状态文字,那么也是通过刷新整个页面来完成。服务器端并不需要知道是哪一小段HTML发生了变化,只需要根据数据刷新整个页面。...,这里再一次给出下载地址(链接),下载完成后,么看到是一个压缩包。...html模板如下(js路径改成自己): ? 这里大家可能会奇怪,为什么scripttype是text/jsx,这是因为 React 独有的 JSX 语法,跟 JavaScript 不兼容。...3、为组件添加外部css样式时,类名应该写成className不是class;添加内部样式时,应该是style={{opacity: this.state.opacity}}不是style="opacity

    7.2K60

    秒懂ReactJS | TW洞见

    还有一点不同是JSX最终编译成调用react-domjavascript语句,不是直接生成字符串。...render函数还只是ReactJs这座冰山一角,”React”会在render函数输入变化时再次调用这个函数。再看一个例子。...要回答这个问题,就涉及到复杂视图场景。想想看,当视图内元素不断增加时,代码上如何处理,还要在一个render函数里折腾吗?肯定不会猜你已经想到了,要把大问题拆小。...对上面的例子,当TomScore改变时,ScoreList其他部分一定不会改变,所以视图更新从TomScore视图开始就可以,这就保证了能更高效地计算视图变化,再加上VirtualDom使用,使ReactJs...当ScoreList更新时,因为Jerryprops和states都没变化,所以JerryScore视图不需要更新。

    3.5K100

    深入理解React组件状态

    State 更新是异步 调用setState,组件state并不会立即改变setState只是把要修改状态放入一个队列中,React会优化真正执行时机,并且React会出于性能原因,可能会将多次...State 更新是一个浅合并过程 当调用setState修改组件状态时,只需要传入发生改变State,不是组件完整State,因为组件State更新是一个浅合并(Shallow Merge)...this.setState({title: 'Reactjs'}); React会合并新title到原来组件状态中,同时保留原有的状态content,合并后State内容为: { title...= 'React'; }); })) 注意:不要使用push、pop、shift、unshift、splice等方法修改数组类型状态,因为这些方法都是在原数组基础上修改,concat、slice...一方面是因为不可变对象方便管理和调试;另一方面是出于性能考虑,当对象组件状态都是不可变对象时,我们在组件shouldComponentUpdate方法中,仅需要比较状态引用就可以判断状态是否真的改变

    2.4K30

    React 代码共享最佳实践方式

    经过高阶返回新组件,并不会包含原始组件静态方法); 避免使用 ref(ref 不会被传递); HOC 优缺点 至此我们可以总结一下高阶组件(HOC)优点: HOC是一个纯函数,便于使用和维护;...读者或许会疑惑,“我们为什么需要调用props属性来实现组件内部渲染,不直接在组件内完成渲染”?...以上可以看出,render props是一个真正React组件,不是像HOC一样只是一个可以返回组件函数,这也意味着使用render props不会像HOC一样产生组件层级嵌套问题,也不用担心props...,包含最基础状态和点击方法,点击按钮后状态发生改变。...hook 总结— 除了Mixin因为自身明显缺陷稍显落后之外,对于高阶组件、render props、react hook而言,并没有哪种方式可称为最佳方案,它们都是优势与劣势并存

    3K20

    React.Component损害了复用性?|TW洞见

    本文转载自InfoQ: http://www.infoq.com/cn/articles/more-than-react-part02 本系列上一篇文章《为什么ReactJS不适合复杂交互前端项目》...此外,ReactJS框架可以在 state 和 props 改变时触发 render ,从而避免了手动修改现存DOM。 如果不考虑冗余 key 属性,单个组件内交互ReactJS还算差强人意。...每当回调函数触发,调用 Page自己 setState 来触发 Page 重绘。 从这个例子,我们可以看出,ReactJS可以简单解决简单问题,但碰上层次复杂、交互频繁网页,实现起来就很繁琐。...使用ReactJS前端项目充满了各种 xxxHandler用来在组件中传递信息。 参与某海外客户项目,平均每个组件大约需要传入五个回调函数。...每当用户在 tagPicker 输入标签时,tags 就会改变,网页也就会自动随之改变

    4.9K90

    React 面试必知必会 Day9

    大家好,是洛竹?,一只住在杭城木系前端??‍♀️,如果你喜欢文章?,可以通过点赞帮我聚集灵力⭐️。 本文翻译自 sudheerj/reactjs-interview-questions 1....为什么我们需要向 setState() 传递一个函数? 这背后原因是,setState() 是一个异步操作。...出于性能考虑,React 会对状态变化进行批处理,所以在调用 setState() 后,状态可能不会立即发生变化。...为什么setState() 中首选函数不是对象? React 可以将多个 setState() 调用批量化为一次更新,以提高性能。...为什么 isMounted() 是一个反模式,正确解决方案是什么? isMounted() 主要用例是避免在组件被卸载后调用 setState(),因为它会发出警告。

    1K30

    React-组件-内联样式 和 React-组件-列表渲染优化

    前言内联样式是一种强大工具,它使开发人员能够在组件级别动态设置样式不必依赖外部CSS文件。...React 中样式React 并没有像 Vue 那样有提供特定区域给我们编写 CSS 代码所以你会发现在 React 代码中, CSS 样式写法千奇百怪内联样式内联样式优点:内联样式, 样式之间不会有冲突可以动态获取当前...state 中状态内联样式缺点:写法上都需要使用驼峰标识某些样式没有提示大量样式, 代码混乱某些样式无法编写(比如伪类/伪元素)import React from 'react';class App...diff 算法递归比较同层所有元素给列表元素添加 key, 告诉 React 除了和同层同位置比, 还需要和同层其它位置比官方文档:https://zh-hans.reactjs.org/docs/reconciliation.html...key, 所以我们必须保证列表中 key 取值唯一,否则会报错图片最后本期结束咱们下次再见~ 关注不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,一般看到都会回复

    23920

    React 性能优化完全指南,将自己这几年心血总结成这篇!

    [19] 为什么面试官不会问“函数组件中 setState 是同步还是异步?”?...因为函数组件中生成函数是通过闭包引用了 state,不是通过 this.state 方式引用 state,所以函数组件处理函数中 state 一定是旧值,不可能是新值。...如果让页面优先隐藏输入框,用户便能立刻感知到页面更新,不会有卡顿感。 实现优先级更新要点是将耗时任务移动到下一个宏任务中执行,优先响应用户行为。...例如在该例中,将 setNumbers 移动到 setTimeout 回调中,用户点击按钮后便能立即看到输入框被隐藏,不会感知到页面卡顿。优化后代码如下。...当组件能很快处理搜索结果时,用户不会感觉到输入延迟。 但实际场景中,中后台应用列表页非常复杂,组件对搜索结果 Render 会造成页面卡顿,明显影响到用户输入体验。

    7.4K30

    React 深入系列3:Props 和 State

    调用setState,组件state并不会立即改变setState只是把要修改状态放入一个队列中,React会优化真正执行时机,并且React会出于性能原因,可能会将多次setState状态修改合并成一次状态修改...当调用setState修改组件状态时,只需要传入发生改变状态变量,不是组件完整state,因为组件state更新是一个浅合并(Shallow Merge)过程。...} 当只需要修改状态title时,只需要将修改后title传给setState: this.setState({title: 'Reactjs'}); React会合并新title到原来组件state...= 'React'; }); })) 注意不要使用push、pop、shift、unshift、splice等方法修改数组类型状态,因为这些方法都是在原数组基础上修改,concat、slice...一方面是因为不可变对象方便管理和调试,了解更多可参考这里;另一方面是出于性能考虑,当组件状态都是不可变对象时,我们在组件shouldComponentUpdate方法中,仅需要比较状态引用就可以判断状态是否真的改变

    2.8K60

    React组件(推荐,差代码) 原

    安装python3.5.2 建立项目文件夹react_py 打开teminal(windows上安装cmder) 进入该目录下 ? 启动服务器命令 python -m http.server ?...通过react提供creatClass组件创建,上面函数中render作用是在渲染时候会调用下面render函数,得到jsx对象,改变dom模型,进而改变界面 ?...Helloworld就是一个组件 使用时候就在ReactDOM.render里面加载 ? 显示出来 组件优越处:可重用性 ? 增加组件父节点和其他兄弟节点 ? 组件输入参数: ?...this指代整个HelloWorld组件对象,props是组件数据对象,greetTarget是参数名 ? 输入不同参数 ? 3.组件样式设计 ? pros.children ? ?...componentDidMount——组件被浏览器加载之后,但是render函数还没有被调用之前 这里是调用定时器最佳时期 ? setState——用来修改组件本身state对象 ? ? ? ?

    2.4K20

    ReactJs和React Native那些事

    另外,说到重绘就要提到虚拟dom了,就是用js模拟dom结构,等整个组件dom更新完毕,才渲染到页面,简单来说只更新了相比之前改变部分,不是全部刷新,所以效率很高。...3、样式和布局:iOS、Android和基于Web应用各自有不同样式和布局机制。React Native通过一个基于FlexBox布局引擎在所有移动平台上实现了一致跨平台样式和布局方案。...反驳了他所讲。当他在台上发表自己观点时,正忙着记录不同意观点。当有机会跟他说话时,很快就反驳他一些观点。看起来一定像个混蛋。  **他回答改变的人生。这是一个简单事情。...想要提更多问题。  **学习先思考不是反应快会是一生追求。它是很难。有时仍然会在本不应该时候头脑发热。但是真的很享受有所改善带来好处。 ...一个简单区分方法是,this.props 表示那些一旦定义,就不再改变特性, this.state 是会随着用户互动产生变化特性。

    1.9K100

    React Concurrent Mode三连:是什么为什么怎么做

    对文中提到细节进一步补足,欢迎关注工粽号 —— 魔术师卡颂,给你一份完整源码学习方案。 是什么? Concurrent Mode是什么?...在每16.6ms时间内,需要完成如下工作: JS脚本执行 ----- 样式布局 ----- 样式绘制 当JS执行时间过长,超出了16.6ms,这次刷新就没有时间执行样式布局和样式绘制了。...你能感受到两者体验上区别么? 事实上,点击“通用”后交互是同步,直接显示后续界面。 点击“Siri与搜索”后交互是异步,需要等待请求返回后再显示后续界面。...如下代码执行只会触发一次更新: onClick() { this.setState({stateA: 1}); this.setState({stateB: false}); this.setState...这次更新优先级很低,所以当前如果有正在进行中更新,不会受useDeferredValue产生更新影响。所以useDeferredValue能够返回延迟值。

    2.5K20

    React Concurrent Mode三连:是什么为什么怎么做

    对文中提到细节进一步补足,欢迎关注工粽号 —— 魔术师卡颂,给你一份完整源码学习方案。 是什么? Concurrent Mode是什么?...在每16.6ms时间内,需要完成如下工作: JS脚本执行 ----- 样式布局 ----- 样式绘制 当JS执行时间过长,超出了16.6ms,这次刷新就没有时间执行样式布局和样式绘制了。...你能感受到两者体验上区别么? 事实上,点击“通用”后交互是同步,直接显示后续界面。 点击“Siri与搜索”后交互是异步,需要等待请求返回后再显示后续界面。...如下代码执行只会触发一次更新: onClick() { this.setState({stateA: 1}); this.setState({stateB: false}); this.setState...这次更新优先级很低,所以当前如果有正在进行中更新,不会受useDeferredValue产生更新影响。所以useDeferredValue能够返回延迟值。

    2.2K20
    领券