【React】知识点 #3
Comments
编写简洁漂亮，可维护的 React 应用转自：https://github.com/shimohq/react-cookbook 目录 |
React/JSX 中文编码规范[TOC] Airbnb React/JSX 编码规范 算是最合理的 React/JSX 编码规范之一了 此编码规范主要基于目前流行的 JavaScript 标准，尽管某些其他约定 (如 async/await，静态 class 属性) 可能在不同的项目中被引入或者被禁用。目前的状态是任何 stage-3 之前的规范都不包括也不推荐使用。 1. 基本规范 Basic Rules
2. 创建组件 Create Component官网文档： React Without ES6 、 Typechecking With PropTypes React 中可以通过三种方式创建组件：ES6
2.1 Class 写法如果组件有内部状态、引用 class Greeting extends React.Component {
// ...
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}这种情况下 import React from 'react';
import PropTypes from 'prop-types';
class Link extends React.Component {
static propTypes = {
id: PropTypes.number.isRequired,
url: PropTypes.string.isRequired,
size: React.PropTypes.oneOf(['large', 'small']),
text: PropTypes.string,
}
static defaultProps = {
size: 'large',
text: 'Hello World',
}
static methodsAreOk() {
return true;
}
render() {
return (
<a href={this.props.url} data-id={this.props.id}>
{this.props.text}
</a>
);
}
}
export default Link;
2.2 Function 写法如果没有内部状态、方法或引用 // bad ❌ (relying on function name inference is discouraged)
const Listing = ({ hello }) => (
<div>{hello}</div>
);
// good ✅
function Listing({ hello }) {
return <div>{hello}</div>;
}这种情况下 MyComp.propTypes = {
name: PropTypes.string
};
MyComp.defaultProps = {
name: 'jason'
};3. State 状态对于简单的初始化，直接使用 ES7 实例属性提案声明写法： class MyComp extends React.Component {
state = {
foo: 'bar'
};
// ....
}对于需要计算后才能初始化的 State，使用构造函数声明写法： class MyComp extends React.Component {
constructor(props) {
super(props);
this.state = {
foo: 'bar'
};
}
// ....
}不要对 // bad ❌
this.state.foo = 'bar';
this.forceUpdate();
// good ✅
this.setState({
foo: 'bar'
})4. Props 属性属性命名：
传递给 HTML 的属性：
<Foo
userName="hello"
phoneNumber={12345678}
/>
// bad ❌
<Foo
hidden={true}
/>
// good ✅
<Foo
hidden
/>
// bad
<div accessKey="h" />
// good
<div />
function Todos({ todos }) {
return (
{todos.map(todo => (
<Todo
{...todo}
key={todo.id}
/>
))}
)
}
// bad
function SFC({ foo, bar, children }) {
return <div>{foo}{bar}{children}</div>;
}
SFC.propTypes = {
foo: PropTypes.number.isRequired,
bar: PropTypes.string,
children: PropTypes.node,
};
// good
function SFC({ foo, bar, children }) {
return <div>{foo}{bar}{children}</div>;
}
SFC.propTypes = {
foo: PropTypes.number.isRequired,
bar: PropTypes.string,
children: PropTypes.node,
};
SFC.defaultProps = {
bar: '',
children: null,
};
例外情况:
function HOC(WrappedComponent) {
return class Proxy extends React.Component {
Proxy.propTypes = {
text: PropTypes.string,
isLoading: PropTypes.bool
};
render() {
return <WrappedComponent {...this.props} />
}
}
}
export default function Foo {
const props = {
text: '',
isPublished: false
}
return (<div {...props} />);
} 特别提醒：尽可能地筛选出不必要的属性。同时，使用prop-types-exact来预防问题出现。 // good
render() {
const { irrelevantProp, ...relevantProps } = this.props;
return <WrappedComponent {...relevantProps} />
}
// bad
render() {
const { irrelevantProp, ...relevantProps } = this.props;
return <WrappedComponent {...this.props} />
} 5. refs总是在Refs里使用回调函数. eslint: // bad ❌
<Foo
ref="myRef"
/>
// good ✅
<Foo
ref={(ref) => { this.myRef = ref }}
/>6. Mixins 混合
7. 函数 Methods推荐两种写法：
// 箭头函数写法 ✅
// class组件
class MyComp extends Component {
handleClick = () => {
console.log(this);
}
render() {
return <div onClick={this.handleClick}>Please Click!</div>;
}
}
// functional组件
function MyComp(props) {
return (
<ul>
{props.items.map((item, index) => (
<Item
key={item.key}
onClick={() => doSomethingWith(item.name, index)}
/>
))}
</ul>
)
}// 构造函数中绑定写法 ✅
class MyComp extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log(this);
}
render() {
return <div onClick={this.handleClick}>Please Click!</div>;
}
}
// bad ❌
class MyComp extends Component {
handleClick() {
console.log(this)
}
render() {
return <div onClick={this.handleClick.bind(this)}>Please Click!</div>;
}
}
8. 组件代码顺序
9. 组件声明 Declaration不要使用 // bad
export default React.createClass({
displayName: 'ReservationCard',
// stuff goes here
})
// good
class ReservationCard extends React.Component {
// stuff...
}
export default ReservationCard10. 代码对齐 Alignment
11. 其他命名 Naming
引用命名 // bad
import reservationCard from './ReservationCard';
// good
import ReservationCard from './ReservationCard';
// bad
const ReservationItem = <ReservationCard />;
// good
const reservationItem = <ReservationCard />;高阶组件命名
/**
* 高阶组件HOC 命名
*/
// bad ❌
export default function withFoo(WrappedComponent) {
return function WithFoo(props) {
return <WrappedComponent {...props} foo />;
}
}
// good ✅
export default function withFoo(WrappedComponent) {
function WithFoo(props) {
return <WrappedComponent {...props} foo />;
}
const wrappedComponentName = WrappedComponent.displayName
|| WrappedComponent.name
|| 'Component';
WithFoo.displayName = `withFoo(${wrappedComponentName})`;
return WithFoo;
}属性命名: 避免使用DOM相关的属性来用作其他的用途。
// bad
<MyComponent style="fancy" />
// good
<MyComponent variant="fancy" />标签 Tags对于没有子元素的标签自关闭，对于有多个属性的使用多行书写，并在新行关闭： <Foo className="stuff" />
<Foo
bar="bar"
baz="baz"
/>空格 Spacing总是在自闭合的标签 <Foo />
<Foo bar={baz} />引号 Quotes属性值使用双引号，其他都使用单引号。 <Foo bar={baz} foo="bar" />
// good { left: '20px' } 为一个对象
<Foo style={{ left: '20px' }} />括号 Parentheses将多行的 JSX 标签写在 // bad ❌
render() {
return <MyComponent className="long body" foo="bar">
<MyChild />
</MyComponent>
}
// good ✅
render() {
return (
<MyComponent className="long body" foo="bar">
<MyChild />
</MyComponent>
)
}
// good, ✅ 单行可以不需要
render() {
const body = <div>hello</div>;
return <MyComponent>{body}</MyComponent>;
}key避免使用数组的索引作为 // bad ❌
{todos.map((todo, index) =>
<Todo
{...todo}
key={index}
/>
)}
// good ✅
{todos.map(todo => (
<Todo
{...todo}
key={todo.id}
/>
))}同时满足以下条件时可以使用数组索引作为
参考 |
|
. |
4 similar comments
|
. |
|
. |
|
. |
|
. |
系列博客整理：
The text was updated successfully, but these errors were encountered: