React组件复用逻辑
最新回答
咱想幵了
2023-12-31 16:44:05
高阶组件是参数为组件，返回值为新组件的函数
高阶组件（HOC）是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分，它是一种基于 React 的组合特性而形成的设计模式
解决问题：组件复用；
主要事项： 高阶组件的调用，不要在render方法中去调用 const enhancer = Hoc(<Cmp />) ,因为每次执行生成enhance都不一样，react在协调过程中去反复挂载卸载浪费性能，其次就是状态的丢失。
务必要复制被包装组件的静态方法：
解决方案：
1.返回之前务必把静态方法拷贝到目标容器上
2.另一个可行的方案是再额外导出这个静态方法
缺点并不会转发Ref：
可以使用React.forwardRef进行传递：
二、render props
1、什么是render prop：
具有render prop的组件接收一个函数，该函数返回一个React元素并调用它而不是实现自己的渲染逻辑；
2、render prop要解决的问题：
render prop 是一个用于告知组件需要渲染什么内容的函数prop；
使用 render prop 的库有 React Router 、 Downshift 以及 Formik 。
如果想看更具体的实例请移步至 官方实例 看完之后再回到这里：
render prop是因为模式才被称为render prop而不是一定要用名称为render的prop；事实上任何用于告知组件需要渲染什么内容的函数prop在技术上都可以被称为render prop
3、带render prop的常规组件可以实现大部分的高阶组件(Hoc)
4、 注意事项：render prop与React.PureComponent之间的问题：
如果在render里创建函数，那么在使用render prop的时候可能会抵消React.PureComponent带来的收益;这是因为浅比较props的时候总会得到false，每一个render对于render prop都会生成一个新值；
解决方案是定义一个prop作为实例方法：
三、自定义HOOK
热门标签
