详解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 相关文章推荐
JavaScript延迟加载
Mar 09 Javascript
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
弹出层之1:JQuery.Boxy (一) 使用介绍
Oct 06 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
JavaScript实现当网页加载完成后执行指定函数的方法
Mar 21 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
Web开发必知Javascript技巧大全
Feb 23 Javascript
JS实现的系统调色板完整实例
Dec 21 Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 Javascript
详解javascript中var与ES6规范中let、const区别与用法
Jan 11 Javascript
JS实现烟花爆炸效果
Mar 10 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
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
PHP的mysqli_sqlstate()函数讲解
2019/01/23 PHP
laravel 实现登陆后返回登陆前的页面方法
2019/10/03 PHP
增强的 JavaScript 的 trim 函数的代码
2007/08/13 Javascript
JavaScript 乱码问题
2009/08/06 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
Javascript 类与静态类的实现(续)
2010/04/02 Javascript
javascript 闭包疑问
2010/12/30 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
常用原生JS兼容性写法汇总
2016/04/27 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
JavaScript刷新页面的几种方法总结
2019/03/28 Javascript
Python判断变量是否为Json格式的字符串示例
2017/05/03 Python
Python3.7实现中控考勤机自动连接
2018/08/28 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
Python +Selenium解决图片验证码登录或注册问题(推荐)
2020/02/09 Python
Python基于pyecharts实现关联图绘制
2020/03/27 Python
Django 实现 Websocket 广播、点对点发送消息的代码
2020/06/03 Python
详解Anaconda安装tensorflow报错问题解决方法
2020/11/01 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
python可视化分析的实现(matplotlib、seaborn、ggplot2)
2021/02/03 Python
python实现图片转字符画
2021/02/19 Python
Pytorch - TORCH.NN.INIT 参数初始化的操作
2021/02/27 Python
高中毕业生生活的自我评价
2013/12/08 职场文书
2014年党员公开承诺书范文
2014/03/28 职场文书
倡议书格式范文
2014/04/14 职场文书
倡议书范文格式
2014/05/12 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
2015年学校教研室主任工作总结
2015/07/20 职场文书
公司仓库管理制度
2015/08/04 职场文书
授权协议书范本(3篇)
2019/10/15 职场文书
js之ajax文件上传
2021/05/13 Javascript
Java循环队列与非循环队列的区别总结
2021/06/22 Java/Android