我的React命名方式

你可能已经听说过很多次，在编程中最难的事情之一就是命名。

很多时候，我们会花费很多的时间来思考如何给组件的props和states变量命名。

在这篇材料中，我将与您分享我在使用React时的命名规范，帮助您轻松决定如何命名props和states。

Props命名规范

我将props分为两类: Input和Output。他们分别有不同的命名方式。

Input props是从父组件传递到子组件，用于定义子组件的行为。

Output props与Input props相似，但它们的主要目的是允许子组件与父组件进行通信，我们称之为事件处理器。

既然我们已经了解了Output props与Input props之间的区别，接下来让我们讨论命名规范。

Input Props的命名

对于Input Props，我使用以下命名规范：

• 如果props是布尔值，我使用前缀“is”或“has”，后跟props名称。例如：isDisabled, hasError, isActive, isOpen。

• 如果props是组件的“域值”或“域数据”，我将其命名为value。无论是字符串、数字、数组还是任何对象——它们都称为value，类似于原生HTML元素属性。例如：value, defaultValue, initialValue。

• 如果props是组件内部子组件的样式，我使用后缀Props，加上子组件名称。例如：textProps, buttonProps, inputProps, switchProps。

• 如果props是引用（ref）props，我使用后缀Ref，加上引用的名称。例如：inputRef, buttonRef, textRef。

Output Props的命名

对于Output Props，我使用以下命名规范：

• 如果props是渲染props，我使用前缀 render，后面跟props的名称。例如：renderItem、renderHeader、renderFooter。

• 如果props是事件处理器，我使用前缀 on，后面跟事件的名称。例如：onClick、onSubmit、onClose、onOpen。

由于一些Output Props是事件处理器，在这种情况下，我使用前缀 handleOn，后面跟事件的名称。例如：handleOnClick、handleOnSubmit、handleOnClose、handleOnOpen。

如果事件是变更事件，我还会添加后缀 Change。例如：handleOnChange、handleOnInputChange。

State命名规则

State在命名规范上几乎与原生JavaScript变量相同。

如果你熟悉并且已经有了变量的命名规范，你可以对状态变量使用相同的命名规范。

但如果你没有变量的命名规范，可以使用以下命名规范：

• 如果State是布尔值，我使用前缀 is 或 has，后面跟状态的名称。例如：[isDisabled, setIsDisabled]、[hasError, setHasError]、[isActive, setIsActive]、[isOpen, setIsOpen]。

• 如果State是组件的“域值”/“域数据”，我将其命名为 value。无论它是字符串、数字、数组还是任何对象——它们都是相同的值，类似于原生HTML输入元素。例如：[value, setValue]、[defaultValue, setDefaultValue]、[initialValue, setInitialValue]。

如果这些命名规范中的任何一个与Props冲突，你可以在解构Props时对它们进行别名处理。

• 如果State是一个缓存的值，我使用前缀 memoized 或 Memoized，后面跟State或组件的名称。

如果缓存的值不是组件，前缀用小写。例如：memoizedValue、memoizedSum、memoizedResult。

如果缓存的值是组件，前缀用大写。例如：MemoizedButton、MemoizedText、MemoizedHeader。

结论

命名是件困难的事情，但有了一个指南来帮助你做决定，会变得更容易。

这些是我在使用React时采用的命名规范，如果你注意到了，它们受到HTML元素属性的启发。我喜欢重用其中的一些命名规范，因为这样我不必重新发明命名，只需寻找相似之处。

如果这些对你不起作用，只要记住，你总是可以创建最适合你、你的使用场景和团队的命名规范。

最终，重要的是你有一个可以始终遵循的命名规范。

原文：https://juejin.cn/post/7374287624544419866