使用React的10个编码习惯

·  阅读 165
使用React的10个编码习惯

使用React时,一些比较好的习惯。系好安全带,准备发车

1.使用JSX的简写

值为boolean的时候,可以使用jsx的简写方式。

Bad

return (
  <Navbar showTitle={true} />
);
复制代码

Good

return (
  <Navbar showTitle />
)
复制代码

2.三元表达式

对于简单的if else判断建议使用三元表达式

Bad

const { role } = user;

if(role === ADMIN) {
  return <AdminUser />
}else{
  return <NormalUser />
}
复制代码

Good

const { role } = user;

return role === ADMIN ? <AdminUser /> : <NormalUser />
复制代码

3.灵活使用对象字面量

有时候,对象字面量,就相当于map,可以提高代码的可读性

Bad

const {role} = user

switch(role){
  case ADMIN:
    return <AdminUser />
  case EMPLOYEE:
    return <EmployeeUser />
  case USER:
    return <NormalUser />
}
复制代码

Good

const {role} = user

const components = {
  ADMIN: AdminUser,
  EMPLOYEE: EmployeeUser,
  USER: NormalUser
};

const Component = components[role];

return <Componenent />;
复制代码

4.使用<>

合理的使用 <></> 代替<div></div>,可以减少创建的虚拟 DOM节点,保持了代码的整洁并且对性能也有好处。

Bad

return (
  <div>
     <Component1 />
     <Component2 />
     <Component3 />
  </div>  
)
复制代码

Good

return (
  <>
     <Component1 />
     <Component2 />
     <Component3 />
  </>  
)
复制代码

5.不建议在Render里面定义函数

不建议在渲染中定义函数。尽量将渲染函数内部的逻辑保持在最低限度

Bad


return (
    <button onClick={() => dispatch(ACTION_TO_SEND_DATA)}>    // NOTICE HERE
      这是一个不好的例子
    </button>  
)
复制代码

Good

const submitData = () => dispatch(ACTION_TO_SEND_DATA)

return (
  <button onClick={submitData}>  
    建议这种方式
  </button>  
)
复制代码

6.解构对象

Bad

return (
  <>
    <div> {user.name} </div>
    <div> {user.age} </div>
    <div> {user.profession} </div>
  </>  
)
复制代码

Good


const { name, age, profession } = user;

return (
  <>
    <div> {name} </div>
    <div> {age} </div>
    <div> {profession} </div>
  </>  
)
复制代码

7.import分类管理

Bad

import React from 'react';
import ErrorImg from '../../assets/images/error.png';
import styled from 'styled-components/native';
import colors from '../../styles/colors';
import { PropTypes } from 'prop-types';
复制代码

Good

建议分为一下顺序:

  • 内置
  • 外部
  • 内部
import React from 'react';

import { PropTypes } from 'prop-types';
import styled from 'styled-components/native';

import ErrorImg from '../../assets/images/error.png';
import colors from '../../styles/colors';
复制代码

8.组件命名

建议使用 PascalCase方式

Bad

import reservationCard from './ReservationCard';

const ReservationItem = <ReservationCard />;
复制代码

Good


import ReservationCard from './ReservationCard';

const reservationItem = <ReservationCard />;
复制代码

9.属性命名

建议使用camelCase方式

Bad

<Component
  UserName="hello"
  phone_number={12345678}
/>
复制代码

Good


<MyComponent
  userName="hello"
  phoneNumber={12345678}
/>
复制代码

10.闭合标签

如果组件没有太多的子组件,建议自我闭合标签,可以提高阅读性

Bad

<SomeComponent variant="stuff"></SomeComponent>
复制代码

Good

<SomeComponent variant="stuff" />
复制代码

参考资料

最后

希望以上10点建议对你有用。

愿世界和平

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改