按照 React 团队的说法,shouldComponentUpdate是保证功用的紧急出口,既然是紧急出口,那就意味着我们随便用不到它。但既然有这样一个紧急出口,那阐明有时分它还是很有必要的。所以我们要搞清楚究竟什么时分才需求运用这个紧急出口。
运用准绳当你觉得,被改动的state或许props,不需求更新视图时,你就应该思索要不要运用它。
需求留意的一个中央是:改动之后,又不需求更新视图的形状,也不应该放在state中。
shouldComponentUpdate的运用,也是有代价的。假设处置得不好,甚至比多render一次更消耗功用,另外也会使组件的复杂度增大,普通状况下运用PureComponent即可;
React.memo假设你的组件在相反 props 的状况下渲染相反的结果,那么你可以经过将其包装在 React.memo 中调用,以此经过记忆组件渲染结果的方式来提高组件的功用表现。这意味着在这种状况下,React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。
React.memo 仅反省 props 变更 。假设函数组件被 React.memo 包裹,且其完成中拥有 useState,useReducer 或 useContext 的 Hook,当 state 或 context 发作变化时,它仍会重新渲染。
默许状况下其只会对复杂对象做浅层比照,假设你想要控制比照进程,那么请将自定义的比较函数经过第二个参数传入来完成。
function MyComponent(props) {
/* 运用 props 渲染 */
}
function areEqual(prevProps, nextProps) {
/*
假设把 nextProps 传入 render 办法的前往结果与
将 prevProps 传入 render 办法的前往结果分歧则前往 true,
否则前往 false
*/
}
export default React.memo(MyComponent, areEqual);
留意
与 class 组件中 shouldComponentUpdate() 办法不同的是,假设 props 相等,areEqual 会前往 true;假设 props 不相等,则前往 false。这与 shouldComponentUpdate 办法的前往值相反。
合理运用ContextContext 提供了一个无需为每层组件手动添加 props,就能在组件树间停止数据传递的办法。正是由于其这个特点,它是可以穿透React.memo或许shouldComponentUpdate的比对的,也就是说,一旦 Context 的 Value 变动,一切依赖该 Context 的组件会全部 forceUpdate.这个和 Mobx 和 Vue 的照应式系统不同,Context API 并不能细粒度地检测哪些组件依赖哪些形状。
准绳Context中只定义被大少数组件所共用的属性,例如以后用户的信息、主题或许选择的言语。
避免运用匿名函数首先来看下下面这段代码
const MenuContainer = ({ list }) => (
<Menu>
{list.map((i) => (
<MenuItem key={i.id} onClick={() => handleClick(i.id)} value={i.value} />
))}
</Menu>
);
下面这个写法看起来是比较繁复,但是有一个潜在成绩是匿名函数在每次渲染时都会有不同的援用,这样就会招致Menu组件会出现重复渲染的成绩;可以运用useCallback来停止优化:
const MenuContainer = ({ list }) => {
const handleClick = useCallback(
(id) => () => {
// ...
},
[],
);
return (
<Menu>
{list.map((i) => (
<MenuItem key={i.id} id={i.id} onClick={handleClick(i.id)} value={i.value} />
))}
</Menu>
);
};
增加渲染的节点 组件懒加载组件懒加载可以让react运用在真正需求展现这个组件的时分再去展现,可以比较有效的增加渲染的节点数提高页面的加载速度
React官方在16.6版本后引入了新的特性:React.lazy 和 React.Suspense,这两个组件的配合运用可以比较方便停止组件懒加载的完成;
React.lazy
该办法主要的作用就是可以定义一个静态加载的组件,这可以直接缩减打包后bundle的体积,并且可以延迟加载在初次渲染时不需求渲染的组件,代码示例如下:
运用之前
import SomeComponent from './SomeComponent';
运用之后
const SomeComponent = React.lazy(() => import('./SomeComponent'));
运用 React.lazy 的静态引入特性需求 JS 环境支持 Promise。在 IE11 及以下版本的阅读器中需求经过引入 polyfill 来运用该特性。
React.Suspense
该组件目前主要的作用就是配合渲染lazy组件,这样就可以在等候加载lazy组件时展现loading元素,不至于直接空白,提升用户体验;
Suspense组件中的 fallback 属性接受任何在组件加载进程中你想展现的 React 元素。你可以将 Suspense 组件置于懒加载组件之上的任何位置,你甚至可以用一个 Suspense 组件包裹多个懒加载组件。
代码示例如下:
import React, { Suspense } from 'react';
const OtherComponent = React.lazy(() => import('./OtherComponent'));
(责任编辑:admin)