提示词库

React提示词

用于 React 组件的提示词：找出多余的重新渲染、拆分大型组件，以及编写贴近用户行为的测试。

提示词是英文的，即它们的编写和测试所用的语言。这些页面上的说明和指引已翻译。

  • performance
  • hooks
  • components
100/100 · 153 token

React 重新渲染审计

找出组件中不必要的重新渲染的原因，并为每一个给出最小的修复。

适用场景： 某个组件感觉很慢，或者分析器显示它在每次按键时都会渲染。

prompt
You are a senior React engineer reviewing a component for rendering performance.

## Task
Identify what causes unnecessary re-renders in the component below.

## Requirements
- Report only causes visible in the code: new object, array, or function props; state held too high; context that changes too often; missing keys.
- Quote the line for every cause.
- Give the smallest change that removes each cause.
- Do not recommend useMemo or useCallback unless the value is passed to a memoized child or used in a dependency array.

## Output format
Return a numbered list. Each item has three labeled lines: Cause, Line, and Fix. End with one sentence naming the fix to apply first.

## Input
<component>
{{component}}
</component>
在工作区中优化

变量

{{component}}
组件源码；如果有，也附上它渲染的子组件。

示例输入

component: a SearchPage that passes `filters={{ status, tag }}` to a memoized ResultsList.

示例输出

1. Cause: a new `filters` object is created on every render, so the memoized ResultsList always re-renders.
   Line: `<ResultsList filters={{ status, tag }} />`
   Fix: build `filters` with useMemo keyed on `status` and `tag`.

Apply fix 1 first.

仅为示意：为展示预期的形式而编写，并非由模型生成。

  • testing
  • react testing library
  • components
100/100 · 158 token

React Testing Library 测试

编写像用户一样操作组件的测试，按角色和标签查询元素。

适用场景： 组件没有测试，或者因为检查实现细节而在每次重构时测试都会失败。

prompt
You are a senior React engineer writing tests with React Testing Library and Vitest.

## Task
Write tests for the component below that cover the behaviors listed.

## Requirements
- Query elements by role, label, or text; never by class name or test id.
- Use userEvent for every interaction.
- Write one test per behavior, named as a sentence describing what the user sees.
- Mock only the network calls named in the behaviors.
- Do not test internal state or the number of renders.

## Output format
Return one TypeScript code block containing the complete test file, followed by a bulleted list of any listed behavior you could not test and why.

## Input
<component>
{{component}}
</component>

<behaviors>
{{behaviors}}
</behaviors>
在工作区中优化

变量

{{component}}
组件源码。
{{behaviors}}
要覆盖的行为，每行一个。

示例输入

component: a LoginForm with email and password fields.
behaviors: shows an error when the email is empty; disables the button while submitting.

示例输出

```tsx
it('shows an error when the email is empty', async () => {
  render(<LoginForm />);
  await userEvent.click(screen.getByRole('button', { name: /sign in/i }));
  expect(screen.getByRole('alert')).toHaveTextContent(/email is required/i);
});
```

仅为示意：为展示预期的形式而编写，并非由模型生成。

改成你的

修改需求以符合你的标准，然后检查结果。提示词分析器会在你输入时重新评分，优化器会在不丢失任何需求的前提下去掉冗词，安全扫描器会在你发送给模型之前标出密钥和个人数据。

更多类别