-
Notifications
You must be signed in to change notification settings - Fork 10
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
【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 ReservationCard 10. 代码对齐 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: