分享几个上千的React开源库助你玩转React-阿里云开发者社区

分享几个上千的React开源库助你玩转React

2023-10-30 97

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 分享几个上千的React开源库助你玩转React

今天分享几个可以帮助大家更好的学习和使用React的上千⭐的库。

🚀 React学习库

💎 reactjs-interview-questions

git地址：https://github.com/sudheerj/reactjs-interview-questions

内容介绍：这个仓库介绍了300+个常见的面试问题，十分详细，目前7.4k的⭐

💎 React设计

git地址：https://github.com/SangKa/react-in-patterns-cn

内容介绍：一本完全免费的介绍React设计的电子书，目前1.2k的⭐

💎 React技巧

git地址：https://github.com/hateonion/react-bits-CN

内容介绍：讲解React使用技巧的开源电子书，英文原版15.5k的⭐

💎 React开发路线图

这个仓库罗列了一系列React开发需要学习的技能点，对于刚刚准备转码的小伙伴来说，还是十分推荐的。目前17k的⭐

💎 React+TypeScript备忘录

git地址：https://github.com/typescript-cheatsheets/react

内容介绍：如果你使用TypeScript开发React，那么这个仓库是值得一看的，它首先介绍了基础的ts开发介绍，另外还提供了高等进阶的一些方法，很实用，目前已经41.4k的⭐

🚀 React工具库

💎 beautiful-react-hooks

git地址：https://github.com/antonioru/beautiful-react-hooks

内容介绍：对React语法大刀阔斧改良的工具库，目前6.9k的⭐，语法上的改进使用起来十分舒适，其中一个状态钩子如下，如果你了解Svelte，那它的语法你肯定不会觉得陌生，和我上篇的分享不谋而合了。这仅仅是冰山一角，更多使用的工具函数可以去仓库中浏览下。

🤮是时候放弃useState了，🚀这么写React更丝滑🚀

import { Typography, Space, Button, Tag } from 'antd';
import useMutableState from 'beautiful-react-hooks/useMutableState';
const TestComponent = () => {
  const counter = useMutableState({ value: 0 });
  return (
    <DisplayDemo title="useMutableState">
      <Typography.Paragraph>
        Counter: <Tag color="green">{counter.value}</Tag>
      </Typography.Paragraph>
      <Space>
        <Button type="primary" onClick={() => counter.value += 1}>increase</Button>
        <Button type="primary" onClick={() => counter.value -= 1}>decrease</Button>
      </Space>
    </DisplayDemo>
  );
};

💎 hos

git地址：https://github.com/deepsweet/hocs

内容介绍：这是一个在recompose库（React成员开发的工具库）基础上利用React高阶组件功能开发的功能库，目前已经1.9k⭐了。

不过这个工具库仅仅是维护阶段，不会再开发新功能了。下面是一个有趣的例子，你一定看的懂这个功能。

import React from 'react';
import { compose, withState } from 'recompose';
import withLifecycle from '@hocs/with-lifecycle';
const Demo = ({ isLoading }) => (
  <h1>{ isLoading ? 'Loading' : 'Done' }</h1>
);
export default compose(
  withState('isLoading', 'setLoading', true),
  withLifecycle({
    onDidMount({ setLoading }) {
      setLoading(true, () => {
        setTimeout(() => setLoading(false), 3000);
      })
    },
    onReceiveProps(props, nextProps) {
      console.log(`isLoading: ${props.isLoading} → ${nextProps.isLoading}`);
    }
  })
)(Demo);

类似react-use、ahooks的工具库还有很多，这里只列举了两个特别的，希望可以帮你拓宽视野。

今天的分享就到这了，感谢各位的观看，如果你也有值得分享的库，评论区告诉我。

分享几个上千的React开源库助你玩转React