this.setState不会触发在组件中重新呈现

。

this.setState是React中用于更新组件状态的方法。当调用this.setState时，React会将新的状态合并到组件的当前状态中，并触发组件的重新渲染。

在React中，组件的重新渲染是由组件的状态或属性的变化触发的。当调用this.setState时，React会比较新的状态和当前状态的差异，并根据差异来更新组件的呈现。

但是，有一种情况下this.setState不会触发组件的重新呈现，即当新的状态和当前状态完全相同时。React会进行浅比较，如果新的状态和当前状态的引用相同，React会认为状态没有变化，不会触发重新渲染。

这种情况下，可以使用shouldComponentUpdate生命周期方法来手动控制组件是否重新渲染。在shouldComponentUpdate方法中，可以根据新的状态和当前状态的比较结果，返回一个布尔值来决定是否重新渲染组件。

需要注意的是，虽然this.setState不会触发组件的重新呈现，但它仍然会更新组件的状态。因此，在使用this.setState时，应该确保新的状态确实会导致组件的变化，否则可能会导致不必要的性能损耗。

推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云函数（SCF）。

腾讯云云服务器（CVM）是一种弹性计算服务，提供可调整的计算能力，适用于各种应用场景。您可以根据实际需求选择不同配置的云服务器，并根据业务负载自由调整计算能力。

腾讯云云函数（SCF）是一种事件驱动的无服务器计算服务，可以帮助您在云端运行代码，无需关心服务器的管理和维护。您可以使用腾讯云云函数来处理各种事件，如HTTP请求、定时触发等，实现灵活的业务逻辑。

腾讯云云服务器（CVM）产品介绍链接地址：https://cloud.tencent.com/product/cvm

腾讯云云函数（SCF）产品介绍链接地址：https://cloud.tencent.com/product/scf

相关·内容

优化 React APP 的 10 种方法

参见，在ReactCompo中。cheapableFunc在JSX中呈现，对于每次重新呈现，都会调用该函数，并将返回值呈现在DOM上。...React.memo通过将其当前/下一个道具与上一个道具进行比较来记住一个组件，如果它们相同，则不会重新渲染该组件。...App依赖关系check，否则不会在每次重新渲染组件时都重新创建它，因此当我们反复单击Set Count按钮TestComp时不会重新渲染。...这些组件树使其具有父子关系，即在组件中更新绑定数据时，将重新呈现该组件及其子组件，以使更改传播到整个子组件树中。...当要重新渲染组件时，React会将其先前的数据（属性和上下文）与当前数据（属性和上下文）进行比较，如果它们相同，则不会进行重新渲染，但是如果存在差异，则该组件并重新渲染其子级。

33.8K2 0

深入理解React的组件状态

定义State是创建组件的第一步，定义的State必须能代表一个组件UI呈现的完整状态集，即组件的任何UI改变，都可以从State的变化中反映出来；同时，State还必须是代表一个组件UI呈现的最小状态集...在React中，直接修改state并不会触发render函数，所以下面的写法是错误的。...State 的更新是异步的调用setState，组件的state并不会立即改变，setState只是把要修改的状态放入一个队列中，React会优化真正的执行时机，并且React会出于性能原因，可能会将多次...} State与Immutable React官方建议把State当作是不可变对象，一方面是如果直接修改this.state，组件并不会重新render；另一方面State中包含的所有状态都应该是不可变对象...当State中的某个状态发生变化，我们应该重新创建这个状态对象，而不是直接修改原来的状态。那么，当状态发生变化时，如何创建新的状态呢？主要有以下三种情况： 1.

2.3K3 0

React 深入系列３：Props 和 State

