2020年你应该知道的React库_0

React已经诞生很久了。自诞生以来，围绕组件驱动已经形成了非常完善的生态，但是来自其他编程语言或框架的开发者很难找到一种方式构建一个React系统的所有组件。如果您是来自Angular这样的框架的开发人员，您可能已经习惯了包含您需要的所有功能的框架，而React的核心并不包含所有可选库。这是优点还是缺点取决于您。当我从Angular切换到React时，我确实体验到了它作为React的优势。只有使用React，您才能使用功能组件和道具构建组件驱动的用户界面。它带有一些内置的解决方案，例如用于本地状态和副作用的ReactHooks。以下文章将为您提供一些自包含的方法来从互补库中进行选择以构建一个综合的React应用程序。如何开始使用React如果您是React的新手并且想创建一个React项目，请加入React的世界。有许多套件项目可供选择，每个项目都试图满足不同的需求。React社区的当前状态是通过Facebook的create-react-app(CRA)。它提供了一个零配置设置，并为您提供了一个易于启动和运行的开箱即用的React应用程序。所有工具都对您隐藏，但最终由您来更改它们。如果您已经熟悉React，则可以选择其流行的入门工具包之一：Next.js和Gatsby.js。这两个框架都建立在React之上，因此您应该已经熟悉React的基础知识。Next.js用于服务器端渲染（例如动态Web应用程序），而Gatsby.js用于静态站点生成（例如博客、登陆页面）。如果您只想了解这些入门工具包的工作原理，请尝试从头开始设置React项目。您将从一个基本的HTML和JavaScript项目开始，然后自己添加React及其支持工具。如果您想选择自定义样板项目，请尝试缩小您的要求。样板应该是最小的，不要试图解决所有问题。它应该可以解决您的问题。例如，gatsby-Firebase-authentication样板文件仅在Gatsby.js中为您提供了完整的Firebase身份验证机制，但其他所有内容都被忽略了。建议：create-react-appforReactbeginners/advancedGatsby.jsforstaticwebsitesinReactNext.jsforserver-siderenderedReactcustomReactprojecttounderstandtheunderlyingtoolsReactstatemanagementReact自带hooks来管理本地状态：useState、useReducer和useContext。所有这些都可以在React中用于复杂的本地状态管理。它甚至可以模拟Redux（Redux是一种流行的React状态管理库）。React的所有内置钩子都非常适合本地状态管理。当谈到远程数据的状态管理时，如果远程数据有GraphQL端点，我建议使用ApolloClient。ApolloClient的替代品是urql和Relay。如果远程数据不是来自GraphQL端点，请尝试使用React的Hooks来管理它。如果没有，像Redux或MobX/Mobx状态树这样的解决方案可能会有所帮助。如果您想了解更多详细信息，请访问我的综合状态管理React教程。推荐：本地状态：React的useState、useReducer、useContextHooksRemoteStateviaGraphQL：ApolloClientRemoteStateviaREST：ReactHooksorRedux/MobX/MobxStateTreeRoutingwithReactRouting在React中扮演着重要的角色。毕竟，React可以帮助您实现在客户端处理路由的单页应用程序。引入复杂路由时，有多种路由方案。最推荐的解决方案是ReactRouter。在介绍路由之前，可以先试试React的条件渲染，它不是路由的合理替代品，但对于小型应用来说已经足够了。建议：React中的ReactRouterStyleLibrary虽然React样式有很多解决方案，但作为React初学者，从内联样式和基础CSS入手还是不错的。import'./Headline.css';constHeadline=({title})=>{title}虽然内联样式可以使用JavaScript在React中动态添加样式，但外部CSS文件可以包含React应用程序的所有剩余样式。一旦您的应用程序增长，就会有许多其他样式方案选项。首先，我建议您将CSS模块作为您的CSS-in-CSS解决方案之一。CSS模块由create-react-app支持，并为您提供了一种将CSS封装到模块中的方法。这样，它就不会不小心渗入其他人的风格。虽然应用程序的某些部分仍然可以共享样式，但其他部分不必访问它。在React中，CSS模块通常与CSS文件与React组件文件共存。importstylesfrom'./style.css';constHeadline=({title})=>{title}其次，我要推荐的是所谓的样式化组件，作为React的其中之一CSS-in-JS解决方案。此方法由名为styled-components的库提供，它与React组件一起与JavaScript共享样式：importstyledfrom'styled-components';constBlueHeadline=styled.h1`color:blue;`;constHeadline=({title})=>{title}第三，我想推荐TailwindCSS作为功能性CSS解决方案：constHeadline=({title})=>{title}选择CSSinCSS、CSSinjs还是functionalCSS，由你决定。所有策略都适用于大型React应用程序。建议：CSS-in-CSSwithCSSModulesCSS-in-JSwithStyledComponentsFunctionalCSSwithTailwindCSSReactUILibrary如果你不想从头开始构建所有必要的ReactUI组件，你可以选择ReactUILibrary来做工作。所有这些都有一些基本组件，如按钮、下拉菜单、对话框和列表。React有很多UI库可供选择：AntDesignChakraUITailwindUISemanticUIMaterialUIReactBootstrap1.ReactBootstrapReactAnimations任何Web应用程序中的动画都是从CSS开始的。最终你会发现CSS动画并不是你所需要的。开发人员经常查看ReactTransitionGroup，以便他们可以使用React组件执行动画。其他知名的React动画库有：react-motionreact-springFramerMotionAnimated(ReactNative)建议：ReactTransitionGroupReact可视化和图表库如果你真的想自己从头开始构建图表，你不能不学习D3.这是一个低级可视化库，可为您提供创建精美图表所需的一切。然而，学习D3是完全不同的冒险，因此许多开发人员只想选择一个React图表库来为他们做所有事情，以换取灵活性。以下是一些流行的解决方案：nivoVictoryreact-visRechartsChartPartsReact中的表单库React最流行的表单库是Formik。它提供了从验证到提交到表单状态管理所需的一切。另一种选择是ReactHookForm。如果您开始使用更复杂的表单，这两种方法都是React应用程序的有效解决方案。建议：FormReact中的FormikReactHook数据获取库在FormReact中是快速的，你必须向远程API发出请求才能在React中获取数据。现代浏览器有一个原生的获取API来执行异步数据请求：functionApp(){React.useEffect(()=>{constresult=fetch(my/api/domain).then(response=>response.json()).then(result=>{//dosuccesshandling//e.g.storeinlocalstate});setData(result.data);});return(...);}基本上，您不需要添加任何其他库来完成这项工作。但是，有时不仅需要服务于复杂的异步请求，而且还需要具有更强大的功能，并且只能在轻量级库中使用。我推荐的这些库之一称为axios。随着应用程序的增长，它可以用来代替本地获取API。如果你有足够的时间使用GraphQLAPI，我推荐你使用ApolloClient。替代的GraphQL客户端可以是urql或Relay。建议：浏览器的本地获取APIaxiosApolloClientReact类型检查幸运的是React有自己的类型检查功能。使用PropTypes，你可以为你的React组件定义传入的props。每当您将错误的类型传递给组件时，您将在运行应用程序时收到一条错误消息。但是这种形式的类型检查应该只用于较小的应用程序。importPropTypesfrom'prop-types';constList=({list})=>