--- theme: smartblue highlight: vs2015 --- **小知识，大挑战！本文正在参与“[程序员必备小知识](https://juejin.cn/post/7008476801634680869 "https://juejin.cn/post/7008476801634680869")”创作活动。** **本文同时参与** **[「掘力星计划」](https://juejin.cn/post/7012210233804079141 "https://juejin.cn/post/7012210233804079141")** **，赢取创作大礼包，挑战创作激励金** # 1、基础规则 - 一个文件声明一个组件：尽管可以在一个文件中声明多个 React 组件，但是最好不要这样做；推荐一个文件声明一个 React 组件，并只导出一个组件； - 使用 JSX 表达式：不要使用 React.createElement 的写法； - 函数组件和 class 类组件的使用场景：如果定义的组件不需要 props 和 state ，建议将组件定义成函数组件，否则定义成 class 类组件。 # 2、组件声明（1）组件名称和定义该组件的文件名称建议要保持一致； **推荐：** ```js import Footer from './Footer'; ``` **不推荐：** ```js import Footer from './Footer/index'; ``` （2）不要使用 `displayName` 属性来定义组件的名称，应该在 `class` 或者 `function` 关键字后面直接声明组件的名称。 **推荐：** ```js export default class MyComponent extends React.Component {} ``` 不推荐： ```js export default React.Component({ displayName: 'MyComponent'}); ``` # 3、React 中的命名 - 组件名称：推荐使用大驼峰命名; - 属性名称： React DOM 使用小驼峰命令来定义属性的名称，而不使用 HTML 属性名称的命名约定； - style 样式属性：采用小驼峰命名属性的 JavaScript 对象； **推荐：** ```js // 组件名称：MyComponent // 属性名称：onClick // 样式属性：backgroundColor ``` # 4、JSX 写法注意 ## 4.1、标签（1）当标签没有子元素的时候，始终使用自闭合的标签。 **推荐：** ```html // Good： ``` **不推荐：** ```html ``` （2）如果标签有多行属性，关闭标签要另起一行。 **推荐：** ```js ``` **不推荐：** ```html ``` （3）在自闭标签之前留一个空格。 **推荐：** ```html ``` **不推荐:** ```html ``` （4）当组件跨行时，要用括号包裹 JSX 标签。 **推荐：** ```js render() { return ( ); } ``` **不推荐：** ```js render() { return ; } ``` ## 4.2、对齐 JSX 语法使用下列的对齐方式： ```html // 推荐 // 如果组件的属性可以放在一行（一个属性时）就保持在当前一行中 // 多行属性采用缩进 // 不推荐 ``` ## 4.3、引号 JSX 的属性都采用双引号，其他的 JS 都使用单引号，因为 JSX 属性不能包含转义的引号, 所以当输入 "don't" 这类的缩写的时候用双引号会更方便。 **推荐：** ```html ``` **不推荐：** ```js ``` # 5、样式写法 React 中样式可以使用 style 行内样式，也可以使用 className 属性来引用外部 CSS 样式表中定义的 CSS 类，我们推荐使用 className 来定义样式。并且推荐使用 LESS、SCSS 来替换传统的 CSS 写法，具体 SCSS 提高效率的写法可以参照文章。 # 6、defaultProps 使用静态属性定义 defaultProps 推荐使用静态属性定义，不推荐在 class 外进行定义。 **推荐：** ```js class Example extends React.Component { static defaultProps = { name: 'stranger' } render() { // ... } } ``` **不推荐：** ```js class Example extends React.Component { render() { // ... } } Example.propTypes = { name: PropTypes.string }; ``` # 7、key 属性设置 key 帮助 React 识别哪些元素改变了，比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。当元素没有确定 id 的时候，万不得已你可以使用元素索引 index 作为 key，但是要主要如果列表项目的顺序可能会变化，如果使用索引来用作 key 值，因为这样做会导致性能变差，还可能引起组件状态的问题。 **推荐：** ```js {todos.map(todo => ( ))} ``` **不推荐：** ```js {todos.map((todo, index) => )} ``` # 8、为组件绑定事件处理器 React 为组件绑定事件处理器提供 4 种方法，有 public class fields 语法、构造函数中进行绑定、在回调中使用箭头函数、使用 Function.prototype.bind 进行绑定，我们推荐使用 public class fields 语法，在不满足需求情况下使用箭头函数的写法（传递参数给事件处理器）。 **推荐：** ```js handleClick = () => { console.log('this is:', this); } ``` **不推荐：** ```js constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); } handleClick(){ console.log('this is:', this); } ``` **未完请主页看[](https://juejin.cn/post/7023922661516378148/)** > 点赞支持、手留余香、与有荣焉，动动你发财的小手哟，感谢各位大佬能留下您的足迹。 ![11.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/460324a0187143b5b4c485a39c92cec8~tplv-k3u1fbpfcp-watermark.image) ## 往期精彩推荐 [ Vue 开发规范](https://juejin.cn/post/7023188232368029710) [移动端横竖屏适配与刘海适配](https://juejin.cn/post/7020210152410185742) [移动端常见问题汇总](https://juejin.cn/post/7021321921031569439) [前端常用的几种加密方法](https://juejin.cn/post/7011306453373812744) [canvas 爬坑路【方法篇】](https://juejin.cn/post/7002024507686780935) [不懂 seo 优化？一篇文章帮你了解如何去做 seo 优化](https://juejin.cn/post/7000913022348689422) [canvas 爬坑路【属性篇】](https://juejin.cn/post/7000553887392333855) [【实战篇】微信小程序开发指南和优化实践](https://juejin.cn/post/6999812394276896804) [聊一聊移动端适配](https://juejin.cn/post/6999438892441026591) [前端性能优化实战](https://juejin.cn/post/6996927481563316260) [聊聊让人头疼的正则表达式](https://juejin.cn/post/6993898348168085534) [获取文件blob流地址实现下载功能](https://juejin.cn/post/6994707174819627039) [Vue 虚拟 DOM 搞不懂？这篇文章帮你彻底搞定虚拟 DOM](https://juejin.cn/post/6997579802215448606) **Git 相关推荐** [通俗易懂的 Git 入门](https://juejin.cn/post/6997208131558178847) [git 实现自动推送](https://juejin.cn/post/6995362358130376740) **面试相关推荐** [前端万字面经——基础篇](https://juejin.cn/post/6992767550543265829) [前端万字面积——进阶篇](https://juejin.cn/post/6993141036600000548) 更多精彩详见：[个人主页](https://juejin.cn/user/870468941775719/posts)