详解React中共享组件逻辑的三种方式


Posted in Javascript onFebruary 02, 2021

废话少说,这三种方式分别是: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 共享组件逻辑内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
javascript 设置文本框中焦点的位置
Nov 20 Javascript
JSP跨iframe如何传递参数实现代码
Sep 21 Javascript
Sort()函数的多种用法
Mar 20 Javascript
Javascript单例模式的介绍和实例
Oct 08 Javascript
理解javascript中的闭包
Jan 11 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
微信小程序-getUserInfo回调的实例详解
Oct 27 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
vue-自定义组件传值的实例讲解
Sep 18 Javascript
html5调用摄像头截图功能
Jan 18 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 #Javascript
学习 Vue.js 遇到的那些坑
Feb 02 #Vue.js
Vue常用API、高级API的相关总结
Feb 02 #Vue.js
JavaScript实现点击自制菜单效果
Feb 02 #Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 #Vue.js
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 #Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 #Vue.js
You might like
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
Smarty分页实现方法完整实例
2016/05/11 PHP
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
JS关键字变色实现思路及代码
2013/02/21 Javascript
基于jquery实现控制经纬度显示地图与卫星
2013/05/20 Javascript
javascript与jquery中跳出循环的区别总结
2013/11/04 Javascript
js中switch case循环实例代码
2013/12/30 Javascript
为jquery的ajaxfileupload增加附加参数的方法
2014/03/04 Javascript
浅谈JavaScript异常处理语句
2015/06/26 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
浅谈关于.vue文件中style的scoped属性
2017/08/19 Javascript
详解基于Angular4+ server render(服务端渲染)开发教程
2017/08/28 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
解决基于 keep-alive 的后台多级路由缓存问题
2020/12/23 Javascript
[17:13]DOTA2 HEROS教学视频教你分分钟做大人-斯拉克
2014/06/13 DOTA
Python判断文件和文件夹是否存在的方法
2015/05/21 Python
在Python中移动目录结构的方法
2016/01/31 Python
Python input函数使用实例解析
2019/11/22 Python
Python实现常见的几种加密算法(MD5,SHA-1,HMAC,DES/AES,RSA和ECC)
2020/05/09 Python
Python日志处理模块logging用法解析
2020/05/19 Python
pycharm 2020.2.4 pip install Flask 报错 Error:Non-zero exit code的问题
2020/12/04 Python
详解Python遍历列表时删除元素的正确做法
2021/01/07 Python
HTML5移动端开发遇见的东西
2019/10/11 HTML / CSS
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
LINUX下线程,GDI类的解释
2016/12/14 面试题
大学活动邀请函
2014/01/28 职场文书
致百米运动员广播稿
2014/01/29 职场文书
购房协议书范本
2014/04/11 职场文书
蓝颜请假条
2014/04/11 职场文书
考研导师推荐信范文
2015/03/27 职场文书
团队拓展训练感想
2015/08/07 职场文书
同学联谊会邀请函
2019/06/24 职场文书
Nginx反向代理学习实例教程
2021/10/24 Servers
分享几个实用的CSS代码块
2022/06/10 HTML / CSS