对前端 React Hooks 和 Wormhole 状态管理模式的 Sentry 开发者贡献指南

引言

React Hooks 和 Wormhole 状态管理模式在前端开发中越来越流行，为构建响应式、可维护的应用程序提供了强大的工具。为了确保 Sentry 代码库中 React Hooks 和 Wormhole 的一致使用，我们制定了这些贡献指南。这些指南将帮助贡献者了解我们对编码风格、最佳实践和测试的要求。

编码风格

• 使用单引号 ('') 而不是双引号 ("")
• 采用单行语句，除非可读性需要多行
• 保持函数和变量的简短、性
• 遵循 Airbnb JavaScript 样式指南

最佳实践

使用 React Hooks

• 尽量使用 useEffect() 而非 componentDidMount() 和 componentWillUnmount()
• 利用 useState() 来管理状态，而不是直接操作 props
• 避免在 render() 函数中执行副作用

使用 Wormhole 状态管理模式

• 仅在必需时使用 Wormhole，因为它是轻量级的替代方案
• 通过 tunnel() 函数共享状态，而不是直接使用 props
• 在 onCleanup() 回调中清理资源

测试

• 所有新特性和修复必须有相应的测试
• 测试应该覆盖所有可能的代码路径
• 使用 Jest 和 Enzyme 进行单元测试
• 使用 Cypress 进行端到端测试

协作

• 在创建拉取请求之前，确保您的更改与主分支兼容
• 在提交拉取请求之前，运行单元测试和端到端测试
• 在拉取请求中提供清晰的提交信息，概述您的更改

其他指南

• 避免使用第三方库，除非绝对必要
• 遵循 Sentry 安全最佳实践
• 定期审查贡献指南并根据需要进行更新

示例代码

以下是使用 React Hooks 和 Wormhole 状态管理模式的示例代码：

import React, { useState, useEffect } from "react";
import { useWormhole } from "@beaker/wormhole";

const MyComponent = () => {
  const [count, setCount] = useState(0);
  const [tunneledCount, setTunneledCount] = useWormhole({ initialValue: count });

  useEffect(() => {
    const interval = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <p>Tunneled Count: {tunneledCount}</p>
    </div>
  );
};

export default MyComponent;

结论

遵守这些贡献指南对于确保 Sentry 代码库中 React Hooks 和 Wormhole 状态管理模式的有效使用至关重要。通过遵循这些准则，我们可以维护一个高质量、一致的代码库，使贡献者能够轻松地协作并创建健壮的解决方案。我们鼓励所有贡献者仔细审查这些指南，并随时提出问题或建议以进一步改进它们。