这篇文章给大家分享的是有关react中hoc有什么用的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
HOC是react中对组件逻辑复用部分进行抽离的高级技术,但HOC并不是一个React API,它是一个方法,一个接收一个组件作为参数,返回一个增强的组件的方法。
HOC(High Order Component) 是 react
中对组件逻辑复用部分进行抽离的高级技术,但HOC并不是一个 React API
。 它只是一种设计模式,类似于装饰器模式。
具体而言,HOC就是一个函数,且该函数接受一个组件作为参数,并返回一个新组件。
从结果论来说,HOC相当于 Vue
中的 mixins(混合)
。其实 React
之前的策略也是采用 mixins
,但是后来 facebook
意识到 mixins
产生的问题要比带来的价值大,所以移除了 mixins
。 想要了解更多
来看个例子
import React, { Component } from 'react'class Page1 extends Component{ componentWillMount(){ let data = localStorage.getItem('data') this.setState({ data }) } render() { return ( <h3>{this.state.data}</h3> ) } } export default Page1
这个例子中在组件挂载前需要在 localStorage
中取出 data
的值,但当其他组件也需要从 localStorage
中取出同样的数据进行展示的话,每个组件都需要重新写一遍 componentWillMount
的代码,那就会显得非常冗余。那么在 Vue
中通常我们采用:
mixins: []
但是在 React
中我们需要采用HOC模式咯
import React, { Component } from 'react' const withStorage = WrappedComponent => { return class extends Component{ componentWillMount() { let data = localStorage.getItem('data') this.setState({ data }) } render() { return <WrappedComponent data={this.state.data} {...this.props} /> } } } export default withStorage
当我们构建好一个HOC之后,我们使用的时候就简单多了,还看最开始的例子,我们就不需要写 componentWillMount
了。
import React, { Component } from 'react' import withStorage from '@/utils/withStorage' class Page1 extends Component{ render() { return <h3>{this.props.data}</h3> } } export default withStorage(Page1)
很明显,这是一个装饰器模式,那么就可以使用ES7形式
import React, { Component } from 'react' import withStorage from '@/utils/withStorage' @withStorage class Page1 extends Component{ render() { return <h3>{this.props.data}</h3> } } export default Page1
操纵 props
通过 ref 访问组件实例
组件状态提升
用其他元素包装组件
1,命名
把被包装的组件名称也包到HOC的显示名称中。
2,时机
不要在组件的 render
方法中使用HOC,尽量也不要在组件的其他生命周期中使用HOC。因为调用HOC的时候每次都会返回一个新的组件,于是每次render,前一次高阶组件创建的组件都会被卸载(unmount),然后重新挂载(mount)本次创建的新组件,既影响效率又丢失了组件及其子组件的状态。
3,静态方法
如果需要使用被包装组件的静态方法,那么就需要手动复制这些静态方法,因为HOC返回的新组建不包含被包装组件的静态方法。
4,ref
不会被传递给被包装组件
高阶组件属于函数式编程(functional programming)思想,对于被包裹的组件时不会感知到高阶组件的存在,而高阶组件返回的组件会在原来的组件之上具有功能增强的效果。而Mixin这种混入的模式,会给组件不断增加新的方法和属性,组件本身不仅可以感知,甚至需要做相关的处理(例如命名冲突、状态维护),一旦混入的模块变多时,整个组件就变的难以维护,也就是为什么如此多的React库都采用高阶组件的方式进行开发。
感谢各位的阅读!关于react中hoc有什么用就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。