跳至主要內容

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

萌萌哒草头将军大约 2 分钟前端JavaScriptVue

theme: channing-cyan
highlight: atom-one-dark

文章同步在公众号：萌萌哒草头将军，欢迎关注。

今天分享几个上千⭐的库，助你玩转React学习和开发。

🚀 React学习库

💎 reactjs-interview-questions

git地址：https://github.com/sudheerj/reactjs-interview-questionsopen in new window

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

image.png
image.png

💎 React设计

git地址：https://github.com/SangKa/react-in-patterns-cnopen in new window

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

image.png
image.png

💎 React技巧

git地址：https://github.com/hateonion/react-bits-CNopen in new window

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

💎 React开发路线图

git地址：https://github.com/adam-golab/react-developer-roadmap/blob/master/roadmap-cn.pngopen in new window

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

image.png
image.png

💎 React+TypeScript备忘录

git地址：https://github.com/typescript-cheatsheets/reactopen in new window

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

🚀 React工具库

💎 beautiful-react-hooks

git地址：https://github.com/antonioru/beautiful-react-hooksopen in new window

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

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/hocsopen in new window

内容介绍：这是一个在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的工具库还有很多，这里只列举了两个特别的，希望可以帮你拓宽视野。

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

默认页脚
Copyright © 2024 萌萌哒草头将军