[译]提高你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 加前端交流群，交流学习。