高阶组件应用-组件重新实例化
来源:互联网 发布:台灯 淘宝网 编辑:程序博客网 时间:2024/06/13 13:54
背景
在参与beisenCloud和pageBuilder的对接任务中,出现了这样一个问题:有两个组件同时关联了同一个属性组件,并且在constructor
和componentDidMount
内等做了一些初始化操作,当在这两个组件之间切换的时候,由于属性组件已经被首次render了,所以只进行了diff算法,并没有重新生成一个新的组件实例,从而导致了属性组件没有同步更新
方案
当然,我们可以在属性组件内添加componentWillReceiveProps
生命周期方法,通过nextProps
上的参数,将constructor
或者componentDidMount
内的初始化配置逻辑重新走一遍
然而,这涉及到一个问题:如果我们开发的很多属性组件,都有这个问题,那我们不得不在每个组件内部都实现一遍这样的逻辑,开发和维护的成本是很高的
在使用
componentWillReceiveProps
的时候,遇到一个问题需要注意下:在该方法之内,render之前调用的所有同步操作,通过this.props
访问到的props
都是旧的数据
优化
既然这逻辑是需要在多处复用的,那我们就需要将这部分逻辑抽离出来,放在高阶组件内完成,在需要的地方,通过该高阶组件装饰一下即可
该高阶组件接收一个条件方法,在
componentWillReceiveProps
生命周期方法中,将nextProps
和this.props
暴露给条件方法,通过返回值用来控制是否需要重新实例化Target
。
高阶组件内部代码实现如下
//高阶组件,解决属性组件不刷新的问题import React, { Component } from 'react'export default conditionalFun => Target => class Decorator extends Component{ constructor(props){ super(props) this.state = { 'newInstance': false } } componentWillReceiveProps (nextProps) { let result = conditionalFun(nextProps, this.props) if (result) { this.setState({ 'newInstance': true }) } else { this.setState({ 'newInstance': false }) } } render () { let { newInstance } = this.state; if (newInstance) { return <Target key={Date.now()} {...this.props}/>//添加key,绕过diff,重新生成新的实例 } return <Target {...this.props} /> }}
阅读全文
0 0
- 高阶组件应用-组件重新实例化
- React高阶组件应用
- React高阶组件应用
- Jmail组件应用实例
- ASP组件应用实例
- Swing 组件的应用实例
- 【应用组件:EventBus】实例演示
- ContentProvider应用组件实例记录
- React 高阶组件
- React高阶组件
- React高阶组件
- React高阶组件
- Vuejs 组件化开发tab组件实例
- 组件化应用构建
- React高阶组件探究
- React 高阶组件HOC
- React之高阶组件
- 重新注册所有组件
- 编程第八十一天
- iOS应用程序内购/内付费
- Nginx--Sorry, the page you are looking for is currently unavailable
- bzoj1514: [POI2006]ZAB-Frogs
- ES6之Module 的加载实现(1)
- 高阶组件应用-组件重新实例化
- 快速排序
- bzoj 4337: BJOI2015 树的同构 (树hash)
- 商城项目实战04:单机zookeeper
- nfs+Ngins练习
- 欢迎使用CSDN-markdown编辑器
- C#注册表读写完整操作类
- 走格子问题
- 【ACM刷题录】UVa10288 Coupons