React高阶组件、Render props、hooks,他们分别是什么,有什么区别

1.高阶组件(HOC)是React中复用组件的一种高级技巧,高阶组件是一个函数,传入一个组件返回一个新组件,并且是一个纯函数没有副作用

2.render props 用于使用一个值为函数的 prop 在 React 组件之间的代码共享 简单来说就是是一个用于告知组件需要渲染什么内容的函数 prop

3.Hooks是一个新的React特性提案,组件尽量写成纯函数,如果需要外部React特性(比如状态管理,生命周期),就用钩子把外部特性"钩"进来,通常函数名字都是以use开头。首次在v16.7.0-alpha版本中添加,在v16.8.0中正式发布。

hooks优点:使用直观;

解决hoc的prop 重名问题;

解决render props 因共享数据 而出现嵌套地狱的问题;

能在return之外使用数据的问题。

总结:相同点是他们都是为了解决代码复用的问题,但是高阶组件(HOC)和read props都有特定的使用场景和明显的缺点,而hooks让组件的复用更加简洁明了,同时也解决了hoc的prop覆盖的问题,同时使用的方式解决了render props的嵌套地狱的问题

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容