如何通过 Sourcegraph 代码搜索学习 React API 和概念

2025-06-10

如何通过 Sourcegraph 代码搜索学习 React API 和概念

React 是一个常用的 UI 库，已经存在很长时间了（以编程年限计算）。它有时被称为前端框架，因为它拥有丰富的资源，可以用来构建流畅、高性能且快速的用户界面。此外，它还拥有一个充满活力和活力的开发者社区。

学习 React 的方法有很多，其中一种有效的方法就是深入研究你想要了解的概念的不同代码实现。

Twitter 上的一个简短讨论帖展示了大家在学习 React 时经常搜索的概念。在本文中，你将了解如何利用 Sourcegraph 代码搜索来学习某些 React 概念。

注意： React 团队最近推出了https://beta.reactjs.org/learn。真的很棒！

1. React 和表单

几乎每个 UI 都是由表单元素组合而成的。作为一名前端开发人员，你会处理大量的表单。

我喜欢这篇关于 React 和 Form 库的优秀文章。

借助 Sourcegraph，您可以在阅读文章和库文档的同时，快速掌握这些表单库的使用方法。因此，Sourcegraph 可以作为您的代码助手，帮助您更快地学习。

搜索 Formik：

Formik lang:JavaScript
Enter fullscreen mode Exit fullscreen mode

搜索查询： https://sourcegraph.com/search ?q=context:global+from+%22Formik%22+lang:JavaScript+&patternType=literal

搜索 Kendo React Form：

kendo-react-form lang:JavaScript
Enter fullscreen mode Exit fullscreen mode

搜索查询： https://sourcegraph.com/search?q =context:global+kendo-react-form+lang:JavaScript+&patternType=literal

建议：使用Sourcegraph搜索您想要了解的其他表单库。

2. 状态管理钩子

状态管理是前端开发中一个广泛的话题。在 React 的世界里，它可能会让人不知所措，处理起来也很繁琐，尤其对于新手来说。状态管理的方式主要取决于应用的复杂程度。

作为 React 前端开发者，你总有一天会需要学习Hooks。Hooks是一些常规函数，允许你无需定义类即可使用 React 的状态和功能。

您会遇到的常见钩子有useState、、、、、和useEffect。useRefuseCallbackuseMemouseContextuseReducer

你会遇到很多 React 代码库都使用了useRef。既然如此，让我们来了解一下开发者如何在各种应用和项目中使用useRef和。useState

React.useRef() lang:JavaScript
Enter fullscreen mode Exit fullscreen mode

搜索查询： https://sourcegraph.com/search?q =context:global+React.useRef%28%29+lang:JavaScript+&patternType=literal

useRef lang:JavaScript
Enter fullscreen mode Exit fullscreen mode

搜索查询： https://sourcegraph.com/search?q =context:global+useRef+lang:JavaScript+&patternType=literal

useState搜索和的用法useRef：

useState AND useRef lang:JavaScript
Enter fullscreen mode Exit fullscreen mode

搜索查询： https://sourcegraph.com/search?q=context:global+useState +AND+useRef+lang:JavaScript+&patternType=literal

建议：使用 Sourcegraph 来查找其他钩子是如何使用的。

3. 错误边界

React 16 引入了错误边界，作为 React 组件，用于在渲染过程中捕获其子组件树中任意位置的 JavaScript 错误。这些组件还会记录错误并显示回退 UI。

如果类组件定义了生命周期方法static getDerivedStateFromError()或componentDidCatch()中的任一个（或两个），则该类组件将成为错误边界。

用于static getDerivedStateFromError()在抛出错误后呈现回退 UI 并componentDidCatch()记录错误信息。

让我们通过 Sourcegraph 来探索如何在不同的项目中使用错误边界：

static getDerivedStateFromError
Enter fullscreen mode Exit fullscreen mode

搜索查询： https://sourcegraph.com/search?q =context:global+static+getDerivedStateFromError&patternType=literal

您可以点击文件来阅读完整的代码。

4. PropTypes

PropTypes 是 React 为组件提供类型检查的方式。使用 React PropTypes，你可以设置 props 的类型，以避免出现意外行为。

我们将对 propTypes 执行两种类型的搜索，以便为我们提供大量有关开发人员如何在其代码库中使用 PropTypes 的背景信息。

文字搜索：

