react插件如何写
React 插件开发基础
React 插件通常以 npm 包形式发布，核心是通过封装可复用的组件或逻辑供其他项目调用。需要遵循 React 组件设计规范，并考虑兼容性、性能优化和文档完整性。
项目初始化
使用 create-react-library 或手动配置 Webpack/Rollup 构建工具初始化项目结构。典型目录包含 src（源码）、dist（输出）、example（演示示例）和测试目录。
组件设计原则
- 使用 PropTypes 或 TypeScript 定义明确 props 类型
- 避免直接操作 DOM，优先使用 React 状态管理
- 提供足够的自定义回调（如
onChange事件）
关键实现步骤
编写核心组件
import React from 'react';
import PropTypes from 'prop-types';
const MyPlugin = ({ text, onAction }) => {
return <button onClick={onAction}>{text}</button>;
};
MyPlugin.propTypes = {
text: PropTypes.string.isRequired,
onAction: PropTypes.func
};样式处理方案
- CSS Modules：避免全局样式冲突
- styled-components：支持动态样式
- 提供主题覆盖能力通过 Context API
打包配置示例（Rollup）
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from 'rollup-plugin-typescript2';
export default {
input: 'src/index.ts',
output: [
{
file: 'dist/index.js',
format: 'cjs',
sourcemap: true
},
{
file: 'dist/index.esm.js',
format: 'esm',
sourcemap: true
}
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
typescript()
]
};测试与发布
单元测试配置 使用 Jest + React Testing Library 编写测试用例：
import { render, screen, fireEvent } from '@testing-library/react';
import MyPlugin from './MyPlugin';
test('triggers callback on click', () => {
const mockFn = jest.fn();
render(<MyPlugin text="Test" onAction={mockFn} />);
fireEvent.click(screen.getByText(/Test/i));
expect(mockFn).toHaveBeenCalled();
});发布准备
- 完善
package.json中的入口文件配置：{ "main": "dist/index.js", "module": "dist/index.esm.js", "types": "dist/index.d.ts", "files": ["dist"] } - 添加 README.md 包含用法示例和 API 文档
- 通过
npm publish发布前确保版本号遵循 semver 规范
高级优化技巧
性能优化
- 使用
React.memo避免不必要的重渲染 - 提供 ref 转发支持：
React.forwardRef - 异步加载组件使用
lazy和Suspense
上下文集成 通过自定义 Hook 提供插件状态管理：
const usePluginState = (initialValue) => {
const [state, setState] = useState(initialValue);
const update = useCallback((newVal) => {
setState(prev => ({ ...prev, ...newVal }));
}, []);
return [state, update];
};类型支持 为 TypeScript 用户提供完整的类型定义：
interface PluginProps {
size?: 'small' | 'medium' | 'large';
disabled?: boolean;
children?: React.ReactNode;
}
