详解React中共享组件逻辑的三种方式
废话少说,这三种方式分别是:render props、高阶组件和自定义Hook。下面依次演示
假设有一个TimeOnPage组件专门用来记录用户在当前页面停留时间,像这样:
const TimeOnPage = () => { const [second, setSecond] = useState(0); useEffect(() => { setTimeout(() => { setSecond(second + 1); }, 1000); }, [second]); return ( <div>停留时间:{second}秒</div> ); }
如果另一个组件需要复用这个功能,我们能否封装一下,以便轻松地与其它组件共享?
一般很自然地想到子组件嵌套的方式,利用props传参
const Child = (props) => { return <div>stayTime: {props.stayTime}s</div>; }; const TimeOnPage = () => { const [second, setSecond] = useState(0); useEffect(() => { setTimeout(() => { setSecond(second + 1); }, 1000); }, [second]); return ( <div> <Child stayTime={second} /> </div> ); }
这属于在 TimeOnPage组件内部硬编码,还没有达到封装复用的目标。看看render props怎么做?
render props
“render prop” 是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术
接上文,在TimeOnPage里定义一个值为函数的prop,想渲染什么组件,在函数里返回即可,函数的参数就是想要共享的state。
const Child = (props) => { return <div>stayTime: {props.stayTime}s</div>; }; const TimeOnPage = (props) => { const [second, setSecond] = useState(0); useEffect(() => { setTimeout(() => { setSecond(second + 1); }, 1000); }, [second]); return <div>{props.render(second)}</div>; }; <TimeOnPage render={(stayTime) => <Child stayTime={stayTime} />
其实,render prop 就是一个用于告知组件需要渲染什么内容的函数prop。
React Router也用到了这项技术。
<Router> <Route path="/home" render={() => <div>Home</div>} /> </Router>
高阶组件
高阶组件(HOC)是 React 中用于复用组件逻辑的一种高级技巧。HOC 自身不是 React API 的一部分,它是一种基于 React 的组合特性而形成的设计模式。
高阶组件是一个函数,参数是一个需要被复用的组件A,返回值是一个新的组件N。新组件N是在组件A的基础上做了一些加工,但不会修改组件A本身,只是功能增强。
假设有一个新闻列表组件长这样:
const NewList = () => { return ( <div> <ul> <li>news item</li> <li>news item</li> </ul> </div> ); }
想要在新闻列表加载期间显示loading动画组件 <Loading />,通常会这么做
const Loading = () => { // loading动画 } const NewList = ({ isLoading }) => { return isLoading ? ( <Loading /> ) : ( <div> <ul> <li>news item</li> <li>news item</li> </ul> </div> ); };
假设现在Table组件也要在加载数据期间显示loading动画组件,遵循类似的模式
const Loading = () => { // loading动画 } const DataList = ({ isLoading, ...props }) => { return isLoading ? ( <Loading /> ) : ( <Table {...props} /> ); };
以上,你会发现DataList和NewList结构极度相似,如果还有第三个、第四个组件要加loading,继续照这个模式重复第三次、第四次吗?这不是最理想的做法,更好的做法是,使用高阶组件把这个模式抽象出来:
const WithLoading = (WrappedComponent) => { return ({isLoading, ...props}) => { return isLoading ? <Loading /> : <WrappedComponent {...props} />; } };
然后就可以在不修改NewList和DataList的情况下分别给他们增加loading
const NewList = () => { return ( <div> <ul> <li>news item</li> <li>news item</li> </ul> </div> ); }; const DataList = (props) => { return <Table {...props} /> }; const WithLoading = (WrappedComponent) => { return ({isLoading, ...props}) => { return isLoading ? <Loading /> : <WrappedComponent {...props} />; } }; // 带loading的NewList const WithLoadingNewList = WithLoading(<NewList />) // 带loading的DataList const WithLoadingDataList = WithLoading(<DataList />)
自定义Hook
Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。
React Hook有useState、useEffect等,它们都是函数,自定义Hook也是一个函数,它的名称同样以use开头,函数内部可以调用其它Hook。与React组件不同的是,自定义Hook可以没有返回值。与普通函数不同的是,自定义Hook内部可以调用其它Hook,而普通函数则不行。
在写业务逻辑过程中,一般会将一些可重用的的方法定义成工具函数,然后就可以到处复用。同样,通过自定义 Hook,可以将组件逻辑提取到可重用的函数中。到底选择自定义Hook还是工具函数,取决于要提取的组件逻辑需不需要用到其他Hook,如果需要,就选择自定义Hook,否则用工具函数即可。
回到本文第一个 TimeOnPage组件,改成自定义Hook的形式
const useTimeOnPage = () => { const [second, setSecond] = useState(0); useEffect(() => { setTimeout(() => { setSecond(second + 1); }, 1000); }, [second]); return second; }
使用方法
const Demo = () => { const stayTime = useTimeOnPage(); return <div>当前页面停留时间:{stayTime}秒</div> }
总结
三种共享组件逻辑的方式有各自的适用场景:
render props适合共享那些有不同子组件/子元素的父组件,子组件/子元素的“坑位”已经定义好了,只能渲染在指定位置;
高阶组件适合在不修改原有组件的基础上对组件进行扩展;
自定义Hook能做的,纯函数基本上也能做,只是有时候用自定义Hook实现会更方便快捷。
本文链接:Github
到此这篇关于详解React中共享组件逻辑的三种方式的文章就介绍到这了,更多相关React 共享组件逻辑内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误(解决方案)
这篇文章主要介绍了关于React Native报Cannot initialize a parameter of type'NSArray<id<RCTBridgeModule>>错误,本文给大家分享解决方案,需要的朋友可以参考下...2021-05-12React引入antd-mobile+postcss搭建移动端
本文给大家分享React引入antd-mobile+postcss搭建移动端的详细流程,文末给大家分享我的一些经验记录使用antd-mobile时发现我之前配置的postcss失效了,防止大家踩坑,特此把解决方案分享到脚本之家平台,需要的朋友参考下吧...2021-06-21- 这篇文章主要介绍了React使用高德地图的实现示例(react-amap),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
使用 React 和 Threejs 创建一个VR全景项目的过程详解
这篇文章主要介绍了使用 React 和 Threejs 创建一个VR全景项目的过程详解,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06- 思路其实没有那么复杂,把地图想成一个盒子容器,地图中心点想成盒子中心点;扎点在【地图中心点】不会动,当移动地图时,去获取【地图中心点】经纬度,设置某个位置的时候,将经纬度设置为【地图中心点】即可...2021-06-20
- 这篇文章主要为大家详细介绍了React列表栏及购物车组件使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-06-28
- 这篇文章主要介绍了react使用antd表单赋值,用于修改弹框的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-10-29
- 这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程(安卓部分)为例,给大家分析 React Native 的启动流程,需要的朋友可以参考下...2021-08-18
- 这篇文章主要介绍了一百多行代码实现react拖拽hooks,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-21
- useState 通过在函数组件里调用它来给组件添加一些内部 state,React 会在重复渲染时保留这个 state,接下来通过一个示例来看看怎么使用 useState吧...2021-06-04
- 今天小编就为大家分享一篇pytorch动态网络以及权重共享实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-04-29
- 这篇文章主要介绍了React中使用setInterval函数的实例,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-04-06
- 高阶组件就是接受一个组件作为参数并返回一个新组件(功能增强的组件)的函数。这里需要注意高阶组件是一个函数,并不是组件,这一点一定要注意,本文给大家分享React 高阶组件HOC使用小结,一起看看吧...2021-06-13
- 这篇文章主要介绍了React Class组件生命周期,包括react组件的两种定义方式和class组件不同阶段生命周期函数执行顺序,本文给大家介绍的非常详细,需要的朋友可以参考下...2021-08-14
- 本文主要介绍了react为什么不推荐使用index作为key,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-07-22
- 这篇文章主要为大家详细介绍了javascript跨域资源共享的相关资料,感兴趣的朋友可以参考一下...2016-07-06
- 本篇文章主要介绍了React组件通信详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-10-15
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题,是小编给大家总结的一些react知识点,本文通过一个项目需求实例代码详解给大家介绍的非常详细,需要的朋友可以参考下...2021-06-02- 这篇文章主要介绍了React中组件之间通信的方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-07-27
- 这篇文章主要介绍了react自动化构建路由的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-23