最近开始研究公司前端web商城(React)和前期APP(React Native)的维护,发现了同事之间的代码风格差距太大,为了以后更好的阅读代码,整理一下React和JSX的一些编码规范。
1.基本规范
- 每个文件只包含一个React组件,命名要顾名知义。
- React Native 和 React都要尽可能的使用ES6语法。
- console在调试时写，调试完立即删除。
2.命名规范
- 文件名称：
文件夹和文件名要使用大驼峰命名法,比如 HomeIndex.js;
通用的组件放在Component文件夹。入口文件要明确，一般可以使用index.js。
React Native中如果仅有android/ios其中一端的功能,在文件的尾加.android/.ios,
比如：KeyBoard.android.js和KeyBoard.ios.js。杜绝1、2、3、one、two、three之类名称,用功能或者是模块来命名。
调用原生android/ios都写在同一个.js文件内，如果是Dialog之类的用途广泛的，
可放在BaseView文件夹上，否则放在Action对应的业务文件夹内。
3.属性
3.1 属性名
- 在React中className代替class属性,htmlFor代替for属性。
- 使用外联样式时,属性名最好带有Style关键字。比如:flexStyle.js
3.2属性设置
- 在封装的组件内一定要设置属性(以便propTypes校验),不要在外部改变属性的值。
- 属性较多使用{...this.props}语法。(最好在属性开头加上{...this.props},为了防止少写属性,产生报错)
- 如果重复设置属性值时,前面的值会被后面的覆盖。
3.3属性对齐方式
3.4行内迭代
return (
<div>
{this.props.data.map(function(data, i) {
return (<Component data={data} key={i} />)
})}
</div>
);
4.注释
- 组件之间的注释需要用 {/* 注释内容 */} 包裹。
var content = (
<Nav>
{/* child comment, put {} around */}
<Person
/* multi
line
comment */
name={window.isLoggedIn ? window.name : ''} // end of line comment
/>
</Nav>
);
5.引号使用
// bad
<Foo bar='bar' />
// good
<Foo bar="bar" />
// bad
<Foo style={{ left: "20px" }} />
// good
<Foo style={{ left: '20px' }} />
// JavaScript Expression
const person = <Person name={window.isLoggedIn ? window.name : ''} />;
// HTML/JSX
const myDivElement = <div className="foo" />;
const app = <Nav color="blue" />;
const content = (
<Container>
{window.isLoggedIn ? <Nav /> : <Login />}
</Container>
);
6. 条件 HTML
{this.state.show && 'This is Shown'}
{this.state.on ? 'On' : 'Off'}
- 较复杂的结构可以在 .render()方法内定义一个以 Html结尾的变量。
var dinosaurHtml = '';if (this.state.showDinosaurs) { dinosaurHtml = ( <section> <DinosaurTable /> <DinosaurPager /> </section> );}return ( <div> ... {dinosaurHtml} ... </div>);
[
](https://github.com/minwe/style-guide/blob/master/React.js.md#-使用)
7.() 使用
- 多行的 JSX 使用 () 包裹，有组件嵌套时使用多行模式；
// bad
return (<div><ComponentOne /><ComponentTwo /></div>);
// good
var multilineJsx = (
<header>
<Logo />
<Nav />
</header>
);
// good
return (
<div>
<ComponentOne />
<ComponentTwo />
</div>
);
var singleLineJsx = <h1>Simple JSX</h1>;
// good, when single line
render() {
const body = <div>hello</div>;
return <MyComponent>{body}</MyComponent>;
}
8.自闭合标签
- 没有子元素的组件使用自闭合语法，自闭合标签 / 前留一个空格。
// bad
<Logo></Logo>
<Logo/>
// very bad
<Foo />
// bad
<Foo
/>
// good
<Logo />
9.组件内部代码组织
// bad
React.createClass({
_onClickSubmit() {
// do stuff
}
// other stuff
});
// good
React.createClass({
onClickSubmit() {
// do stuff
}
// other stuff
});
- 按照生命周期组顺序织组件的方法、属性；
- 方法（属性）之间空一行；
- .render() 方法始终放在最后；
- 自定义方法 React API 方法之后、.render() 之前。
// React 组件中按照以下顺序组织代码
React.createClass({
displayName: '',
mixins: [],
statics: {},
propTypes: {},
getDefaultProps() {
// ...
},
getInitialState() {
// do something
},
componentWillMount() {
// do something
},
componentDidMount() {
// do something: add DOM event listener, etc.
},
componentWillReceiveProps() {
},
shouldComponentUpdate() {},
componentWillUpdate() {},
componentDidUpdate() {},
componentWillUnmount() {
// do something: remove DOM event listener. etc.
},
// clickHandlers or eventHandlers like onClickSubmit() or onChangeDescription()
handleClick() {
// ...
},
// getter methods for render like getSelectReason() or getFooterContent()
// Optional render methods like renderNavigation() or renderProfilePicture()
render() {
// ...
}
});
