4个库使React开发人员的工作更加轻松

在本文中，我将讨论四个使您的生活更轻松的库。 至少我希望如此

1）纳米

Github链接
这是一个只有一个功能的小型图书馆-生成唯一的ID。 在许多情况下，它可能很有用，就像其他随机字符序列生成器一样。 无可争议的优势：简单且体积很小-143字节 。

当然，如果使用例如lodash，则可以使用uniqueId（）方法。
使用尽可能简单：

import nanoid from 'nanoid' size = 8 id = nanoid(size) //cjF38yYc 

UPD：
切勿使用nanoid（）在ReactJS中使用键索引列表或任何其他重复元素。 因为如果使用此方法，则每次更新React组件时，它将认为所有元素都是新元素，并将重新渲染它们，这将对性能产生非常不利的影响，并且通常与key的含义矛盾。

有关密钥的更多信息： reactjs.org/docs/lists-and-keys.html#keys
有关密钥的更多详细信息： habr.com/company/hh/blog/352150

Nanoid使用率极低的一个例子：

 import nanoid from 'nanoid' import React from 'react' const ListDrinks = props=>{ const drinks = ['rum','bear','vodka'] return( <ul> {drinks.map((values)=>{ //   ! return( <li key={nanoid(8)}>{values}</li> ) })} </ul> ) } export default ListDrinks 

正常使用nanoid的示例：

 import React, { Component } from 'react'; import nanoid from 'nanoid' class InputWithLabel extends Component { constructor(props){ super(props) this.id = nanoid() } render() { return ( <div> <label htmlFor={this.id}>My label</label> <input id={this.id} type="text"/> </div> ); } } export default InputWithLabel; 

我在评论中向好人学习了如何做，他们是分开的，非常感谢！

2）类名

Github链接
该库用于类名称的简单条件联合。 使用它并不比以前的库困难得多。

简单使用示例：

 import cn from 'classnames' cn('menu','active')//'menu active' let isActive = true cn('menu',{'active':isActive})//'menu active' isActive = false cn('menu',{'active':isActive})//'menu' 

对我个人而言，任何React应用程序都需要该库。 当然，直到我找到一个更方便的工具。

3）Formik和Yup

链接到github（Formik）
链接到github（是）
在谈论简化React中的某些事情时，您不禁提及使用表单。 大概每个初学者React开发人员都了解他讨厌使用表单的方式。 一旦有了这种了解，就值得立即寻找挽救药。

对我来说，这种药是福米克和尤普。

Formik是一个可帮助您处理表单的库。 它使从表单中检索数据，验证数据，显示错误消息等变得容易。

Yup是一个库，它是我们自己使用Yup创建的模型的验证器。

为了对这一堆内容进行较为完整的描述，需要单独撰写一篇文章，但我将尝试从鸟瞰中展示它们的含义。

可以在此处运行示例代码：

首先，创建一个图：

 import * as Yup from "yup"; const BasicFormSchema = Yup.object().shape({ email: Yup.string() //,   . // ,      .email("Invalid email address") // ,     .required("Required"), username: Yup.string() //  - 2  .min(2, "Must be longer than 2 characters") //  - 20  .max(20, "Nice try, nobody has a first name that long") .required("Required"), password: Yup.string() .min(8, "Must be longer than 8 characters") .required("Required") }); export default BasicFormSchema; 

在上面的代码中，我们定义了一个电路，该电路本质上是一个对象。 它具有三个字段：电子邮件，用户名和密码。 我们为每个字段确定了一些检查。

<Formik />元素是使用Formik的一种方法，它具有许多不同的属性，其中之一是render 。

 import React from "react"; import { Formik, Field, Form } from "formik"; import BasicFormSchema from "./BasicFormShema"; const SignUp = () => ( <div className="container"> <h1>Sign up</h1> <Formik //  input- initialValues={{ email: "", username: "", password: "" }} //  ,    validationSchema={BasicFormSchema} //,      onsubmit onSubmit={values => { setTimeout(() => { alert(JSON.stringify(values, null, 2)); }, 500); }} //,     //errors-   //touched- ,   "", // ,   -  render={({ errors, touched }) => ( <Form className="form-container"> <label htmlFor="email">Email</label> <Field name="email" placeholder="mtarasov777@gmail.com" type="email" /> {//       //   ",    errors.email && touched.email && <div className="field-error">{errors.email}</div>} <label htmlFor="username">Username</label> <Field name="username" placeholder="snapoak" type="text" /> {errors.username && touched.username && ( <div className="field-error">{errors.username}</div> )} <label htmlFor="password">Password</label> <Field name="password" placeholder="123456qwe" type="password" /> {errors.password && touched.password && ( <div className="field-error">{errors.password}</div> )} <button type="submit">Submit</button> </Form> )} /> </div> ); export default SignUp; 

代码很简单，我为其提供了注释，因此我认为应该没有问题。
如果它们出现了，那么GitHub存储库将提供出色的文档，您也可以在评论中提出问题。

到此为止。 我知道有许多出色的库可以处理表单，在您看来有些最好，有些最差。 我在这里表达了我的个人看法。

希望本文能对任何人有所帮助。 您可以在注释中编写有用的库示例，我将很高兴学习新知识。