阅读 1406

[译]提升你react和js编码的5个技巧

原文地址:dev.to/adancarrasc…

原文作者:Adán Carrasco

译者:花花小仙女

为了保证可读性,本文采用意译而非直译。另外,本文版权归原作者所有,翻译仅用于学习。转载请联系作者。

两周前,我开始做一个新项目,有些代码已经写好了。然而,没有最佳实践可遵循。当你开始做一个新项目时,重要的是一起定义基础和最佳实践/指南,团队将遵循此基础来编写最佳代码:可维护,易读,易于理解。

我将描述我在项目中看到的5种情况以及如何改进它们。

关键字:一致

1.导入模块的顺序

以有组织的方式引入ES6模块将节省你查找任何找不到或不需要模块的时间。

之前

import { DatePicker } from '../../components'
import axios from 'axios'
import { IUser } from '../../models/User'
import React from 'react'
import { toCamelCase } from '../utils'
import { Button } from '@material-ui/core'复制代码

之后

// node_modules
import React from 'react'
import { Button } from '@material-ui/core'
import axios from 'axios'

// Local modules
import { DatePicker } from '../../components'
import { toCamelCase } from '../utils'

// Types + Interfaces
import { IUser } from '../../models/User'复制代码

之前的引入是无序的,一个文件可能不会太乱,但是当你打开大量文件时候,尝试找到一个特定的包真的很难。我们团队达成一致,使用之后一种方式对导入的包进行分组,通过空格行分割每个模块。因为文件将保持一致,就可以删除注释了。

2.尽可能使用解构

另外一个重要的事情就是防止不必要的嵌套和重复。在大多数情况下,将大大提升可读性。

之前

const UserProfile = props => (<div>
    <span>{props.firstName}</span>
    <span>{props.lastName}</span>
    <img src={props.profilePhoto}/>
  </div>)复制代码

之后

const UserProfile = ({ firstName, lastName, profilePhoto }) =>
  (<div>
    <span>{firstName}</span>
    <span>{lastName}</span>
    <img src={profilePhoto}/>
  </div>)复制代码

3.变量和方法的命名约定

关于代码,有一点很重要,就是要知道一个方法将返回什么,或者通过变量名轻松理解变量的含义(变量语义化),比如

之前

let User = {}
User.car = true
User.admin = true

function NewUser() {
  return User
}

function add_photo(photo) {
  user.photo = photo
}
复制代码

之后

let user = {}
user.hasCar = true
user.isAdmin = true

function getUser() {
  return user
}

function setUserPhoto(photoUrl) {
  user.photoUrl = photoUrl
}复制代码

之后展示了如何在命名变量和方法保持一致性,在以下方面保持一致:

  • 对于布尔类型使用:is, has,should做前缀
  • 对于方法使用 get/set 做前缀如果是操作 props
  • 变量和方法都使用驼峰命名

4.为你的组件接收公共变量做好准备

之前

const UserProfile = props => {
  const { firstName, lastName, profilePhoto } = props
  return (<div>
    <span>{firstName}</span>
    <span>{lastName}</span>
    <img src={profilePhoto}/>
  </div>)
}复制代码

之后

const UserProfile = props => {
  const { firstName, lastName, profilePhoto, ...rest} = props
  return (<div {...rest}>
    <span>{firstName}</span>
    <span>{lastName}</span>
    <img src={profilePhoto}/>
  </div>)
}复制代码

之后,组件为注入一些公共变量做准备,比如style, className, key等等,使用展开操作,将一组公共属性传入容器。

5.哑组件(dumb components)让开发更简单

创建哑组件(dumb components)并且遵循单一职责原则(Single Responsibility Principle)可以让你轻松创建和贡献代码,并保持代码库的整洁。

之前

import axios from 'axios'

const UserProfile = props => {
  const [user, setUser] = React.useState(null);
  React.useEffect(() => {
    getUser();
  }, []);

  async function getUser() {
    try {
      const user = await axios.get('/user/25')
    } catch(error) {
      console.error(error)
    }

    if(user.country === "DE") {
      user.flag = "/de-flag.png"
    } else if(user.country === "MX") {
      user.flag = "/mx-flag.png"
    }
    setUser(user);
  }

  const { firstName, lastName, profilePhoto, userFlag} = user

  return (<div>
    <span>{firstName}</span>
    <span>{lastName}</span>
    <img src={profilePhoto}/>
    <img src={userFlag}>
  </div>)
}复制代码

之后

哪些可能会导致问题?

在组件里添加业务逻辑( Business Logic )会让它变得很难维护,调试和测试。我的建议是让你的组件作为展示组件(presentational component)。这样,你可以独立出业务逻辑,然后专注于独立地测试该组件。前面的每个逻辑都混在一起。现在我们把每个职责分开,这样更容易测试和调试。

// UserProfilePage.jsx
// 操作所有的UserProfilePage相关,添加任何额外的props或业务逻辑

import { fetchUser } from '../api'

const UserProfilePage = props => {
  const [user, setUser] = React.useState(null);
  React.useEffect(() => {
    getUser();
  }, []);

  async function getUser() {
    const user = fetchUser(error => console.error(error))
    if(user.country === "DE") {
      user.flag = "/de-flag.png"
    } else if(user.country === "MX") {
      user.flag = "/mx-flag.png"
    }
    setUser(user);
  }
  return <UserProfile {...user}/>
}

// API.js
// 获取数据并处理错误

export const fetchUser = async (errorHandler) => {
  try {
    const user = await axios.get('/user/25')
    retrun user
  } catch(error) {
    errorHandler(error)
  }
}

// UserProfile.jsx
// UserProfile.jsx如下

const UserProfile = props => {
  const { firstName, lastName, profilePhoto, ...rest} = props
  return (<div {...rest}>
    <span>{firstName}</span>
    <span>{lastName}</span>
    <img src={profilePhoto}/>
  </div>)
}
复制代码


附加:如果你正在使用类型检查器,请让它发挥作用。

如果你的团队选择使用类型检查器,那么使用严格模式很重要,以确保它能发挥作用,来达到使用它的目的。

之前

const UserProfile = (props: any) => {
  const { firstName, lastName, profilePhoto, shouldShowPhoto } = props
  return (<div>
    <span>{firstName}</span>
    <span>{lastName}</span>
    <img src={profilePhoto}/>
  </div>)
}复制代码

之后

interface IUserProfile {
  firstName: string
  lastName: string
  profilePhoto: string
  shouldShowPhoto?: boolean
}

const UserProfile = (props: IUserProfile) => {
  const { firstName, lastName, profilePhoto, shouldShowPhoto } = props
  return (<div>
    <span>{firstName}</span>
    <span>{lastName}</span>
    {shouldShowPhoto && <img src={profilePhoto}/>}
  </div>)
}复制代码

我并不是说这些规则适用于所有项目,但你的团队需要制定自己的并且达成统一。

​你有哪些最佳实践/指南?

关于我

获取更多技术相关文章,关注公众号”前端女塾“。

回复加群,即可加入”前端仙女群“

您也可以扫描添加下方的微信并备注 Sol 加前端交流群,交流学习。