哪些场景下，父组件和子组件会重新渲染？
1.在同一组件或父组件中调用 setState 时。
2.从父级收到的“props”的值发生变化。
3.调用组件中的 forceUpdate。
1. 使用纯组件
如果 React 组件为相同的状态和 props 渲染相同的输出，则可以将其视为纯组件。
对于像 this 的类组件来说，React 提供了 PureComponent 基类。扩展 React.PureComponent 类的类组件被视为纯组件。
它与普通组件是一样的，只是 PureComponents 负责 shouldComponentUpdate——它对状态和 props 数据进行浅层比较（shallow comparison）。
如果先前的状态和 props 数据与下一个 props 或状态相同，则组件不会重新渲染。
import React from 'react';
export default class ApplicationComponent extends React.Component {
constructor() {
super();
this.state = {
name: "Mayank"
}
}
updateState = () => {
setInterval(() => {
this.setState({
name: "Mayank"
})
}, 1000)
}
componentDidMount() {
this.updateState();
}
render() {
console.log("Render Called Again")
return (
class RegularChildComponent extends React.Component {
render() {
console.log("Regular Component Rendered..");
return {this.props.name};
}
}
class PureChildComponent extends React.PureComponent {
// Pure Components are the components that do not re-render if the State data or props data is still the same
render() {
console.log("Pure Component Rendered..")
return {this.props.name};
}
}
2. 使用 React.memo 进行组件记忆
React.memo 是一个高阶组件。与上面说的PureComponent很像，只是他是用在函数式组件上的，它允许你自定义比较逻辑，用户可以用自定义逻辑深度对比（deep comparison）对象。如果比较函数返回 false 则重新渲染组件，否则就不会重新渲染。如下。
// The following function takes "user" Object as input parameter in props
function CustomisedComponen(props) {
return (
User name: {props.user.name}
User age: {props.user.age}
User designation: {props.user.designation}
)
}
function userComparator(previosProps, nextProps) {
if(previosProps.user.name == nextProps.user.name ||
previosProps.user.age == nextProps.user.age ||
previosProps.user.designation == nextProps.user.designation) {
return false
} else {
return true;
}
}
var memoComponent = React.memo(CustomisedComponent, userComparator);
3. 使用shouldComponentUpdate生命周期事件
这个函数将 nextState 和 nextProps 作为输入，并可将其与当前 props 和状态做对比，以决定是否需要重新渲染。
import React from "react";
export default class ShouldComponentUpdateUsage extends React.Component {
constructor(props) {
super(props);
this.state = {
name: "Mayank";
age: 30,
designation: "Architect";
}
}
componentDidMount() {
setTimeout(() => {
this.setState({
designation: "Senior Architect"
});
}
}
shouldComponentUpdate(nextProps, nextState) {
if(nextState.age != this.state.age || netState.name = this.state.name) {
return true;
}
return false;
}
render() {
return (
User Name: {this.state.name}
User Age: {this.state.age}
)
}
}
4. 懒加载组件
使用 Suspense 和 lazy。
import React, { lazy, Suspense } from "react";
export default class CallingLazyComponents extends React.Component {
render() {
var ComponentToLazyLoad = null;
if(this.props.name == "Mayank") {
ComponentToLazyLoad = lazy(() => import("./mayankComponent"));
} else if(this.props.name == "Anshul") {
ComponentToLazyLoad = lazy(() => import("./anshulComponent"));
}
return (
This is the Base User: {this.state.name}
Loading... }>