本文主要是介绍React@16.x(15)PureComponent 和 memo,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
目录
- 1,什么是 PureComponent
- 2,什么是 memo
- 3,举例
- 3.2,优化1
- 3.1,优化2-函数位置
- 4,注意点
- 4.1,为了提升效率,应该尽量使用 `PureComponent`
- 4.2,不要直接改变之前的状态,而是覆盖
- 4.3,为什么不进行深比较?
1,什么是 PureComponent
纯组件,为了避免不必要的渲染(运行 render
)来提升效率。
优化思路:如果一个组件的状态和属性都没有变化,那就不用重新渲染。
具体实现:当某个组件 extends PureComponent
时,则该组件的 shouldComponentUpdate
中会对新旧属性和状态进行浅比较,如果都相等则不会重新渲染(return false
)。
// 原理大致如下:
import React, { Component } from "react";export default class Task extends Component {shouldComponentUpdate(nextProps, nextState) {if (isEqual(this.props, nextProps) && isEqual(this.state, nextState)) {return false;}return true;}render() {}
}const isEqual = (obj1, obj2) => {for (const key in obj1) {if (obj1[key] !== obj2[key]) {return false}}return true
}
效果等于:
import React, { PureComponent } from "react";export default class Task extends PureComponent {render() {}
}
2,什么是 memo
React.memo
是一个HOC,相当于给函数组件套了一个 PureComponent
,让函数组件也能进行优化。
// 大致原理:
import React, { PureComponent } from "react";function memo(funcComp) {return class Memo extends PureComponent {render() {return <>{funcComp(this.props)}</>}};
}
3,举例
一个展示列表的组件,逻辑很简单,结构如下:
-- TaskContainer-- TaskList-- Task-- TaskAdd(一个输入框,可以新增列表项)
TaskContainer(console.log("container render");
)
import React, { Component } from "react";
import TaskAdd from "./TaskAdd";
import TaskList from "./TaskList";export default class TaskContainer extends Component {state = {list: Array.from(new Array(10)).map((item, index) => `任务${index}`),};render() {console.log("container render");return (<div><TaskAddchangeList={(newTask) => {this.setState({list: [...this.state.list, newTask],});}}></TaskAdd><TaskList list={this.state.list}></TaskList></div>);}
}
TaskList(console.log("list render");
)
import React, { Component } from "react";
import Task from "./Task";export default class TaskList extends Component {render() {console.log("list render");return (<div>{(this.props.list || []).map((m) => (<Task name={m} key={m}></Task>))}</div>);}
}
TaskAdd(console.log("add render");
)
import React, { Component } from "react";export default class TaskAdd extends Component {state = {taskName: "",};render() {console.log("add render");return (<div><inputvalue={this.state.taskName}onChange={(e) => {this.setState({ taskName: e.target.value });}}></input><button onClick={() => this.props.changeList(this.state.taskName)}>添加任务</button></div>);}
}
Task(console.log("task render");
)
import React, { Component } from "react";export default class Task extends Component {render() {console.log("task render");return <div>{this.props.name}</div>;}
}
使用:
import React, { Component, Component } from "react";
import TaskContainer from "./components/Pure/TaskContainer";export default class App extends Component {render() {return <TaskContainer></TaskContainer>;}
}
初次渲染时,打印结果:
container render
add render
list render
10次 task render
添加一个列表项时,打印结果:
container render
add render
list render
11次 task render
3.2,优化1
当添加一个列表项时,已经被渲染的10个 task 不应该再次渲染,因为它们自身没有发生任何变化。只应该渲染新增的那一个即可。
此时就可以用到 PureComponent
:
export default class Task extends Component {}
// 替换为
export default class Task extends PureComponent {}
这时再添加一个列表项时,在打印结果可以看到 Task 只渲染了一次(新增的)。
container render
add render
list render
task render
3.1,优化2-函数位置
注意到新增列表时,TaskAdd
组件在点击按钮后,不应该再次渲染(不应该打印 add render
),因为它的状态和属性也没有发生变化。
也做下替换:
export default class TaskAdd extends Component {}
// 替换为
export default class TaskAdd extends PureComponent {}
发现结果并没有发生变化,add render
依旧会打印。
这时因为在 TaskContainer
中,给组件 TaskAdd
传递的属性 changeList
是直接写在组件上的。这样每次执行 TaskContainer.render()
时,都算作一个新的属性,所以 TaskAdd extends PureComponent
没有生效。
做以下替换即可:
export default class TaskContainer extends Component {render() {return (<div><TaskAddchangeList={(newTask) => {this.setState({list: [...this.state.list, newTask],});}}></TaskAdd></div>);}
}// 替换为
export default class TaskContainer extends Component {changeList = (newTask) => {this.setState({list: [...this.state.list, newTask],});};render() {return (<div><TaskAdd changeList={this.changeList}></TaskAdd></div>);}
}
4,注意点
4.1,为了提升效率,应该尽量使用 PureComponent
4.2,不要直接改变之前的状态,而是覆盖
旧的状态应该是不可变的(immutable),只能通过创建新状态来覆盖之前的状态。
举例,当使用 PureComponent
时,下面的代码不会更新数据。因为进行的是浅比较,此时数组地址相同。
this.state.task.push(xxx)
this.setState({task: this.state.task
})
换成下面的方式就可以了:产生了新数组。
this.setState({task: [...this.state.task, xxx]
})
// 或
this.setState({task: this.state.task.concat(xxx)
})
如果是对象的话:产生了新对象。
this.setState({obj: {...this.state.obj,b: xxx}
})
// 或
this.setState({obj: Object.assign({}, this.state.obj, {b: xxx})
})
4.3,为什么不进行深比较?
因为本来就是为了提升效率,减少 render
执行次数。深比较会比较费时,得不偿失。
以上。
这篇关于React@16.x(15)PureComponent 和 memo的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!