state必须能代表一个组件UI呈现的完整状态集，即组件对应UI的任何改变，都可以从state的变化中反映出来；同时，state还必须是代表一个组件UI呈现的最小状态集，即state中的所有状态都是用于反映组件...直接修改state，组件并不会重新重发render。...调用setState，组件的state并不会立即改变，setState只是把要修改的状态放入一个队列中，React会优化真正的执行时机，并且React会出于性能原因，可能会将多次setState的状态修改合并成一次状态修改...} State与Immutable React官方建议把state当作不可变对象，一方面是如果直接修改this.state，组件并不会重新render；另一方面state中包含的所有状态都应该是不可变对象...当state中的某个状态发生变化，我们应该重新创建一个新状态，而不是直接修改原来的状态。那么，当状态发生变化时，如何创建新的状态呢？根据状态的类型，可以分成三种情况： 1.

2.8K6 0

setState同步异步场景

setState同步异步场景 React通过this.state来访问state，通过this.setState()方法来更新state，当this.setState()方法被调用的时候，React会重新调用...采用批量更新，简单来说就是为了提升性能，因为不采用批量更新，在每次更新数据都会对组件进行重新渲染，举个例子，让我们在一个方法内重复更新一个值。...保证内部数据统一即使state是同步更新的，但props是不会的，在重新渲染父组件之前，无法知道props，如果同步执行此操作，批处理就会消失。...this.state会立即刷新，而this.props不会，而且我们不能在不重新渲染父对象的情况下立即刷新this.props，这意味着我们将不得不放弃批处理的策略。...由于所有的DOM重排，这既在视觉上令人不快，又使您的应用程序在实践中变慢。如果当您执行一个简单的setState()来呈现不同的视图时，我们可以开始在后台呈现更新后的视图。

2.4K1 0

react实践笔记：父子组件数值双向传递

render 函数中定义了变量 title ，然后通过把这个变量赋值给子组件的 title 属性中。...而在子组件中，在 render 函数中通过 react 的 props 对象取到刚传递过来的值。 2、子组件传值给父组件子组件传值给父组件，主要是通过调用父组件传递过来的回调函数来实现的。...二、完整的实例呈现了解了各自的单向传递后，要实现侧边栏的功能就很简单了。只需要将以下两个步骤合并在一起即可以实现。...》父组件在回调函数中，记录下子组件的状态值。...这是因为，对于子组件状态的变化，父组件只需要记录下就可以了，并不需要再次做重新的渲染。而且如果直接改变父组件的状态，则会引发父组件的重新渲染，从而触发侧边栏的属性传递。

4K0 0

React 回忆录（四）React 中的状态管理

在本章中，我们将把目光聚焦于 React 组件内部的状态管理，去认识或重新思考以下三个核心概念： props 和 state 函数组件类组件让我们开始吧！ ? 01....我们不必跟踪页面的哪些部分需要更改，不需要决定如何有效的重新呈现页面，React 自会比较先前的输出和新的输出，决定什么应该发生改变，并为我们做出决定。...之所以这样设计的原因是，组件内 state 的变化不仅仅是对象属性值发生变化那么简单，它还需要驱动整个 UI 进行重新渲染，因此 this.setState() 这个 API 被调用时实际上做了两件事：...修改 state 对象；驱动组件重新渲染；如果你对 React 有一定研究，你可能会质疑我以上所罗列的两点并不精确，的确如此，小小的 this.setState() API 其实内部还有很多细节值得注意...，例如，当调用 this.setState() 时并不会立即改变 state 的值，也当然不会立即重新渲染组件。

2.4K1 0

Web 性能优化：使用 React.memo() 提高 React 组件性能

当我们再次单击该按钮时出现了问题，组件不应该重新呈现，因为状态没有更改。count 的上个值为1，新值也 1，因此不需要更新 DOM。...日志，这表明即使状态相同，我们的组件也在重新呈现，这称为浪费渲染。...试它，重新加载你的浏览器，并点击多次点击 Click Me 按钮: 现在，我们已经看到如何在 React 中优化类组件中的重新渲染，让我们看看我们如何在函数组件中实现同样的效果。...每当组件中的 props 和 state 发生变化时，React 将检查上一个 state 和 props 以及下一个 props 和 state 是否相等，如果不相等则函数组件将重新渲染，如果它们相等则函数组件将不会重新渲染...现在，如果我们在右边编辑 count 值为到 89，会看到我们的应用程序重新渲染: 如果我们在将值改为与上个一样的值： 89: 不会有重新渲染!!

