react中的shouldComponentUpdate
2018-03-15 19:37
330 查看
当调用
一旦有了这个树,为了弄清 UI 如何响应新的状态而改变,React 会将这个新树与上一个元素树相比较(
通过这样做, React 将会知道发生的确切变化,并且通过了解发生什么变化,只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间
在生命周期方法
如上所述,“和解(
aed6
图去弄清楚它是否应该渲染。通过从
setState时,React会做的第一件事情是将传递给
setState的对象合并到组件的当前状态。这将启动一个称为和解(
reconciliation)的过程。和解(
reconciliation)的最终目标是以最有效的方式,根据这个新的状态来更新UI。 为此,React将构建一个新的 React 元素树(您可以将其视为 UI 的对象表示)。
一旦有了这个树,为了弄清 UI 如何响应新的状态而改变,React 会将这个新树与上一个元素树相比较(
diff)。
通过这样做, React 将会知道发生的确切变化,并且通过了解发生什么变化,只需在绝对必要的情况下进行更新即可最小化 UI 的占用空间
在生命周期方法
shouldComponentUpdate中,允许我们选择退出某些组件(和他们的子组件)的
reconciliation过程。
如上所述,“和解(
reconciliation)的最终目标是以最有效的方式,根据新的状态更新用户界面”。如果我们知道我们的用户界面(UI)的某一部分不会改变,那么没有理由让 React 很麻烦地试
aed6
图去弄清楚它是否应该渲染。通过从
shouldComponentUpdate返回 false,React 将假定当前组件及其所有子组件将保持与当前组件相同。
相关文章推荐
- reactjs性能优化之shouldComponentUpdate
- 【React】什么时候使用shouldComponentUpdate方法?
- react与mox-react的shouldComponentUpdate 理解
- React高级教程(es6)——(4)ShouldComponentUpdate的用法
- react-bits:shouldComponentUpdate() check
- [React] Update Component State in React With Ramda Lenses
- Stateless functional component 和 shouldComponentUpdate
- React + antd 组件离开页面以后出现Can only update a mounted or mounting component 的解决办法
- shouldcomponentupdate nextprops
- 【REACT NATIVE 系列教程之六】重写SHOULDCOMPONENTUPDATE指定组件是否进行重绘
- reactjs性能优化之shouldComponentUpdate
- React 语法二:forceUpdate()、componentWillUnmount()、onMouseEnter()与onMouseLeave()
- React异步请求数据出现setState(...): Can only update a mounted or mounting component...
- react.js 生命周期componentDidUpdate的另类用法:防止页面过渡刷新
- React的componentWillUpdate获取不到更新的props值(redux)
- react native Warning: setState(...): Can only update a mounted or mounting component.
- React报错Warning:setState(...):Can only update a mounted or mounting component...
- should be mapped with insert="false" update="false"
- 从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 && HOC 探幽
- react native Component 生命周期