微信授权扫码点餐-新特性React16

首先，需要对静态方法做一个理解。static静态方法，在es5中怎么实现呢？网易云课堂微信授权扫码点餐-新特性React16
function Person() {}
Person.getCount = function () {}
以上就是static静态方法的原理。由于“this”只能获取属性是根据原型链，而静态方法不在原型链上，所以，在组件实例内无通过this调用static方法，static方法也无法根据"this"调用实例的其他方法。
就防止在getDerivedStateFromProps 对组件实例的错误操作。
再次，getDerivedStateFromProps用来做什么用呢？
当组件实例化、接收到新的props时，会调用该方法。方法返回一个对象，这个对象会被更新到组件的state上。如果返回空，那么不对state做更新。

// 以下代码实现，更新name属性到state上；
static getDerivedStateFromProps (nextProps, prevState) {return {name: nextProps.name};
}// 上面的代码在以前版本中
// 你可能会用以下这样做，虽然这样做看起来也没问题，用上面的方法更加安全，不会对this做误操作
componentWillReceiveProps (nextProps) {if (this.state.name !== nextProps.name) {this.setState({name: nextProps.name});}
}

b.如何理解getSnapshotBeforeUpdate(prevProps, prevState)？

首先，从字面来理解“snapshot”是快照的意思。在dom更前之前调用。返回的值将被传给componentDidUpdate(prevProps, prevState, snaphot)。
这个会比较少用到，但对于处理比如数据更新后的滚动条的差异滚动，对用户体验，很有帮助。

c.如何理解componentDidCatch(error, info)？

以往，当组件发生错误（可以用throw new Error模拟）时，会导致整个react程序死掉，这对于程序的稳定性来说非常不好。
componentDidCatch可以捕获子组件中任何一个错误，捕获到错误后可以对错误进行处理。
如果发生错误的组件的父组件没有设置componentDidCatch错误捕获，将继续递归父组件的父组件中的componentDidCatch，找到则停止。

// 简单的错误捕获
componentDidCatch (error, info) {this.setState({error: true});
}render () {if (this.state.error) {return <div>子组件发生异常了</div>}// 其他代码
}

第二：优化了哪些语法

1: ref优化

ref有很多作用，通过ref父组件可以调用子组件内的方法，配合ReactDOM.findDOMNode(ref) 可以获取到组件对应的dom。ref与key一样无法通过this.props.ref获取；

以前版本的react，给子组件添加ref=“inputName”，就可以通过this.refs['inputName']获取子组件实例。然后可以进行一些操作。

React16中有两种创建Ref的方法：

constructor () {this.inputNameRef = React.createRef();this.switchRef = React.createRef();
}render () {// 通过this.inputNameRef.current 可以获取到input实例return (<div><input ref={this.inputNameRef} /><Switch ref={this.switchRef} /></div>)
}

render () {// 通过回调ref的方式实现// 通过this.inputNameRef 可以获取到input实例// this.switchRef可以获取Switch的实例return (<div><input ref={(ref) => this.inputNameRef = ref} /><Switch ref={(ref) => this.switchRef = ref} /></div>)
}

那，既然ref和key可以一样不能用this.props获取，有没有办法传给子组件呢？这样就可以实现在组件中调用子子组件（比如子组件中的input）了。

答案是肯定的。

也有两种方法：

render () {// 假设this.switchRef已经在constructor里创建了，那么可以通过其他属性传递。// 在子组件中可以通过this.props.forRef。// 注：forRef 为随便名只要不是react内置的名称就行return (<Switch forRef={this.switchRef} />);
}

// 通过React.forwardRef 传递
export default React.forwardRef((props, ref) => {return (<div><OtherChild /><Switch ref={ref} /><OtherChild2 /></div>)
});

微信授权扫码点餐-新特性React16相关推荐

监听网页微信扫码支付成功_网付扫码点餐新福利，消费者点餐可获微信支付金币奖励...
扫码点餐相信大家都不陌生,即能餐饮解决商家人力物力投入成本痛点,又能方便消费者点餐.现今已成为了餐饮商户的标配系统.近两年,很多系统厂商都在试水扫码点餐领域.尤其是聚合支付服务商,拥有得天独厚的优势. ...
2021年新微信小程序开发系统源码易客多小程序saas系统扫码点餐小程序支付宝小程序快速生成系统源码源代码
2021年新微信小程序开发系统源码小程序saas系统扫码点餐小程序支付宝小程序快速生成系统产品介绍:易客多多合一小程序快速生成系统是厦门四六开科技有限公司开发的快速开发微信百度支付宝小程序生成系统, ...
Java后台微信点餐小程序开发最新版笔记，Springboot+Mysql+Freemarker+Bootstrap+微信小程序实现扫码点餐小程序，包含语音提示，微信消息推送，网页管理后台
由于之前的Java后台微信点餐小程序有些知识点过时了,所以今天重新出一版,把里面过时的知识点更新下前五章是部署笔记,后面是知识点的详细讲解,大家可以先看部署笔记,部署起来后,再跟着详细知识学习. 第 ...
手把手带你开发一款云开发版点餐小程序，微信扫码点餐，店铺地图导航，外卖小程序，用户端和后厨端都有
从今天开始带领大家实现一款云开发版的点餐小程序视频讲解:<云开发后台+微信扫码点餐小程序+cms网页管理后台> 技术选型 1,前端微信小程序原生框架 css JavaScript 2, ...
微信扫码点餐小程序springboot外卖点餐系统源码和论文
开发工具: 后端:idea 用户端:微信开发者工具数据库 :mysql5.7+ 技术:java springboot mybatis 微信原生技术角色: 管理员多商家用户 ...
微信扫码点餐系统制作流程简单，方便客户下单
扫码点餐,对于餐饮行业来说,是必不可少的重要的一环,它可以帮助顾客点餐.顾客通过微信扫码,就可以获取到菜单,查看菜品的图片以及优惠活动,操作十分简单,而且效率比传统菜单要好很多. 对于新手来说,不会制 ...
微信扫码点餐小程序制作简单，功能齐全
扫码点餐,对于餐饮行业来说,是必不可少的重要的一环,它可以帮助顾客点餐.顾客通过微信扫码,就可以获取到菜单,查看菜品的图片以及优惠活动,操作十分简单,而且效率比传统菜单要好很多. 对于新手来说,不会制 ...
android简单点餐系统_微信点餐和扫码点餐系统能为商家带来什么？
近几年来,我们去餐厅吃饭的时候可能会发现,很多餐厅都安装扫码点餐系统.和微信点餐系统,相比传统餐饮软件及传统模式,这带来的不只是节省人工.一套系统稳定.功能齐全的微信点餐系统,对餐饮管理而言,能够降低 ...
微信扫码点餐小程序怎么做，一步步教你
在当今数字化时代,更多的餐厅开始使用扫码点餐系统.这种系统可以提高顾客的点餐效率,减少服务员的工作负担.如果你也想要在你的餐厅中使用扫码点餐系统,那么你来对地方了. 第一步:搭建微信小程序后台在微信 ...

微信授权扫码点餐-新特性React16

第二：优化了哪些语法

微信授权扫码点餐-新特性React16相关推荐

最新文章

热门文章