13518219792
小编给大家分享一下JavaScrip如何t实现自定义生命周期，希望大家阅读完这篇文章后大所收获，下面让我们一起去探讨吧！
10多年的龙沙网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整龙沙建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联公司从事“龙沙网站设计”,“龙沙网站推广”以来，每个客户项目都认真落实执行。
React，Vue 和 Angular 的流行，让“生命周期”这个名词常常出现在前端们的口中，以至于面试中最常见的一个问题也是：
介绍下React, Vue的生命周期以及使用方法?
听起来高大上的“生命周期”，其实也就是一些普通的方法，只是在不同的时期传参调用它们而已。我们可以照着React的生命周期，自己模拟一个简单的类，并让这个类拥有一些生命周期钩子
我们希望实现一个State类，这个类拥有以下方法和生命周期：
方法：
setState
生命周期:
willStateUpdate (nextState): 状态将要改变
shouldStateUpdate (nextState): 是否要让状态改变，只有返回true才会改变状态
didStateUpdate (prevState): 状态改变后（要是 shouldStateUpdate 返回的不为true则不会调用）
class User extends State {
constructor(name) {
super();
this.state = { name }
}
willStateUpdate(nextState) {
console.log('willStateUpdate', nextState);
}
shouldStateUpdate(nextState) {
console.log('shouldStateUpdate', nextState);
if (nextState.name === this.state.name) {
return false;
}
return true;
}
didStateUpdate(prevState) {
console.log('didStateUpdate', prevState);
}
}
const user = new User('deepred');
user.setState({ name: 'hentai' });首先，你需要知道JavaScript的面向对象基础知识，如果还不是很了解，可以先看下这篇文章JavaScript的面向对象
class State {
constructor() {
this.state = {};
}
setState(nextState) {
const preState = this.state;
this.state = {
...preState,
...nextState,
};
}
}class User extends State {
constructor(name) {
super();
this.state = {
name
}
}
}
const user = new User('tc');
user.setState({age: 10}); // {name: 'tc', age: 10}在React中，setState方法只会改变特定属性的值，因此，我们需要在方法里用一个变量preState保留之前的state，然后通过展开运算符，将新旧state合并
willStateUpdate的实现
willStateUpdate是state状态更新前调用的。因此只要在合并state前调用willStateUpdate就行
class State {
constructor() {
this.state = {};
}
setState(nextState) {
// 更新前调用willStateUpdate
this.willStateUpdate(nextState);
const preState = this.state;
this.state = {
...preState,
...nextState,
};
}
willStateUpdate() {
// 默认啥也不做
}
}class User extends State {
constructor(name) {
super();
this.state = {
name
}
}
// 覆盖父级同名方法
willStateUpdate(nextState) {
console.log('willStateUpdate', nextState);
}
}
const user = new User('tc');
user.setState({age: 10}); // {name: 'tc', age: 10}shouldStateUpdate的实现
我们规定只有shouldStateUpdate返回true时，才更新state。因此在合并state前，还要调用shouldStateUpdate
class State {
constructor() {
this.state = {};
}
setState(nextState) {
this.willStateUpdate(nextState);
const update = this.shouldStateUpdate(nextState);
if (update) {
const preState = this.state;
this.state = {
...preState,
...nextState,
};
}
}
willStateUpdate() {
// 默认啥也不做
}
shouldStateUpdate() {
// 默认返回true，一直都是更新
return true;
}
}class User extends State {
constructor(name) {
super();
this.state = {
name
}
}
// 覆盖父级同名方法
willStateUpdate(nextState) {
console.log('willStateUpdate', nextState);
}
// 自定义何时更新
shouldStateUpdate(nextState) {
if (nextState.name === this.state.name) {
return false;
}
return true;
}
}
const user = new User('tc');
user.setState({ age: 10 }); // {name: 'tc', age: 10}
user.setState({ name: 'tc', age: 11 }); // 没有更新didStateUpdate的实现
懂了willStateUpdate也就知道didStateUpdate如何实现了
class State {
constructor() {
this.state = {};
}
setState(nextState) {
this.willStateUpdate(nextState);
const update = this.shouldStateUpdate(nextState);
if (update) {
const preState = this.state;
this.state = {
...preState,
...nextState,
};
this.didStateUpdate(preState);
}
}
willStateUpdate() {
// 默认啥也不做
}
didStateUpdate() {
// 默认啥也不做
}
shouldStateUpdate() {
// 默认返回true，一直都是更新
return true;
}
}class User extends State {
constructor(name) {
super();
this.state = {
name
}
}
// 覆盖父级同名方法
willStateUpdate(nextState) {
console.log('willStateUpdate', nextState);
}
// 覆盖父级同名方法
didStateUpdate(preState) {
console.log('didStateUpdate', preState);
}
shouldStateUpdate(nextState) {
console.log('shouldStateUpdate', nextState);
if (nextState.name === this.state.name) {
return false;
}
return true;
}
}
const user = new User('tc');
user.setState({ age: 10 });
user.setState({ name: 'tc', age: 11 });通过几十行的代码，我们就已经实现了一个自带生命周期的State类了!
看完了这篇文章，相信你对JavaScrip如何t实现自定义生命周期有了一定的了解，想了解更多相关知识，欢迎关注创新互联行业资讯频道，感谢各位的阅读！
