译文最新React库实用技巧收录

　　原文翻译自：https://www.robinwieruch.de/react-libraries，作者：ROBIN WIERUCH。
　　如有翻译不准确，请多指正！
　　React框架面世已经有一段时间了，从应用到现在围绕组件驱动的库已经发展成了一个非常全面的生态系统。但是对于长期使用其他编程语言或框架的开发人员来说，完全弄清React的构建模块，并且用这个框架去进行web应用程序开发并不是一件容易的事。
　　使用Angular框架时，程序员们往往习惯于掌握使用所有必须的功能，但是React并不要求程序员们如此，补充库有更多发挥的空间。React这一点对于程序员来说是好还是坏因人而异，看个人的使用习惯与思考方式。但是对于我来说，当我切换框架使用React之后，感觉这点带来很大的便利。
　　首先React只支持开发者利用功能组件和道具来进行用户界面的构建，而这个用户界面正是依靠组建驱动。但有一点好处，就是React带有一些内置解决方案。例如，用于本地状态和副作用的ReactHooks，也大可不必担心只可以在本地状态下操作，因为其他的地方你也用不上。
　　而这个补充库十分庞大，如何选择素材构建React应用程序成为一个难题。但是不用担心，下面这篇文章将给大家带来一些有根据的建议，大家可以参考参考，也可以在下方留言我们一起交流哦。
　　01
　　如何入门React
　　对于所有React框架的初学者来说，首先疑惑的就是进入react之后如何创建一个react项目。而react针对这个问题为入门者配备了很多项目，每一个项目满足用户不同的需求，而使用者可以根据自己的需要进行任意选择。目前react社区配备有Facebook提供的CRA，而CRA带有零配置设置，可让用户以最低限度的方式启动和运行React应用程序。另外因为所有的工具都是隐藏在界面之中的，所以用户可以根据自己的需求将部分功能拖拽到界面。如果您已经熟悉React，你可以自由选择Next.js和Gatsby.js这两个流行工具包中的一个。这两个框架都建立在React之上， Next.js用于服务器端渲染（例如动态Web应用程序），而Gatsby.js用于静态网站生成（例如博客，登陆页面），二者有不同的功能作用，但是要使用二者之中的任意一个，都要求你对react的基础知识有一定的掌握。如果你只是想了解这些入门工具包的工作原理，你可以尝试从设置React项目开始。但是首先你要从使用JavaScript和HTML开始，之后再添加带有支持工具的React。如果您想选择一个自定义样板项目，那么你就不要期望这个项目可以解决所有问题满足所有需求，而你真正要做的是尽量缩小样板体量，使项目有针对性的解决主要问题。 就像gatsby-firebase-authentication样板中＂ only＂在Gatsby.js应用程序中只提供了Firebase的完整身份验证机制，而对于其他问题基本上是忽略的。
　　建议：
　　1.create-react-app是为React初学者/高级创建
　　2.Gatsby.js用于React中静态网站
　　3.React中的Next.js用于服务器端
　　4.了解底层工具可以通过定制React项目
　　02
　　React状态管理
　　React带有用来管理本地状态的hooks，例如：useState、useReducer、useContext。这些hooks可以用于react中复杂的本地状态管理。不仅如此，你还可以利用它们来模拟制作react中的流行状态状态管理库Redux。
　　同时React中的所有内置hooks都非常适合本地状态管理。这里有几个使用建议，在进行远程数据的状态管理时，如果远程数据带有GraphQL端点，那么建议使用ApolloClient，而Apollo客户端的替代方案则推荐urql和Relay。
　　如果远程数据不是来自GraphQL端点，可以尝试使用React的Hooks对其进行管理。如果无法解决问题，则可以使用Redux或MobX/ Mobx状态树之类的解决方案。如果以上情况你都无法满足，可以翻阅react教程看＂全面状态管理＂章节。
　　建议：
　　1.本地状态时可以使用React的useState，useReducer，useContextHooks内置hooks进行管理
　　2.通过GraphQL的远程状态可以使用Apollo客户端管理
　　3.通过REST进行远程状态可以使用ReactHooks或Redux/ MobX / Mobx状态树进行管理。
　　03
　　用ReactRouter解决路由问题
　　路由在React应用程序中起着重要作用，因为React在帮助实现实现单页应用程序时需要路由维护好客户端。但是引入复杂的路由器时，React只有少数几种路由解决方案，最值得期待的解决方案是ReactRouter。
　　当你正处于react入门阶段，而恰巧正要在应用程序中引用一个略显笨重的路由时，你可以考虑尝试react条件渲染，它不是路由的合理替代，但在小型应用程序中，以这种方式交换组件通常就足够了。
　　建议：
　　使用ReactRouter解决方案
　　04
　　React——样式库
　　关于React中的样式多种多样，大家也有不同的使用意见。而对于React初学者来说，从内联样式和CSS开始就很好了：
　　在React中用JavaScript以动态或者编程方式添加样式时，可以考虑使用内联样式外部CSS文件可以为你在react应用程序中保留剩余样式。另外随着你的应用程序增长，相应的样式选择也会更多。
　　首先，我们建议你将CSS模块作为许多CSS-in-CSS解决方案之一进行研究。CSS模块受create-react-app支持，并为用户提供了一种将CSS封装到模块中的方法。这样，它不会意外泄漏到其他React组件的样式中。尽管用户的应用程序的某些部分仍可以共享样式，但其他部分不用访问它。而在React中，CSS模块通常是共同放置在用户React组件文件中的CSS文件。
　　其次，我们向大家推荐样式化组件，样式化组建是React中许多CSS-in-JS解决方案中的一个。之所以叫做样式化组建，是因为这种方法通过叫做＂样式组件的库＂提供，该库将样式与JavaScript一起放置在React组件旁边：
　　最后，向大家推荐TailwindCSS作为功能性CSS解决方案：
　　而无论你是使用CSS-in-CSS,CSS-in-JS, 还是功能性CSS这都取决于你自己，但不管哪一种解决方案，都可以在较大的react应用程序中进行相应的扩展。
　　建议：
　　CSS-in-CSS与CSS模块
　　具有样式化组件的CSS-in-JS
　　带有TailwindCSS的功能CSS
　　05
　　React——UI库
　　当你不想从头开始构建所有必需的ReactUI组件，可以选择一个ReactUI库来完成这项工作。它们都带有一些基本组件，例如按钮，下拉菜单，对话框和列表。
　　同时ReactUI库并不唯一，可以有很多种选择：
　　AntDesign
　　ChakraUI
　　TailwindUI
　　SemanticUI
　　MaterialUI
　　ReactBootstrap
　　06
　　React——动画效果
　　Web应用程序中的任何动画均以CSS开始，但最终你会发现CSS动画不足以满足需求。这时，开发人员会使用ReactTransition Group，这使他们可以使用React组件执行动画。
　　React的其他知名动画库有：
　　react-motion
　　react-spring
　　FramerMotion
　　Animated（ReactNative）
　　建议：
　　ReactTransition Group
　　07
　　React——可视化和图表库
　　如果你真的想自己从头开始构建图表，那么无法绕开D3。这是一个底层的可视化库，可以为大家提供创建令人惊叹的图表所需要的一切。抛开去学习D3的弯路，开发人员选择了一个React图表库，图表库可以为用户提供很多便利，提高效率。下面是一些流行的解决方案：
　　Nivo
　　Victory
　　react-vis
　　Recharts
　　ChartParts
　　08
　　React——表单库
　　React中最受欢迎的表单库是Formik。它包含从验证到提交再到表单状态管理所需要的一切。同时这里还有一种替代方法：ReactHook Form。当你进行更复杂的表单处理时，这两个都是React应用程序有效的解决方案。
　　建议：
　　Formik
　　ReactHook Form
　　09
　　React——数据读取库
　　之后，你可能面临向远程API发出请求，以在React中获取数据的情况。而现代浏览器则随附本机访存API来执行异步数据请求，基本上，你不必添加任何其他库即可完成这项工作。
　　当然这里还存在仅仅作为提供复杂的异步请求而存在的库。这些库具有强大的功能，但还是适用于体量小（轻量级）的应用程序。而当你的应用程序体量增大时，你可以使用其中一种叫做axios的库，用它使用它代替本机获取API。
　　当然如果你愿意使用GraphQLAPI，也可以使用ApolloClient。替代的GraphQL客户端可以是urql或Relay。
　　建议：
　　thebrowser＂s native fetch API
　　axios
　　ApolloClient
　　10
　　React——检查
　　幸运的是React自带检查功能——PropTypes，用这个工具可以定义React组件中传入的props。程序运行时，如果有任何错误样式输入组件，用户都能够收到通知出现错误输入的信息。但是这种类型的样式检查同样有规模限制，只能用于体量较小的应用程序。
　　因此在一个体量较大的React程序中，我们可以选择 TypeScript,而不是PropTypes进行检查，因为Typescript为整个应用程序增加了一层样式安全保护。相对于在运行之中才能发现错误的PropTypes,Typescript可以在开发过程中就通报错误。对于可以阻止这种样式检查的BUG，开发者也不用再特意去运行程序进行检查。这种方式的检查也许可以提高用户的开发体验，也可以避免开发者在一开始就引入错误。
　　建议：
　　TypeScript
　　11
　　React——代码风格
　　进行代码风格选择时要遵循共识，这里有以下三种选择建议：
　　第一种：遵循社区所接受的风格指南。由Airbnb开源的React风格指南就是最近流行社区的其中一个。即便你没有刻意遵循这样的风格指南，也应该阅读一下以获取React中常见代码样式的要点。
　　第二种方法：运用一些诸如ESLint的小程序。样式指南只会给你提供建议，但是这种小程序可以帮助你将建议应用在程序中。举个例子，在进行程序设计时你可以要求遵循流行的Airbnb风格指南，这个时侯IDE/编辑器自然而然会指出实际运行中的所有错误。
　　第三种方法最受欢迎：运用Prettier，这是一个代码格式化程序。你可以将其集成到编辑器或IDE中用于保存文件时的代码格式化。可能这种程序进行的格式化并不符合你的口味，但是至少你不必再过多操心自己或团队代码库中的代码风格。同时尽管Prettier不能代替ESLint，但是两者可以进行集成使用。
　　建议：
　　ESLint
　　Prettier
　　12
　　React——认证
　　在更大的React应用程序中，你可能希望引入带有注册，登录和注销功能的身份验证。另外，经常需要密码重置和密码更改功能。这些功能不在React范围之内，你可以依靠后端应用程序处理这些事情。
　　而常见的方法是使用自定义身份验证来实现自己的自定义后端应用程序，如果您不想使用自己的身份验证，可以考虑使用Passport.js之类的东西。
　　但是如果你不考虑后端的话，可以选择以下三种方法：
　　Firebase
　　Auth0
　　AWSCognito
　　另外如果你还想寻求一种集身份验证+数据库的多合一解决方案，可以考虑坚持使用Firebase或者AWS。
　　建议：
　　DIY:Custom Backend
　　Getit off the shelf: Firebase
　　13
　　React——托管
　　你可以像其他任何Web应用程序一样部署和托管React应用程序。但如果要完全控制，可以选择＂DigitalOcean＂。而如果你想要由其他东西来处理所有事情，那么可以选择Netlify这个解决方案。
　　另外如果你已经在使用第三方身份验证或者是数据库（例如Firebase），则可以检查他们是否也提供托管（例如Firebase托管）服务，同时你还可以将S3的静态站点托管与Cloudfront一起使用。
　　14
　　React——测试
　　想要深度了解React中的测试，你可以从学习如何在React中测试组件开始。首先我们要明白测试React应用程序的主干是Jest。它具备断言库、spying、mocking、stubbing功能，同时还有全面的测试框架所需要的一切。
　　至少也可以使用react-test-renderer在Jest测试中渲染React组件，这也已经足够用来执行所谓的＂带有Jest的快照测试＂。
　　快照测试的工作方式如下：运行测试后，将创建React组件中渲染DOM元素的快照。当你在某个时间点再次运行测试时，将创建另一个快照，这个快照用来和前一快照进行差异对比。如果差异不相同，Jest会发出讯息，这时你要么必须接受快照，要么更改组件的实现方式。
　　最终，你会发现自己使用了Enzyme或ReactTesting Library（它们也都在Jest测试环境中使用），以获得更详尽的测试功能集。这两个库都可以渲染组件并模拟HTML元素上的事件。之后，可以将Jest用于DOM节点上的断言。
　　而如果您正在寻找用于React端到端（E2E）测试的测试工具，Cypress是最受欢迎的选择。
　　建议：
　　Unit/Integration/SnapshotTests: Jest + React Testing Library
　　E2ETests: Cypress
　　15
　　React——实用程序库
　　JavaScript提供了许多内置功能来处理数组，对象，数字，对象和字符串。React中最常用的JavaScript内置功能之一是内置的map（）数组。这是因为你必须始终在组件中呈现出一个项目列表。由于JSX是HTML和JavaScript的混合体，因此您可以使用JavaScript映射数组并返回JSX。使用React可以轻松创建列表组件：
　　但是，您可能会不得不选择一个实用程序库，这个实用程序库可以给你提供更详尽的功能。因为在链接这些实用程序功能甚至是将它们动态地彼此组合在一起时，你可能希望这个操作可以变得更灵活一些，而这时就是你引入实用程序库Lodash或Ramda的最佳时机。
　　对于每个JavaScript开发人员来说，Lodash是最扎实的库，而在函数式编程开始发挥作用时，Ramda显示具有强大的内核，两者各有其突出的地方。但遗憾的是，尽管JavaScript给大家提供了很多现成的功能，但实际上现如今使用实用程序库的必要性已经降低了。
　　建议：
　　JavaScript
　　Lodash
　　16
　　React与不可变的数据结构
　　原生JS提供了许多内置工具来处理数据结构，使其不可变。然而如果你和你的团队需要实施不变性的数据结构时，可以选择这个工具。同时Immer还可以与redux或reacthooks结合使用。虽然我个人不使用它，但是一旦涉及到JS的不变性，这个工具都会被提及，具有一定的作用价值。
　　17
　　React——国际化
　　当涉及到React应用程序的国际化（i18n国际化(internationalization)的简称，之所以叫i18n，是因为字母i和n之间有18个字母，所以才叫i18n）时，您不仅需要考虑翻译，还需要考虑多元化，日期和货币格式以及其他的一些事情。以下是处理这些问题最受欢迎的库：
　　react-i18next
　　react-intl
　　LinguiJS
　　FBT
　　建议：
　　react-i18next
　　18
　　React——富文本编辑器
　　为大家推荐两个我已经使用过的React之中的富文本编辑器：
　　Draft.js
　　Slate
　　19
　　React——付款方式
　　像在其他任何Web应用程序中一样，最常见的支付方式是Stripe和PayPal。两者都可以整齐地集成到React中使用，成为React集成下的有效支付方式：
　　PayPal
　　StripeElements或者StripeCheckout
　　20
　　React——时间
　　如果你的React应用程序需要处理许多日期和时区，你可以选择引入一个库帮助处理，而最受欢迎的库是moment.js。或者是另一种更轻巧的替代方法date-fns和Day.js。
　　21
　　React——桌面应用程序
　　Electron是跨平台桌面应用程序的首选框架，但是除此之外你还有其他选择，比如：
　　NW.js
　　Neutralino.js
　　22
　　用React进行移动开发
　　我猜想将React从电脑端引入移动设备的首选解决方案仍然是ReactNative。如果你是要创建Web应用程序的ReactNative开发人员，那么你应该对ReactNative Web进行确认。
　　23
　　React——VR/AR
　　React用于潜入虚拟现实或增强现实中具备可操作性。而涉及到React中的AR/ VR时，我首先想到的就是这几个库，虽然我还没有使用过它们，但大家有需要的话可以试试：
　　React360
　　react-viro
　　react-native-arkit
　　24
　　用React编写文档
　　如果你正在为你的软件编写文档或者是UI库以及其他的一些东西，那么这里有几个推荐的React文档工具，比如我用过的感觉很不错的Storybook，还有就是：
　　Styleguidist
　　docz
　　Docusaurus
　　最后我想总结的是：React生态系统可以看作是React的框架，但是仍然具有一定的灵活性。这种灵活性体现在：
　　你可以在这个框架中任意添加你所需要的库。当然也可以从小项目开始，仅仅添加为你解决特点问题的库。同时你也可以在应用程序体量扩展的过程中拓展你的构建基块。
　　另一方面你也可以使用普通的React来保持轻量级。最后，我们有根据的再次为大家列出一些库，这些库可以针对不同规模的项目，对作为应用程序核心的React进行一定的补充。同时，我们也非常希望收到大家的反馈，欢迎大家积极留言哦。
　　小型应用程序：
　　Boilerplate:create-react-app
　　StylingLibraries: basic CSS and inline style
　　AsynchronousRequests: fetch or axios
　　CodeStyle: none
　　TypeChecking: none
　　StateManagement: React Hooks
　　Routing:none or React Router
　　Authentication:Firebase
　　Database:Firebase
　　UILibraries: none
　　FormLibraries: none
　　TestingLibraries: Jest
　　UtilityLibraries: JavaScript
　　Internationalizing:react-i18next
　　ReactDesktop: Electron
　　MediumApplication
　　Boilerplate:Next.js or Gatsby.js
　　StylingLibraries: CSS Modules or Styled Components
　　AsynchronousRequests: fetch or axios
　　CodeStyle: Prettier, ESLint
　　TypeChecking: none or TypeScript
　　StateManagement: React Hooks and/or Apollo
　　Routing:React Router
　　Authentication:Firebase
　　Database:Firebase
　　UILibraries: none or UI component library
　　FormLibraries: none or Formik or React Hook Form
　　TestingLibraries: Jest with React Testing Library
　　UtilityLibraries: JavaScript
　　Internationalizing:react-i18next
　　ReactDesktop: Electron
　　大型应用程序：
　　Boilerplate:Next.js, Gatsby.js, custom setup
　　StylingLibraries: CSS Modules or Styled Components
　　AsynchronousRequests: axios or Apollo Client
　　CodeStyle: Prettier, ESLint
　　TypeChecking: TypeScript
　　StateManagement: React Hooks and/or Apollo/Redux/MobX
　　Routing:React Router
　　Authentication:Solution with own Node.js Server + Passport.js
　　Database:Solution with own Node.js Server with a SQL/NoSQL DB
　　UILibraries: UI component library or roll your own UI components
　　FormLibraries: none or Formik or React Hook Form
　　TestingLibraries: Jest with React Testing Library and Cypress
　　UtilityLibraries: JavaScript Platform APIs, Lodash
　　Internationalizing:react-i18next
　　ReactDesktop: Electron
　　Theprevious recommendations are opinionated. You can choose your ownflexible framework for your ideal React application. Every ＂ideal＂React setup is subjective to its needs of the developers and project.After all, there is no ideal React application setup.
　　我们之前的建议是有一定的根据和针对性的。而每一个开发者和项目都对 React应用程序有着不同的需求，在设置上也会有不同的要求，因此没有最理想的React应用程序设置，只有最适合的。所以你可以为自己心中理想的React应用程序选择一个合适的灵活的框架，而不必拘泥于其他。