详解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 相关文章推荐
jquery获取input表单值的代码
Apr 19 Javascript
图片延迟加载的实现代码(模仿懒惰)
Mar 29 Javascript
javascript跨浏览器的属性判断方法
Mar 16 Javascript
js日期联动示例
May 02 Javascript
JavaScript必知必会(九)function 说起 闭包问题
Jun 08 Javascript
JavaScript新增样式规则(推荐)
Jul 19 Javascript
jQuery实现联动下拉列表查询框
Jan 04 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
Dec 19 jQuery
js实现每日签到功能
Nov 29 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
用JS实现选项卡
Mar 23 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
php中利用post传递字符串重定向的实现代码
2011/04/21 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
Linux系统下php获得系统分区信息的方法
2015/03/30 PHP
phpstudy后门rce批量利用脚本的实现
2019/12/12 PHP
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
jquery里的each使用方法详解
2010/12/22 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
详解jQuery中ajax.load()方法
2017/01/25 Javascript
jQuery插件echarts实现的单折线图效果示例【附demo源码下载】
2017/03/04 Javascript
js中的DOM模拟购物车功能
2017/03/22 Javascript
基于JavaScript实现前端数据多条件筛选功能
2020/08/19 Javascript
Vue toFixed保留两位小数的3种方式
2020/10/23 Javascript
在Python中操作时间之tzset()方法的使用教程
2015/05/22 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
对pandas里的loc并列条件索引的实例讲解
2018/11/15 Python
Python 中Django验证码功能的实现代码
2019/06/20 Python
python实现超市商品销售管理系统
2019/11/22 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
美国婚礼和派对礼品网站:Kate Aspen(新娘送礼会、迎婴派对)
2018/03/28 全球购物
采用冷却技术的超自然舒适度:GhostBed床垫
2018/09/18 全球购物
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
护理实习自我鉴定
2013/12/14 职场文书
机关党建工作汇报材料
2014/08/20 职场文书
党员教师批评与自我批评发言稿
2014/10/15 职场文书
出生证明格式
2015/06/15 职场文书
毕业设计工作总结
2015/08/14 职场文书
《牧场之国》教学反思
2016/02/22 职场文书
2016年妇联“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
tensorboard 可视化之localhost:6006不显示的解决方案
2021/05/22 Python
Redis 的查询很快的原因解析及Redis 如何保证查询的高效
2022/03/16 Redis
【海涛七七解说】DCG第二周:DK VS 天禄
2022/04/01 DOTA