前端React框架下的书写规范

1.规范命名
变量名:驼峰法
例如:
isShow (isXXX: is开头的变量代表 boolean 类型)
teacherName (第一个字母不建议缩写,建议写全)
ids (xxxs:s结尾的变量代表 array 类型)
事件名:驼峰法
例如:
onTap (onXXX: on开头的方法名代表点击触发事件)
catchDown (catchXXX: catch开头的方法名与on类似,
在小程序中,catch事件不向上冒泡,bind事件冒泡)
方法名:驼峰法
例如:handleOk (handleXXX: 内部方法名,区分事件)
常用方法名简写
例如:
delXXX, updateXXX, hasXXX
组件名:大驼峰法
根据上下文路径命名
例如:路径 Home/List/index.tsx
组件名称为 HomeList
const HomeList:React.FC = (props) => {}
export default HomeList;
避免匿名组件的写法,如
export default (props) => {
},报错无法定位
2.规范文件
全局组件 components
例如:
src/components/Toast/index.tsx
路由组件 pages
例如:
src/page/Customer/Teacher/Check/index.tsx
模块组件 /pages/Customer/components
例如:
src/pages/Customer/components/Loading.tsx
3.规范写法
组件写法
书写顺序 props, useState, useEffect ...
例如:const User: React.FC = (props) => {
const { id } = props;
const [value, setValue] = useState([]);
const getList = (id) => {
setValue([...]);
}
useEffect(() => {
getList(id);
}, [id]);
return (


)
}
4.样式隔离
style 写法不适合组件式开发,css 功能缺少,例如 :hover 、媒体查询
Css-in-Js
例如:
JSS: 支持 媒体查询与 :hover
Aphrodite:与React Native写法一致
import { StyleSheet, css } from 'aphradite';
const Button = () => (

Red

)
const styles = StyleSheet.create({
red: {
backgroundColor: 'red
},
});
css Modules:支持全部 css 功能,但不支持动态 css
在 webpack 配置 css-loader, options 中 module: true 选项即可使用;
import styles from './index.css';
const Button = () => (

Red

)
缺点:css名必须是驼峰形式;全局css需要使用 :global;配置 babel-plugin-react-css-modules 解决;
styled-components:支持全部 css 功能,且支持动态 css
import styled from 'styled-component';
const Title = styled.h1font-size: 1.5em;;
const Wrapper= styled.spancolor: ${props => props.bgColor};
const App = () => (

Red

)
推荐:styled-jsx Emotion

你可能感兴趣的:(前端React框架下的书写规范)