react是如何决定重新渲染组件的 [英] How does react decide to rerender a component

问题描述

我知道 React 有一个名为 shouldComponentUpdate 的生命周期方法，默认情况下返回 true，这就是组件决定更新的方式

I know React has a life cycle method called shouldComponentUpdate, Which by default return true and that's how the component decides to update

但是当该组件的状态或道具更改时，如何调用该生命周期方法.当我们收到新的 props 或 state 时会发生什么?当我们将一个组件连接到 redux state 和 mapStateToProps 时，我们是否在检查组件内部值的变化?如果没有，我们什么时候在寻找 state 或 props 的变化?

But How does that life cycle method gets called, When a state or props change for that component. What actually happens when we receive new props or state? When We connect a component to redux state and mapStateToProps, Are we checking for a change in values inside the component? If not, When We are looking for a change in state or props?

当 props 或 state 发生变化时，生命周期方法如何调用?.当 props 或 state 发生变化时，我们是否有一个监听器来调用这些方法?

when the props or state changes, how the life cycle methods are called?. Do we have a listener that calls these methods when the props or state changes?

推荐答案

您应该查看两者的生命周期，它们的执行方式以及调用每个方法的顺序.查看下面的反应生命周期图像，您可以看到 componentWillMount 和 componentDidMount 与其他类似 componentDidUpdate、componentWillUpdate 和等等……

You should look at lifecycles of both, how they perform and in what order each method gets called. Looking at react lifecycle image bellow you can see the difference between componentWillMount and componentDidMount and others like componentDidUpdate, componentWillUpdate and so on...

你还应该推理何时使用每种方法

你调用 this.setState() 来更新状态，它告诉 react 某些东西已经改变了，它会重新渲染组件树.如果你使用 this.state.data = something react 不会触发 render().现在要更新道具，您需要了解 render() 的实际工作原理.这个答案已经从现有的 anwser 中总结出来:

To update state you call this.setState() which tells react that something has changed and it will re-render component tree. If you use this.state.data = something react won't trigger render(). Now to update props, you need to understand how render() actually works. This answer is summarized from existing anwser already:

每次调用 render() 时，react 都会创建一个新的虚拟 DOM其中根节点是调用其渲染函数的组件.render() 函数在 state 或 props 出现时调用组件或其任何子组件发生变化.渲染()函数销毁所有旧的虚拟 DOM 节点，从根节点开始创建一个全新的虚拟 DOM.

Every time render() is called react will create a new virtual DOM where the root node is the component whose render function is called. The render() function is called when either the state or the props of a component or any of its children change. The render() function destroys all of the old virtual DOM nodes starting from the root and creates a brand new virtual DOM.

为了确保组件的重新渲染平滑且高效的 React 使用 Diffing Algorithm 来减少它所花费的时间创建一个时间复杂度为 O(n) 的新树，通常是复制树的复杂度 > O(n^2).它实现这一目标的方式是通过在 DOM 中的每个元素上使用key"属性.React 知道与其从头开始创建每个元素，它可以检查 DOM 中每个节点上的key"属性.这就是为什么你得到如果你没有设置每个元素的key"属性，就会发出警告，React使用按键大大提高了渲染速度.

In order to make sure the re-rendering of components is smooth and efficient React uses the Diffing Algorithm to reduce the time it takes to create a new tree to a time complexity of O(n), usually time complexity for copying trees is > O(n^2). The way it accomplishes this is by using the "key" attribute on each of the elements in the DOM. React knows that instead of creating each element from scratch it can check the "key" attribute on each node in the DOM. This is why you get a warning if you don't set the "key" attribute of each element, React uses the keys to vastly increase its rendering speed.

React 生命周期

Redux 生命周期

这篇关于react是如何决定重新渲染组件的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！