反应中特别有什么用

这篇文章给大家分享的是有关反应中特别有什么用的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

的是反应中对组件逻辑复用部分进行抽离的高级技术,但特殊并不是一个反应API,它是一个方法,一个接收一个组件作为参数,返回一个增强的组件的方法。

<强>什么?什么是临时

的(高阶组件)是<代码> 反应中对组件逻辑复用部分进行抽离的高级技术,但特殊并不是一个<代码>反应API>

具体而言,特别就是一个函数,且该函数接受一个组件作为参数,并返回一个新组件。

从结果论来说,特殊相当于Vue 中<代码>的<代码> mixin(混合)> 之反应前的策略也是采用<代码> mixin> 意识到<代码> mixin 产生的问题要比带来的价值大,所以移除了<代码> mixin>

<强>为什么?为什么使用的

来看个例子

import 反应,,{,Component },得到& # 39;反应# 39;class  Page1  extends 组件{ 　　componentWillMount才能(){ 　　,,,let  data =, localStorage.getItem(& # 39;数据# 39;),,,,this.setState ({}, data ) 　　,,} 　　 　　渲染才能(),{,,,return  ( 　　,,,,,& lt; h3> {this.state.data} & lt;/h3> 　　,,,) 　　,,} 　　}, 　　 　　export  default 所述

这个例子中在组件挂载前需要在<代码> localStorage> 数据的值,但当其他组件也需要从本地文件<代码> 中取出同样的数据进行展示的话,每个组件都需要重新写一遍<代码> componentWillMount> <代码>中通常我们采用:

mixin:, []

但是在<代码> 中反应我们需要采用的模式咯

import 反应,,{,Component },得到& # 39;反应# 39; 　　 　　const  withStorage =, WrappedComponent =祝辞,{ 　　return 才能;class  extends 组件{ 　　,,,componentWillMount (), { 　　,,,,,let  data =, localStorage.getItem(& # 39;数据# 39;) 　　,,,,,this.setState ({}, data ) 　　,,,} 　　 　　,,,渲染(),{ 　　,,,,,return  & lt; WrappedComponent 数据=https://www.yisu.com/zixun/{this.state.data}{…这个。道具}/> 　　} 　　} 　　} 　　 　　出口默认withStorage

当我们构建好一个特殊之后,我们使用的时候就简单多了,还看最开始的例子,我们就不需要写<代码> componentWillMount> import 反应,,{,Component },得到& # 39;反应# 39; 　　import  withStorage 得到& # 39;@/跑龙套withStorage& # 39; 　　 　　{class  Page1  extends 组件 　　渲染才能(),{ 　　,,,return  & lt; h3> {this.props.data} & lt;/h3> 　　,,} 　　} 　　 　　export  default  withStorage (Page1)

很明显,这是一个装饰器模式,那么就可以使用ES7形式

import 反应,,{,Component },得到& # 39;反应# 39; 　　import  withStorage 得到& # 39;@/跑龙套withStorage& # 39; 　　 　　@withStorage 　　{class  Page1  extends 组件 　　渲染才能(),{ 　　,,,return  & lt; h3> {this.props.data} & lt;/h3> 　　,,} 　　} 　　 　　export  default 所述

<强>如何?怎么使用的

<李>

操纵道具

<李>

通过ref访问组件实例

<李>

组件状态提升

<李>

用其他元素包装组件

提示注意事项

1,命名
把被包装的组件名称也包到特殊的显示名称中。
2时机
不要在组件的<代码> 渲染方法中使用的,尽量也不要在组件的其他生命周期中使用的。因为调用特殊的时候每次都会返回一个新的组件,于是每次渲染,前一次高阶组件创建的组件都会被卸载(卸载),然后重新挂载(山)本次创建的新组件,既影响效率又丢失了组件及其子组件的状态。
3,静态方法
如果需要使用被包装组件的静态方法,那么就需要手动复制这些静态方法,因为特殊返回的新组建不包含被包装组件的静态方法。

反应中特别有什么用