如何窃取任何 React 组件
I'll show you how to steal any component on a production React website's components without source code or access to the repo - just the website running in our browser. For example, here is Cursor web's agent sidebar.
我会向你展示如何在没有源代码或 repo 访问权限的情况下，窃取生产 React website 上的任何 component - 只需要在我们的浏览器中运行的 website。例如，这是 Cursor web 的 agent sidebar。
Normally, you'd need the source code. But here's the thing - React actually leaves a lot of breadcrumbs in the browser. More than you might think. And if we're clever about collecting these breadcrumbs and feeding them to an LLM, we can reconstruct the original components.
通常，你需要源代码。但关键是 - React 实际上在浏览器中留下了很多面包屑线索。比你想象的还要多。如果我们聪明地收集这些面包屑线索并将它们喂给一个 LLM，我们就可以重建原始的 components。
So that's what we're going to do. By the end, we'll have a working React component written by the help from an LLM. Let's start from the very basics.
所以这就是我们要做的。到最后，我们将有一个由 LLM 帮助编写的可工作的 React 组件。从最基础的开始吧。
Here's something you need to understand first. When you're looking at a React app in the browser, there are actually two trees living in memory.
首先，你需要理解一件事。当你在浏览器中查看 React 应用时，实际上内存中有两棵树。
Let's use this website as an example.
让我们以这个 website 为例。
The DOM is the browser's representation of the page and consists of HTML elements: divs, buttons, spans, etc. You can see it in the Elements tab of your dev tools. This is what the browser renders on screen.
DOM 是浏览器对页面的表示，由 HTML 元素组成：divs、buttons、spans 等。你可以在开发工具的 Elements 标签中看到它。这是浏览器在屏幕上渲染的内容。
React Fiber is React's internal tree. It's a parallel structure that React maintains, and it knows things the DOM doesn't know, such as:
React Fiber 是 React 的内部树。它是 React 维护的一个并行结构，它知道 DOM 不知道的事情，例如：
- Which React component created which DOM elements
- 哪个 React component 创建了哪个 DOM elements
- What props were passed to each component
- 每个组件传递了什么 props
- The component's state, hooks, everything
- 组件的状态、hooks、一切
And here's the beautiful thing - we can access this from the browser. React attaches Fiber nodes directly to DOM elements. Since React 16, any React app exposes this and it's what React...