如何做好前端代码规范，让你的代码更丝滑

1、命名规范

尽量减少缩写的命名方式，做到见字如面

// 👎 自我感觉良好的缩写:
let rContent = 'willen'; 

// 👍 无需对每个变量都写注释，从名字上就看懂
let firstName = 'jackie'; 

// 👎 从命名无法知道返回值类型
function showFriendsList() {....} // // 无法辨别函数意图,返回的是一个数组，还是一个对象，还是true or false?

// 👍 明确函数意图，对于返回true or false的函数，最好以should/is/can/has开头
function shouldShowFriendsList() {...}
function isEmpty() {...}
function canCreateDocuments() {...}
function hasLicense() {...}
function sendEmailToUser(user) {.... } //动词开头，函数意图就很明显

2、写注释

在每个文件的顶部明确说明该组件做什么，有没有业务理解难点等等，对业务特殊函数/变量也需要写注释

/**
 * 导航页面-右边区域
 */
 
const Content=>()=>xxx
 
const MAX_INPUT_LENGTH = 8; //用于限制密码输入框

function Component(props) {
  return (
    <>
      {/* 如果用户没有订阅则不展示广告 */}
      {user.subscribed ? null : <SubscriptionPlans />}
    </>
  )
}

3、变量兜底

// 👎 对于求值获取的变量，没有兜底
const { data } = getApiRequest();
data.map((s) => s.id); //没有考虑data异常的情况，代码一跑就爆炸

// 👍 对于求值变量，做好兜底
const { data = [] } = getApiRequest();
data.map((s) => s?.id);

4、辅助函数必须是纯函数

// 👎 不要让功能函数的输出变化无常
function plusAbc(a, b, c) {  // 这个函数的输出将变化无常，因为api返回的值一旦改变，同样输入函数的a，b,c的值，但函数返回的结果却不一定相同。
  var c = fetch('../api');
  return a+b+c;
}

// 👍 功能函数使用纯函数，输入一致，输出结果永远唯一
function plusAbc(a, b, c) {  // 同样输入函数的a，b,c的值，但函数返回的结果永远相同。
  return a+b+c;
}

5、优先使用函数式编程

// 👎 使用for循环编程
for(i = 1; i <= 10; i++) {
   a[i] = a[i] +1;
}

// 👍 使用函数式编程
let b = a.map(item => ++item)

6、优先使用函数式组件

除非需要用到错误边界，否则函数式组件应该是首选方法。

7、组件复杂度

如果一个组件做的事情太多，应适当提取一些逻辑，将其拆分为更小的组件。
如果提取的组件很复杂，则需要依照一定的规则和条件一一提取它。
代码行数并不是一个客观的衡量标准，更多是需要考虑责任划分和抽象。

8、用错误边界

当需要对大量数据进行渲染处理时，需要通过错误边界组件对其进行降级处理。

function Component() {
  return (
    <Layout>
      <ErrorBoundary>
        <CardWidget />
      </ErrorBoundary>

      <ErrorBoundary>
        <FiltersWidget />
      </ErrorBoundary>

      <div>
        <ErrorBoundary>
          <ProductList />
        </ErrorBoundary>
      </div>
    </Layout>
  )
}

9、props参数传递

props一层层传递一直是我们很头疼的一个问题，最核心的问题是不清楚props是从哪个初始组件传来的，以及props中到底有哪些东西，上下文是什么？
因此对于传递较深的场景我推荐直接使用 context，对于 props 中的内容和上下文通过 TS 来解决。

// A.tsx
interface AProps {
  param: string;
}
const A = ({ param }: AProps) => {
  return <B param = {param} />;
};

// 👍 上下文清晰
// B.tsx
const B = ({ param }: { param: AProps['param'] }) => {
  return <div>hello world</div>;
};

10、props传参数量

如果超过 5 个props，就该考虑是否拆分该组件。在某些情况下，这是需要对组件进行重构的标志。

⚠️注意：组件使用的props越多，重新渲染的理由就越多。

11、避免嵌套三元运算符

三元运算符在第一级之后变得难以阅读，虽然看起来节省了代码空间，但最好在代码中明确意图，保持良好的阅读性

// 👎 不够清晰，要是再嵌套一层两层呢
isSubscribed ? (
  <ArticleRecommendations />
) : isRegistered ? (
  <SubscribeCallToAction />
) : (
  <RegisterCallToAction />
)

// 👍 将判断逻辑进行拆分
function CallToActionWidget({ subscribed, registered }) {
  if (subscribed) {
    return <ArticleRecommendations />
  }

  if (registered) {
    return <SubscribeCallToAction />
  }

  return <RegisterCallToAction />
}

function Component() {
  return (
    <CallToActionWidget
      subscribed={subscribed}
      registered={registered}
    />
  )
}

12、将列表组件封装成独立组件

// 👎 列表渲染和其他逻辑杂糅在一起
function Component({ topic, page, articles, onNextPage }) {
  return (
    <div>
      <h1>{topic}</h1>
      {articles.map(article => (
        <div>
          <h3>{article.title}</h3>
          <p>{article.teaser}</p>
          <img src={article.image} />
        </div>
      ))}
      <div>You are on page {page}</div>
      <button onClick={onNextPage}>Next</button>
    </div>
  )
}

// 👍 将列表组件提取出来，一目了然
function Component({ topic, page, articles, onNextPage }) {
  return (
    <div>
      <h1>{topic}</h1>
      <ArticlesList articles={articles} />
      <div>You are on page {page}</div>
      <button onClick={onNextPage}>Next</button>
    </div>
  )
}

13、避免嵌套渲染函数

// 👎 不要将其定义在渲染函数组件中
function Component() {
  function renderHeader() {
    return <header>...</header>
  }
  return <div>{renderHeader()}</div>
}

// 👍 将其抽离到独立的组件中去
import Header from '@modules/common/components/Header'

function Component() {
  return (
    <div>
      <Header />
    </div>
  )
}

14、组件/函数导入导出

// 👍 在文件头部导入，顺序依次为: 第三方库 > 公共组件/方法 > 非公共部分组件/方法
import React from 'react'
import _ from 'loadsh'
import Header from '@components/header'
import Content from './Content'

// 👍 在底部导出
export { Content, Header }
export default Component