5.6K4 1

React-setState函数必须掌握的pendingState状态

按照vue中的理解，期待的结果应该还是2。当我天真(zu gou cai)的以为页面上会打出2的时候，发现页面呈现结果是4！！ what!...我们来看看这段伪代码，非常精简的react关于setState的解析，当然再高深了我也不会，我也写不出来。...此时每次通过setState(obj)更新，每次都会触发单独更新直接更新而不会异步更新。...this.setState({name:11},() => { console.log('更新完毕') }) 复制代码这种方式也会在callback中拿到最新的state，不过需要额外注意的是...也就是它将在 setState完成合并并重新渲染组件后执行`。这是和上边两种写法执行实际的不同。写在结尾当然我对于react的探索还在继续深入，也许之后在翻回来会发现有一部分的理解很片面。

1.2K1 0

React App 性能优化总结

译注：函数组件也可以做纯组件的优化：React.memo(…) 是 React v16.6 中引入的新功能。它与 React.PureComponent 类似，它有助于控制函数组件的重新渲染。...ID，列表永远不会被重新排序或过滤列表是不可变的 10.避免使用 `props` 来初始化 `state` （直接赋值）我们经常需要将带有 props 的初始数据传递给 React组件来设置初始状态值...它会映射到 state 中嘛？如果在没有刷新组件的情况下，props 中的值被修改了，props 中的值，将永远不会分配给 state 中的 applyCoupon。...memoized 函数通常更快，因为如果使用与前一个函数相同的值调用函数，则不会执行函数逻辑，而是从缓存中获取结果。让我们考虑下面简单的无状态UserDetails组件。...我们sort在单独的线程中运行该方法，这将确保我们不会阻塞主线程。

7.7K2 0

一文读透react精髓

;}注意： 1、在JSX中，声明属性时不要使用引号，如果声明属性的时候使用引号，那么将被作为字符串解析，而不会被作为一个表达式解析，如：然而，React元素也可以是用户自定义的组件，如：const element = <Welcome name="Tom" /...（无论是函数定义组件还是类定义组件，组件名称的首字母都必须大写，并且继承自React.Component）使用 render() 方法，用来返回需要呈现的内容1、在类中加入statestate是属于一个组件自身的...()重新渲染。...key的作用是给React一个提示，而不会传递给组件。

2.8K0 0

一文读透react精髓_2023-02-24

; } 注意： 1、在JSX中，声明属性时不要使用引号，如果声明属性的时候使用引号，那么将被作为字符串解析，而不会被作为一个表达式解析，如： <div firstName="{user.firstName...（无论是函数定义组件还是类定义组件，组件名称的首字母都必须大写，并且继承自React.Component）使用 render() 方法，用来返回需要呈现的内容 1、在类中加入state state是属于一个组件自身的...在React中，生命周期分为： 1）Mount 已插入真实DOM 2）Update 正在重新渲染 3）Unmount 已移出真实DOM 而相应的，生命周期钩子函数有： componentWillMount...，并触发render()重新渲染。...key的作用是给React一个提示，而不会传递给组件。

3.1K2 0

为什么 React 需要 Immutable？

⼀句话概况： React 使⽤了 shallowCompare 来决定是否应该重新渲染⼀个组件。要理解 shallowCompare，我们⾸先需要知道 JavaScript 是如何处理对象引⽤的。......john}; johnClone.age=31; shallowCompare(johnClone) // prints -> { name: "john", age: 31 } React 中的例...⼦ React 使⽤同样的原则来避免不必要的组件重渲染。...如果我们点击按钮，组件将不会呈现 john 的更新，因为 people[1] 是上次的同⼀个引⽤。为此，没有改变 john 。我们需要在之前克隆 john ，然后更新数组。...这将不会很有效率。我们只需要通过我们改变的路径来创建新的引⽤。 END

8822 0

React基础(6)-React中组件的数据-state

,你可以把组件看成一个'状态机",它是能够随着时间变化的数据,更多的是应当在实现交互时使用,根据状态state的改变呈现不同的UI展示在React中,因为不能直接修改外部组件传入的prop值当需要记录组件自身数据变化时...,但是并没有驱动组件进行重新渲染,既然组件没有重新渲染,页面上的UI这个this.state当然不会有任何变化但是React中的setState方法却能够触发页面的渲染,它可以接收一个对象或者函数正确的写法应当是...:利用setState进行对组件state的更改直接修改this.state的值,虽然改变了组件的内部状态,但是并没有驱动组件进行重新渲染,既然组件没有重新渲染,页面上的UI这个this.state当然不会有任何变化...,它并不会重新渲染组件,如下所示 // 错误的写法 this.state.xxx = "新的值" this.state.count = this.state.count+1; 应该使用setState(...setState方法改变state的值,虽然是两次调用但是并不会引起render函数的重复渲染,它会合并成到一个队列中执行一次操作,只有state或者props发生改变时,它才会引起render函数的重新渲染

6K0 0

为什么 React 需要 Immutable？

如何在使⽤ React 使⽤ immutable What 带来的收益和结果为什么要在React 使⽤ immutable ⼀句话概况： React 使⽤了 shallowCompare 来决定是否应该重新渲染...⼀个组件。...⼦ React 使⽤同样的原则来避免不必要的组件重渲染。...name: {person.name} age: {person.age} ); } } 如果我们点击按钮，组件将不会呈现...这将不会很有效率。我们只需要通过我们改变的路径来创建新的引⽤。 END

5011 0

React Native按钮详解|Touchable系列组件使用详解

Native中没有专门的按钮组件。...TouchableOpacity：相比TouchableHighlight在按下去会使背景变暗的效果，TouchableOpacity会在用户手指按下时降低按钮的透明度，而不会改变背景的颜色。...TouchableWithoutFeedback使用详解 TouchableWithoutFeedback一个Touchable系列组件中最基本的一个组价，只响应用户的点击事件不会做任何UI上的改变，在使用的过程中需要特别留意...，这时按钮又可以重新响应用户的点击事件了。...TouchableNativeFeedback使用详解为了支持Android5.0新增的触控反馈，React Native加入了TouchableNativeFeedback 组件，TouchableNativeFeedback

4.1K7 0

React学习(六)-React中组件的数据-state

,你可以把组件看成一个'状态机",它是能够随着时间变化的数据,更多的是应当在实现交互时使用,根据状态state的改变呈现不同的UI展示在React中,因为不能直接修改外部组件传入的prop值当需要记录组件自身数据变化时...(直接更改state的值会出bug) 直接修改this.state的值,虽然改变了组件的内部状态,但是并没有驱动组件进行重新渲染,既然组件没有重新渲染,页面上的UI这个this.state当然不会有任何变化...,它并不会重新渲染组件,如下所示 // 错误的写法 this.state.xxx = "新的值" this.state.count = this.state.count+1; 应该使用setState(...其实它是会批量延迟更新也就是props,state的值并不会立马的映射更新,它是把这个state对象放到一个更新队列里面,然后从队列当中把新的状态提出来合并到state中,最后在触发render函数组件的更新...setState方法改变state的值,虽然是两次调用但是并不会引起render函数的重复渲染,它会合并成到一个队列中执行一次操作,只有state或者props发生改变时,它才会引起render函数的重新渲染

3.6K2 0

为什么说Suspense是一种巨大的突破？

Suspense组件，它充当一种边界；Suspense组件接受一个组件作为fallback prop，当其子树中的任何子项被挂起时，都会呈现该元素。...我不会说这种方法本身是不好的（它能够满足简单用例的需要，而且我们显然可以轻松地对其进行优化，例如将实际的data fetcing抽象到单独的方法中）。...重新获取数据→坏DX 更改页面的id，然后触发重新获取数据逻辑很难实现。...在解析Promise之前，它将获取的数据存储在它用于缓存的任何内容中，这样当React触发重新渲染时，一切都复用。...每当boundary内的任何组件被suspend时，将呈现加载状态。

1.5K3 0

前端面试指南之React篇（二）

componentWillReceiveProps：在初始化render的时候不会执行，它会在组件接受到新的状态(Props)时被触发，一般用于父组件状态更新时子组件的重新渲染shouldComponentUpdate...约束性组件（ controlled component）就是由 React控制的组件，也就是说，表单元素的数据存储在组件内部的状态中，表单到底呈现什么由组件决定。...表单如何呈现由表单元素自身决定。如下所示，表单的值并没有存储在组件的状态中，而是存储在表单元素中，当要修改表单数据时，直接输入表单即可。有时也可以获取元素，再手动修改它的值。...也正因为组件是 React 的最小编码单位，所以无论是函数组件还是类组件，在使用方式和最终呈现效果上都是完全一致的。...会触发Parent组件重新渲染，而Parent组件重新渲染会触发Child组件的componentWillReceiveProps生命周期函数执行。如此就会陷入死循环。导致程序崩溃。

2.8K12 0

你要的 React 面试知识点，都在这了

它生成React元素，这些元素将在DOM中呈现。React建议在组件使用JSX。在JSX中，我们结合了javascript和HTML，并生成了可以在DOM中呈现的react元素。...我们将每个单独的部分称为组件。通常，组件是一个javascript函数，它接受输入，处理它并返回在UI中呈现的React元素。在React中有不同类型的组件。让我们详细看看。...下面是一个类组件的示例，它在构造函数中定义了props和state，每当使用this.setState() 修改状态时，将再次调用 render( ) 函数来更改UI中组件的输出。...可以在构造函数中定义状态值。直接使用状态不会触发重新渲染。React 使用this.setState()时合并状态。...UI上呈现，具体取决于组件层次结构。

18.4K2 0

组件&生命周期

= { posts: [], comments: [] }; } ****不能直接修改state（需要调用this.setState()） // 错误这样将不会重新渲染一个组件...不会触发重新渲染。...componentDidMount() --此方法在组件被mounted之后立即被调用，初始化dom节点应该在此方法中，如果需要从远端健在数据，这里是实例化网络请求的好地方，此方法中setState会触发组件重新渲染...当父组件导致你的组件重新渲染时，可能会发生这种情况。 React在组件mounting期间不会调用此方法，只有在一些组件的props可能被更新的时候才会调用。...返回false不会阻止子组件的state更改时，该子组件重新渲染。

1.8K1 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

this.setState不会触发在组件中重新呈现

相关·内容

优化 React APP 的 10 种方法

深入理解React的组件状态

React 深入系列３：Props 和 State

setState同步异步场景

react实践笔记：父子组件数值双向传递

React 回忆录（四）React 中的状态管理

Web 性能优化：使用 React.memo() 提高 React 组件性能

React-setState函数必须掌握的pendingState状态

React App 性能优化总结

一文读透react精髓

一文读透react精髓_2023-02-24

为什么 React 需要 Immutable？

React基础(6)-React中组件的数据-state

为什么 React 需要 Immutable？

React Native按钮详解|Touchable系列组件使用详解

React学习(六)-React中组件的数据-state

为什么说Suspense是一种巨大的突破？

前端面试指南之React篇（二）

你要的 React 面试知识点，都在这了

组件&生命周期

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