7个技巧让你写出干净的 TSX 代码

原文链接:https://dev.to/ruppysuppy/7-tips-for-clean-react-typescript-code-you-must-know-2da2

“干净的代码”不仅是可以正常运行的代码。它指的是组织整齐易于阅读易于理解且易于维护的代码。

让我们来看看 React 中“干净代码”的一些最佳实践,它们可以让你更加轻松地维护代码!🚀🌕

1. 为所有值提供显式类型

使用 TypeScript 时,很多人经常不为值提供显式类型,从而错失 TS 在开发中的真正用处

坏栗子 01:

const Component = ({ children }: any) => {
  // ...
};

坏栗子 02:

const Component = ({ children }: object) => {
  // ...
};

恰当地使用interface 能够让编辑器给你提供准确的提示,从而让敲代码变得更容易

好栗子:

import { ReactNode } from "react";

interface ComponentProps {
  children: ReactNode;
}

const Component = ({ children }: ComponentProps) => {
  // ...
};

2. 更新状态时考虑先前的状态

如果更新状态时新状态依赖于旧状态,在调用更新状态函数时传入函数来更新状态,React 状态更新会进行批处理,如果不使用这种方式更新状态很可能导致意想不到的结果

坏栗子:

import React, { useState } from "react";

export const App = () => {
  const [isDisabled, setIsDisabled] = useState(false);

  const toggleButton = () => {
    setIsDisabled(!isDisabled);
  };

  // 此处调用两次toggleButton的结果和调用一次相同
  const toggleButtonTwice = () => {
    toggleButton();
    toggleButton();
  };

  return (
    
); };

好栗子:

import React, { useState } from "react";

export const App = () => {
  const [isDisabled, setIsDisabled] = useState(false);

  const toggleButton = () => {
    setIsDisabled((isDisabled) => !isDisabled);
  };

  const toggleButtonTwice = () => {
    toggleButton();
    toggleButton();
  };

  return (
    
); };

3. 保持文件原子性和精简性

保持稳健的原子性和精简性可以让调试、维护甚至查找文件更加容易

坏栗子:

// src/App.tsx
export default function App() {
  const posts = [
    {
      id: 1,
      title: "How to write clean react code",
    },
    {
      id: 2,
      title: "Eat, sleep, code, repeat",
    },
  ];

  return (
    
    {posts.map((post) => (
  • {post.title}
  • ))}
); }

好栗子:

// src/App.tsx
export default function App() {
  return (
    
); } // src/components/Navigation.tsx interface NavigationProps { title: string; } export default function Navigation({ title }: NavigationProps) { return ( ); } // src/components/Posts.tsx export default function Posts() { const posts = [ { id: 1, title: "How to write clean react code", }, { id: 2, title: "Eat, sleep, code, repeat", }, ]; return (
    {posts.map((post) => ( ))}
); } // src/components/Post.tsx interface PostProps { title: string; } export default function Post({ title }: PostProps) { return
  • {title}
  • ; }

    4. 对具有多个状态的值使用枚举或常量对象

    使用枚举或常量对象可以大大简化管理存在多种状态的变量的过程

    坏栗子:

    import React, { useState } from "react";
    
    export const App = () => {
      const [status, setStatus] = useState("Pending");
    
      return (
        
    {status}
    ); }

    好栗子:

    import React, { useState } from "react";
    
    enum Status {
      Pending = "Pending",
      Success = "Success",
      Error = "Error",
    }
    // OR
    // const Status = {
    //   Pending: "Pending",
    //   Success: "Success",
    //   Error: "Error",
    // } as const;
    
    export const App = () => {
      const [status, setStatus] = useState(Status.Pending);
    
      return (
        
    {status}
    ); };

    5. 尽量不在视图中编写逻辑

    尽量不要把逻辑代码嵌入到标签中

    坏栗子:

    const App = () => {
      return (
        
    ); };

    好栗子:

    const App = () => {
      const handleDarkModeToggle = () => {
        // ...
      };
    
      return (
        
    ); };

    当然如果逻辑代码只有简单的一行,写在标签中也是可以的

    6. 正确地选择条件渲染的方式

    正确地选择条件渲染的方式可以让代码更优雅

    坏栗子:

    const App = () => {
      const [isTextShown, setIsTextShown] = useState(false);
    
      const handleToggleText = () => {
        setIsTextShown((isTextShown) => !isTextShown);
      };
    
      return (
        
    {isTextShown ? Now You See Me

    : null} {isTextShown &&

    isTextShown is true

    } {!isTextShown &&

    isTextShown is false

    }
    ); };

    好栗子:

    const App = () => {
      const [isTextShown, setIsTextShown] = useState(false);
    
      const handleToggleText = () => {
        setIsTextShown((isTextShown) => !isTextShown);
      };
    
      return (
        
    {isTextShown && Now You See Me

    } {isTextShown ? (

    isTextShown is true ) : ( isTextShown is false )}

    ); };

    7. 使用JSX简写

    布尔属性

    一个具有真值的属性可以只写属性名,比如truthyProp,而不必写成truthyProp={true}

    坏栗子:

    interface TextFieldProps {
      fullWidth: boolean;
    }
    
    const TextField = ({ fullWidth }: TextFieldProps) => {
      // ...
    };
    
    const App = () => {
      return ;
    };
    

    好栗子:

    interface TextFieldProps {
      fullWidth: boolean;
    }
    
    const TextField = ({ fullWidth }: TextFieldProps) => {
      // ...
    };
    
    const App = () => {
      return ;
    };
    

    字符串属性

    属性值为字符串字面量可以直接用双引号包裹

    坏栗子:

    interface AvatarProps {
      username: string;
    }
    
    const Avatar = ({ username }: AvatarProps) => {
      // ...
    };
    
    const Profile = () => {
      return ;
    };
    

    好栗子:

    interface AvatarProps {
      username: string;
    }
    
    const Avatar = ({ username }: AvatarProps) => {
      // ...
    };
    
    const Profile = () => {
      return ;
    };
    

    Undefined 属性

    和普通的TS/JS一样,如果属性未提供值,则为undefined

    坏栗子:

    interface AvatarProps {
      username?: string;
    }
    
    const Avatar = ({ username }: AvatarProps) => {
      // ...
    };
    
    const Profile = () => {
      return ;
    };
    

    好栗子:

    interface AvatarProps {
      username?: string;
      // OR username: string | undefined
    }
    
    const Avatar = ({ username }: AvatarProps) => {
      // ...
    };
    
    const Profile = () => {
      return ;
    };
    

    现在你应该知道怎么编写干净的 TSX 了

    完结!撒花!

    7个技巧让你写出干净的 TSX 代码插图

    公众号【今天也要写bug】(op-bot)提问答疑

    文章来源于互联网:7个技巧让你写出干净的 TSX 代码

    THE END
    分享
    二维码