变量命名规范

React

• father::代码规范

梗概

React 中根据不同用途的变量推荐使用特定的后缀命名方式，如为 ref 添加 ref 后缀、为 state 添加 state 后缀等，有助于代码阅读和变量快速定位。

命名建议

按照功能添加特定后缀

1. Ref 相关变量

   • 使用 xxxRef 后缀，如 inputRef、formRef
   • 示例：const buttonRef = useRef(null);

2. State 相关变量

   • 使用 xxxState 后缀，如 countState、dataState
   • 示例：const [loadingState, setLoadingState] = useState(false);

3. Callback 相关变量

   • 使用 xxxCallback 后缀，如 submitCallback
   • 示例：const submitCallback = useCallback(() => {}, []);

4. Effect 相关变量

   • 使用 xxxEffect 后缀
   • 示例：const fetchDataEffect = useEffect(() => {}, []);

命名的实际好处

• 在回调函数中快速通过后缀搜索或识别变量类型
• 代码自文档化，降低沟通和理解成本
• 避免命名冲突，特别是在大型组件或复杂项目中
• 通过 IDE 的自动补全功能快速找到相关变量

示例代码

function UserProfile() {
  // Refs
  const formRef = useRef(null);
  const inputRef = useRef(null);
  
  // States
  const [userState, setUserState] = useState(null);
  const [loadingState, setLoadingState] = useState(false);
  
  // Callbacks
  const submitCallback = useCallback(() => {
    // 可以很容易搜索所有带 State 后缀的变量
    setLoadingState(true);
    // 调用 API 提交 formRef 的数据
    console.log(formRef.current);
    // ...
    setLoadingState(false);
  }, []);
  
  return (
    <form ref={formRef}>
      <input ref={inputRef} />
      {loadingState && <div>Loading...</div>}
      <button onClick={submitCallback}>提交</button>
    </form>
  );
}

相关概念

• child::ref
• child::state
• child::useCallback
• child::useEffect