.propTypes = {
Enter fullscreen mode Exit fullscreen mode

搜索查询： https://sourcegraph.com/search?q =context:global+.propTypes+%3D+%7B&patternType=literal

对 propTypes 进行结构化搜索应该会给我们提供如下 propTypes 的结果：

.propTypes = { ... }
Enter fullscreen mode Exit fullscreen mode

搜索查询： https://sourcegraph.com/search?q =context:global+.propTypes+%3D+%7B+...+%7D&patternType=structural

建议：使用 Sourcegraph 了解道具在应用程序中的使用方式。

5. Redux

我和很多开发者聊过 Redux。他们的痛点大多在于如何正确学习 Redux。我经常听到的问题是：

  • 我从哪里开始？
  • 我需要了解 Redux 哪些库和中间件？
  • 为什么有这么多选择？
  • 为什么 Redux 如此复杂？
  • 在我的应用程序中调试 Redux 需要哪些工具？

这些问题我暂时没有答案，不过Redux 官方指南提供了非常详细的分步教程和常见问题解答。你也可以利用 Sourcegraph 查找 Redux 资源，加快学习速度。快来试试吧！

第一个查询：

built with redux
Enter fullscreen mode Exit fullscreen mode

https://sourcegraph.com/search?q=context:global+built+with+redux&patternType=literal

第二个查询：

built with react redux
Enter fullscreen mode Exit fullscreen mode

https://sourcegraph.com/search?q=context:global+built+with+react+redux&patternType=literal

我们可以找到标准 Redux 工具包 API 的使用方式：

第三个查询：

createAsyncThunk
Enter fullscreen mode Exit fullscreen mode

https://sourcegraph.com/search?q=context:global+createAsyncThunk&patternType=literal

此查询返回大量有关createAsyncThunkAPI 使用情况的结果。

但是，响应中也包含大量的 Markdown 文件。让我们使用另一个查询来排除 Markdown 文件：

搜索查询：

createAsyncThunk -file:\.md|.mdx$
Enter fullscreen mode Exit fullscreen mode

该file关键字确保它查找以.md或结尾的文件.mdx。-file:并将它们排除在搜索结果之外。

https://sourcegraph.com/search?q=context:global+createAsyncThunk+-file:%5C.md%7C.mdx%24+&patternType=literal

建议：使用 Sourcegraph 来了解createSlice和createApi其他 Redux API 在 React 应用程序中的使用方式。

注：我偶然看到了一位 Redux 维护者发的一条推文。我通过以下搜索查询找到了该问题的答案：

搜索查询： https://sourcegraph.com/search?q =context:global+lang:JavaScript+connect%5C%28+pure:%5Cs*false&patternType=regexp

6.如何使用 Sourcegraph 查找 React 错误消息。

Sourcegraph 是一个出色的工具，可以查找 React 开发过程中弹出的特定错误消息背后的原因。

您可能遇到的一个常见错误是超出最大更新深度。当组件setState在内部重复调用componentWillUpdate或 时，可能会发生这种情况componentDidUpdate。React 限制了嵌套更新的次数，以防止无限循环。

反复重新渲染的时候会弹出这个错误提示，尤其是在方法setState中调用了use 的方法的时候render。可以用 Sourcegraph 找到这个方法的来源。

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
Enter fullscreen mode Exit fullscreen mode

搜索查询： https://sourcegraph.com/search ?q=context:global+Maximum+update+depth+exceeded.+This+can+happen+when+a+component+repeatedly+calls+setState+inside+componentWillUpdate+or+componentDidUpdate.+React+limits+the+number+of+nested+updates+to+prevent+infinite+loops.&patternType=literal

在搜索结果中，您可以找到此 React 错误消息弹出的位置和方式！

在默认浏览器中搜索代码

Sourcegraph浏览器扩展为 GitHub、GitHub Enterprise、GitLab、Phabricator 和 Bitbucket Server 上的文件和差异添加了代码智能。

安装后，它提供以下内容：

  • 代码智能：当您将鼠标悬停在拉取请求、差异和文件中的代码上时，会显示一个工具提示：

    • 悬停令牌的文档和类型签名。
    • 转到定义按钮。
    • 查找参考按钮。

  • 您的 Web 浏览器中的搜索引擎快捷方式可对您的 Sourcegraph 实例执行搜索。

浏览器

结论

学习如何使用新的库或框架可能具有挑战性，但使用正确的工具，您可以加快这一过程并更好地了解如何连接不同的组件。

如果您想了解更多关于 Sourcegraph 代码搜索的知识，我最近在ReactAdvanced London 大会上做了一个关于高级代码搜索的演讲。有关 Sourcegraph 搜索查询的更多信息，请访问https://learn.sourcegraph.com/tags/search

此外，在 Sourcegraph 上注册以连接和搜索您的私人代码。

有任何建议或疑问吗？欢迎留言，或加入我们的社区 Slack Space，我们的团队将很乐意解答您关于 Sourcegraph 的任何问题。

链接：https://dev.to/sourcegraph/how-to-learn-react-api-concepts-with-sourcegraph-code-search-3kn6
Devto 翻译
PREV
使用 Node.js 和 Express.js 设置 REST API
NEXT
如何摆脱困境