虽然React已经诞生很久了,但是自从诞生开始,围绕组件驱动形成了一个非常全面的生态,使得来自其他编程语言或者框架的开发人员很难找到要构建一个React系统的所有组件。针对于完全不熟悉React的初学者,给大家详细的解读一下。
React状态管理
React带有内置的hooks来管理局部状态:useState、useReducer和useContext。所有这些都可以在React中用于复杂的本地状态管理。它甚至可以模拟Redux(Redux是React的一个流行的状态管理库)。
所有React的内置hooks都非常适合本地状态管理。当涉及到远程数据的状态管理时,如果远程数据带有GraphQL端点,我建议使用ApolloClient。ApolloClient的替代方案是urql和Relay。
如果远程数据不是来自GraphQL端点,请尝试使用React的Hooks来管理它。如果不行,像Redux或者MobX/MobxStatetree这样的解决方案可能会有所帮助。
推荐:
局部状态:React的useState,useReducer,useContextHooks
通过GraphQL的远程状态:ApolloClient
通过REST的远程状态:ReactHooksorRedux/MobX/MobxStateTree
在线教育直播源码React中的样式库
虽然关于React样式处理有很多解决方法,但是作为一个React初学者,刚开始使用内联样式和基本CSS是很好的。
虽然内联样式可以用JavaScript在React中动态地添加样式,但是一个外部的CSS文件可以拥有React应用程序的所有剩余样式。一旦您的应用程序增长,还有许多其他样式方案选择。
首先,我建议您研究一下CSSModules,将其作为CSS-in-CSS解决方案之一。CSSModules受到create-react-app的支持,并为您提供了将CSS封装到模块中的方法。这样,它就不会意外地泄漏到其他人的样式中。尽管应用程序的某些部分仍然可以共享样式,但其他部分不必访问它。在React中,CSSModules通常将CSS文件与React组件文件共存。
其次,我想推荐的是被称作为styledcomponents,作为React的CSS-in-JS解决方案之一。这个方法是由一个名为styled-components的库提供的,它将样式与JavaScript共享到React组件的旁边:
第三,我想推荐 Tailwind CSS 作为一个函数式的 CSS 解决方案:
是否选择CSSinCSS、CSSinjs或函数式CSS取决于您。所有的策略都适用于大型的React应用程序。
建议:
CSS-in-CSSwithCSSModules
CSS-in-JSwithStyledComponents
FunctionalCSSwithTailwindCSS
React中的数据获取库
很快,您就必须向远程API发出请求,以便在 在线教育直播源码React中获取数据。现代浏览器带有本地获取API来执行异步数据请求:
基本上,你不需要添加任何其他库来完成这项工作。但是,有时候不仅需要提供复杂的异步请求,还需要它们具有更强大的功能,而且只是一个轻量级的库。我推荐的这些库之一称为axios。当您的应用程序增大时,可以使用它来代替本地获取API。
如果您有足够的时间来处理GraphQLAPI,我建议您使用ApolloClient。可供选择的GraphQL客户端将是urql或Relay。
建议:
浏览器的本地fetchAPI
axios
ApolloClient
综上只是在线教育直播源码中React的小部分解读,React是一个灵活的框架,您可以自己决定选择哪些库。当然,其中蕴含的知识还有很多,这只是小小的一部分,下次我们细细解读~