javascript - 关于react的高阶组件和redux
PHPz
PHPz 2017-04-11 12:03:26
[JavaScript讨论组]

最近在学习一个react教程的时候,他提到了react高阶组件的方法,学着感觉有点懵,但是之前用过redux,感觉使用redux也可以完成这个方法,想问的是在一般的场景里,是自己写一个react高阶组件,还是使用redux呢?

举个例子:
我觉得像这种高阶组件,完全就可以使用redux的connect来完成

PHPz
PHPz

学习是最好的投资!

全部回复(2)
高洛峰

我想你可以先理解这两种技术的使用情境与目的,这会比较清楚。

高阶组件(HOC)只是一种样式,主要的目的是要让原本的组件扩充出其它功能,例如添加生命周期的一些代码等等。当然我说的比较简单,还有其它的目的例如组件的重覆利用等等,可以参考这篇博客中的说明。

Redux本身就有使用高阶组件(HOC)的样式,可以看到的是用在react-redux这个绑定器中,connect方法在这里面提供。但Redux的目的是管控整个应用中的状态,与高阶组件的目的不同,两者无法混为一谈。

如果你的目的只是要扩充组件,那就使用HOC样式是直觉的,但HOC是有细部的问题的,目前已知道的经过HOC的组件,原本组件中的静态方法会消失。这是其中一个解决方式: hoist-non-react-statics

如果你的目的是要管控整个应用领域的状态,就用Redux之类的Flux框架,HOC只是Redux使用的其中一个样式,它还有一些其它的样式,各自有不同的目题。

黄舟

Redux的connect就是高阶组件,只不过它的传参只能是它规定的数据格式而已。像你图中的这个例子,用Redux的connect应该是实现不了的。两者其实是一个概念,connect是为Redux设计的高级组件,你也可以为你的使用场景设计合适的高阶组件。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号