符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
小编给大家分享一下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实现自定义生命周期有了一定的了解,想了解更多相关知识,欢迎关注创新互联行业资讯频道,感谢各位的阅读!