前端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 (
<Table/>
)
}
4.样式隔离
style 写法不适合组件式开发，css 功能缺少，例如 :hover 、媒体查询
Css-in-Js
例如：
JSS： 支持 媒体查询与 :hover
Aphrodite：与React Native写法一致
import { StyleSheet, css } from 'aphradite';
const Button = () => (
<span className={css(styles.red)}>
Red
</span>
)
const styles = StyleSheet.create({
red: {
backgroundColor: 'red
},
});
css Modules：支持全部 css 功能，但不支持动态 css
在 webpack 配置 css-loader， options 中 module: true 选项即可使用；
import styles from './index.css';
const Button = () => (
<span className={styles.red}>
Red
</span>
)
缺点：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 = () => (
<Wrapper bgColor="red">
<Title>Red</Title>
</Wrapper>
)
推荐：styled-jsx Emotion