首页
学习
活动
专区
工具
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

    搭建一个基于webpack的react环境: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.9K70

    秒懂ReactJS | TW洞见

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

    3.5K100

    开始学习React js

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

    7.3K60

    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也是需要执行时间的。

    86980

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

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

    6.8K80

    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 就会改变,网页也就会自动随之改变。

    5K90

    React 面试必知必会 Day9

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

    1K30

    React 代码共享最佳实践方式

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

    3.1K20

    深入理解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-组件-内联样式 和 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 的取值唯一,否则会报错图片最后本期结束咱们下次再见~ 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。

    24520

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

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

    7.8K30

    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

    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

    ReactJs和React Native的那些事

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

    1.9K100
    领券