7 个小型且被低估的 React 库

作者：寻码网1号程序员
链接：https://www.zhihu.com/question/430464640/answer/2876379501
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

今天我们来说说 React。但与 React.js 概念、最佳实践等无关。今天我将分享我喜欢使用并且你可能会喜欢的7 个小型且被低估的 React 库。当然，你可能已经知道其中的一些。1️⃣ React Testing Library<img src="https://picx.zhimg.com/50/v2-a9a79d4bd54c32ec1e467e71c27a9eab_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="800" data-rawheight="450" class="origin_image zh-lightbox-thumb" width="800" data-original="https://pic1.zhimg.com/v2-a9a79d4bd54c32ec1e467e71c27a9eab_r.jpg?source=1940ef5c"/>它是一个轻量级的测试库，可以让测试 React 组件变得非常容易。哦，它还提供了一个简单直观的 API 来测试它们，使过程更加简单！它旨在与 Jest 一起使用，Jest 是一种流行的 React 测试框架。与往常一样，这里有一个使用它的代码示例：import { render, screen } from '@testing-library/react';
import App from './App';

test('renders learn react link', () => {
render(<App />);
const linkElement = screen.getByText(/learn react/i);
expect(linkElement).toBeInTheDocument();
});2️⃣ React Hook Form<img src="https://picx.zhimg.com/50/v2-eccbb6d4f7d651e051dc584fe823e7dc_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="800" data-rawheight="420" class="origin_image zh-lightbox-thumb" width="800" data-original="https://pica.zhimg.com/v2-eccbb6d4f7d651e051dc584fe823e7dc_r.jpg?source=1940ef5c"/>这是一个非常容易在 React 中处理表单状态的库。它提供了一个简单的 API 来处理表单状态和验证，并且它是使用 React hooks构建的。另一个优点是体积小，效率高！（它也适用于 React Native）import { useForm } from 'react-hook-form';

const App = () => {
const { register, handleSubmit, errors } = useForm();
const onSubmit = (data) => { console.log(data) };

return (
<form onSubmit={handleSubmit(onSubmit)}>
<input name="firstName" ref={register({ required: true })} />
{errors.firstName && 'First name is required'}
<input name="lastName" ref={register({ required: true })} />
{errors.lastName && 'Last name is required'}
<button type="submit">Submit</button>
</form>
);
};3️⃣React Scroll<img src="https://pic1.zhimg.com/50/v2-5bc4e42ce8bc00be5b7bde000ed699ef_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="800" data-rawheight="533" class="origin_image zh-lightbox-thumb" width="800" data-original="https://pic1.zhimg.com/v2-5bc4e42ce8bc00be5b7bde000ed699ef_r.jpg?source=1940ef5c"/>看名称就知道，该库用于滚动。基本上，它有助于在 React 应用程序中实现平滑滚动。它提供了一个简单的 API（但有很多可选设置）并且是轻量级的。import { Link, animateScroll as scroll } from 'react-scroll';

const App = () => (
<div>
<Link to="section1" spy={true} smooth={true} duration={500}>
Section 1
</Link>
<Link to="section2" spy={true} smooth={true} duration={500}>
Section 2
</Link>
<div id="section1">Section 1</div>
<div id="section2">Section 2</div>
</div>
);4️⃣ React Transition Group<img src="https://picx.zhimg.com/50/v2-7860d95075cd3360251b629ed8ebf496_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="800" data-rawheight="450" class="origin_image zh-lightbox-thumb" width="800" data-original="https://pic1.zhimg.com/v2-7860d95075cd3360251b629ed8ebf496_r.jpg?source=1940ef5c"/>这个是用来实现动画的。如果您需要快速简单的动画，我建议使用这个库。import { CSSTransition, TransitionGroup } from 'react-transition-group';

const App = () => (
<TransitionGroup>
<CSSTransition key={item.id} timeout={300} classNames="fade">
<div>Item</div>
</CSSTransition>
</TransitionGroup>
);5️⃣ React Lazy Load Image Component<img src="https://pica.zhimg.com/50/v2-ac978c982fbfd34ea28a2d830a19f325_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="800" data-rawheight="260" class="origin_image zh-lightbox-thumb" width="800" data-original="https://picx.zhimg.com/v2-ac978c982fbfd34ea28a2d830a19f325_r.jpg?source=1940ef5c"/>这个已经在标题中说明了它的作用，但是，它有助于在 React 应用程序中实现图像的延迟加载。它可以通过仅在需要时加载图像来帮助提高您网站的性能。快捷方便。import React from 'react';
import { LazyLoadImage } from 'react-lazy-load-image-component';

const MyImage = ({ image }) => (
<div>
<LazyLoadImage
alt={image.alt}
height={image.height}
src={image.src} // use normal <img> attributes as props
width={image.width} />
<span>{image.caption}</span>
</div>
);

export default MyImage;6️⃣ React Easy Edit<img src="https://picx.zhimg.com/50/v2-cb8f84a0d8a714e270d810e2163a143b_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="800" data-rawheight="400" class="origin_image zh-lightbox-thumb" width="800" data-original="https://picx.zhimg.com/v2-cb8f84a0d8a714e270d810e2163a143b_r.jpg?source=1940ef5c"/>现在我们有一个库，你可能极少数特定情况下使用它，但是，嘿，知道总是好的！它是一个用于在 React中实现内联编辑的库。它真的很容易使用。import React, { Component } from 'react';
import EasyEdit from 'react-easy-edit';

function App() {

const save = (value) => {alert(value)}
const cancel = () => {alert("Cancelled")}

return (
<EasyEdit
type="text"
onSave={save}
onCancel={cancel}
saveButtonLabel="Save Me"
cancelButtonLabel="Cancel Me"
attributes={{ name: "awesome-input", id: 1}}
instructions="Star this repo!"
/>
);
}7️⃣ React Beautiful Dnd<img src="https://pica.zhimg.com/50/v2-2d1cd130c88c361d666813cb6756f57c_720w.jpg?source=1940ef5c" data-caption="" data-size="normal" data-rawwidth="879" data-rawheight="305" class="origin_image zh-lightbox-thumb" width="879" data-original="https://picx.zhimg.com/v2-2d1cd130c88c361d666813cb6756f57c_r.jpg?source=1940ef5c"/>表单拖拽库，非常实用，你可以点击下面示例查看！没有代码示例，因为最好在此处检查所有示例。发布于 2023-02-04 17:19・IP 属地广东