极乐门资源网

详解React中共享组件逻辑的三种方式
网络编程 2024/11/15 佚名
2 0
极乐门资源网 Design By www.ioogu.com

废话少说，这三种方式分别是：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 "htmlcode">



const Loading = () => {
 // loading动画
}
const DataList = ({ isLoading, ...props }) => {
 return isLoading "htmlcode">



const WithLoading = (WrappedComponent) => {
 return ({isLoading, ...props}) => {
  return isLoading "htmlcode">



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 "htmlcode">



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,共享组件逻辑,React,,组件逻辑

                                     

                                
极乐门资源网 Design By www.ioogu.com
极乐门资源网 免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
极乐门资源网 Design By www.ioogu.com

评论“详解React中共享组件逻辑的三种方式”

暂无详解React中共享组件逻辑的三种方式的评论...
www.ioogu.com 极乐门资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
极乐门资源网 Design By www.ioogu.com