在线教育直播源码中React库的特性解读

虽然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是很好的。

React样式处理

　　虽然内联样式可以用JavaScript在React中动态地添加样式，但是一个外部的CSS文件可以拥有React应用程序的所有剩余样式。一旦您的应用程序增长，还有许多其他样式方案选择。

首先，我建议您研究一下CSSModules，将其作为CSS-in-CSS解决方案之一。CSSModules受到create-react-app的支持，并为您提供了将CSS封装到模块中的方法。这样，它就不会意外地泄漏到其他人的样式中。尽管应用程序的某些部分仍然可以共享样式，但其他部分不必访问它。在React中，CSSModules通常将CSS文件与React组件文件共存。

React

　　其次，我想推荐的是被称作为styledcomponents，作为React的CSS-in-JS解决方案之一。这个方法是由一个名为styled-components的库提供的，它将样式与JavaScript共享到React组件的旁边:

React

第三，我想推荐 Tailwind CSS 作为一个函数式的 CSS 解决方案:

React

　是否选择CSSinCSS、CSSinjs或函数式CSS取决于您。所有的策略都适用于大型的React应用程序。

　　建议:

CSS-in-CSSwithCSSModules

CSS-in-JSwithStyledComponents

FunctionalCSSwithTailwindCSS

React中的数据获取库

　　很快，您就必须向远程API发出请求，以便在　在线教育直播源码React中获取数据。现代浏览器带有本地获取API来执行异步数据请求:

React

　基本上，你不需要添加任何其他库来完成这项工作。但是，有时候不仅需要提供复杂的异步请求，还需要它们具有更强大的功能，而且只是一个轻量级的库。我推荐的这些库之一称为axios。当您的应用程序增大时，可以使用它来代替本地获取API。

　　如果您有足够的时间来处理GraphQLAPI，我建议您使用ApolloClient。可供选择的GraphQL客户端将是urql或Relay。

　　建议:

　　浏览器的本地fetchAPI

axios

ApolloClient

　综上只是在线教育直播源码中React的小部分解读，React是一个灵活的框架，您可以自己决定选择哪些库。当然，其中蕴含的知识还有很多，这只是小小的一部分，下次我们细细解读~