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 (

        I'm {isDisabled ? "disabled" : "enabled"}

        Toggle button state

        Toggle button state 2 times

  );
};

好栗子:

import React, { useState } from "react";

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

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

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

  return (

        I'm {isDisabled ? "disabled" : "enabled"}

        Toggle button state

        Toggle button state 2 times

  );
};

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 (

        App

        {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 (

      {title}

  );
}

// 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}
       setStatus("Pending")}>
        Pending

       setStatus("Success")}>
        Success

       setStatus("Error")}>
        Error

  );
}

好栗子:

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}
       setStatus(Status.Pending)}>
        Pending

       setStatus(Status.Success)}>
        Success

       setStatus(Status.Error)}>
        Error

  );
};

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

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

坏栗子:

const App = () => {
  return (

       {
          // ...

        }}
      >
        Toggle Dark Mode

  );
};

好栗子:

const App = () => {
  const handleDarkModeToggle = () => {
    // ...

  };

  return (

        Toggle Dark Mode

  );
};

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

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}

      Toggle

  );
};

好栗子:

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
      )}

      Toggle

  );
};

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 了

完结！撒花！

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

Original: https://www.cnblogs.com/bidong/p/16639096.html
Author: 程序员既明
Title: 7个技巧让你写出干净的 TSX 代码