小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
本文同时参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金
1、基础规则
- 一个文件声明一个组件: 尽管可以在一个文件中声明多个 React 组件,但是最好不要这样做;推荐一个文件声明一个 React 组件,并只导出一个组件;
- 使用 JSX 表达式: 不要使用 React.createElement 的写法;
- 函数组件和 class 类组件的使用场景: 如果定义的组件不需要 props 和 state ,建议将组件定义成函数组件,否则定义成 class 类组件。
2、组件声明
(1)组件名称和定义该组件的文件名称建议要保持一致;
推荐:
import Footer from './Footer';
不推荐:
import Footer from './Footer/index';
(2)不要使用 displayName
属性来定义组件的名称,应该在 class
或者 function
关键字后面直接声明组件的名称。
推荐:
export default class MyComponent extends React.Component {}
不推荐:
export default React.Component({ displayName: 'MyComponent'});
3、React 中的命名
- 组件名称: 推荐使用大驼峰命名;
- 属性名称: React DOM 使用小驼峰命令来定义属性的名称,而不使用 HTML 属性名称的命名约定;
- style 样式属性: 采用小驼峰命名属性的 JavaScript 对象; 推荐:
// 组件名称:MyComponent
// 属性名称:onClick
// 样式属性:backgroundColor
4、JSX 写法注意
4.1、标签
(1)当标签没有子元素的时候,始终使用自闭合的标签 。
推荐:
// Good:<Component />
不推荐:
<Component></Component>
(2)如果标签有多行属性,关闭标签要另起一行 。
推荐:
<Component
bar="bar"
baz="baz"
/>
不推荐:
<Component
bar="bar"
baz="baz" />
(3)在自闭标签之前留一个空格。
推荐:
<Foo />
不推荐:
<Foo/>
<Foo />
<Foo
/>
(4)当组件跨行时,要用括号包裹 JSX 标签。
推荐:
render() {
return (
<MyComponent className="long body" foo="bar">
<MyChild />
</MyComponent>
);
}
不推荐:
render() {
return <MyComponent className="long body" foo="bar">
<MyChild />
</MyComponent>;
}
4.2、对齐
JSX 语法使用下列的对齐方式 :
// 推荐
<Foo
superLongParam="bar"
anotherSuperLongParam="baz"
/>
// 如果组件的属性可以放在一行(一个属性时)就保持在当前一行中
<Foo bar="bar" />
// 多行属性采用缩进
<Foo
superLongParam="bar"
anotherSuperLongParam="baz"
>
<Quux />
</Foo>
// 不推荐
<Foo superLongParam="bar"
anotherSuperLongParam="baz" />
4.3、引号
JSX 的属性都采用双引号,其他的 JS 都使用单引号 ,因为 JSX 属性 不能包含转义的引号, 所以当输入 "don't" 这类的缩写的时候用双引号会更方便。
推荐:
<Foo bar="bar" />
<Foo style={{ left: ‘20px' }} />
不推荐:
<Foo bar='bar' />
<Foo style={{ left: "20px" }} />
5、样式写法
React 中样式可以使用 style 行内样式,也可以使用 className 属性来引用外部 CSS 样式表中定义的 CSS 类,我们推荐使用 className 来定义样式。并且推荐使用 LESS、SCSS 来替换传统的 CSS 写法,具体 SCSS 提高效率的写法可以参照文章。
6、defaultProps 使用静态属性定义
defaultProps 推荐使用静态属性定义,不推荐在 class 外进行定义。
推荐:
class Example extends React.Component {
static defaultProps = {
name: 'stranger'
}
render() {
// ...
}
}
不推荐:
class Example extends React.Component {
render() {
// ...
}
}
Example.propTypes = {
name: PropTypes.string
};
7、key 属性设置
key 帮助 React 识别哪些元素改变了,比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识。 当元素没有确定 id 的时候,万不得已你可以使用元素索引 index 作为 key,但是要主要如果列表项目的顺序可能会变化,如果使用索引来用作 key 值,因为这样做会导致性能变差,还可能引起组件状态的问题。
推荐:
{todos.map(todo => (
<Todo
{...todo}
key={todo.id}
/>
))}
不推荐:
{todos.map((todo, index) =>
<Todo
{...todo}
key={index}
/>
)}
8、为组件绑定事件处理器
React 为组件绑定事件处理器提供 4 种方法,有 public class fields 语法、构造函数中进行绑定、在回调中使用箭头函数、使用 Function.prototype.bind 进行绑定,我们推荐使用 public class fields 语法,在不满足需求情况下使用箭头函数的写法(传递参数给事件处理器)。
推荐:
handleClick = () => {
console.log('this is:', this);
}
<button onClick={this.handleClick}> Click me </button>
不推荐:
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(){
console.log('this is:', this);
}
<button onClick={this.handleClick}> Click me </button>
未完请主页看<React 开发规范(下)>
点赞支持、手留余香、与有荣焉,动动你发财的小手哟,感谢各位大佬能留下您的足迹。
往期精彩推荐
Vue 虚拟 DOM 搞不懂?这篇文章帮你彻底搞定虚拟 DOM
Git 相关推荐
面试相关推荐
更多精彩详见:个人主页