下面是我们部门总结的内部开发规范（试行版本），欢迎提意见。
部门FE React 组件开发规范
适用范围
部门FE 所有基于React开发的（包含fcui2）组件，欢迎提意见。
要求
必须：表示绝对要求这样做。
必须不：表示绝对不要求这样做。
应该/建议：表示一般情况下应该这样做，但是在某些特定情况下可以忽视这个要求。
应该不/不建议：表示一般情况下不应该这样做，但是在某些特定情况下可以忽视这个要求。
可以：表示这个要求完全是可选的，你可以这样做，也可以不这样做。
@H_403_31@
-
实例化生命周期
getDefaultPropsgetInitialStatecomponentWillMountrendercomponentDidMount
@H_403_31@
-
更新期生命周期
getInitialStatecomponentWillMountrendercomponentDidMount
@H_403_31@
-
运行期生命周期
componentWillReceivePropsshouldComponentUpdatecomponentWillUpdaterendercomponentDidUpdate
@H_403_31@
-
销毁期生命周期
componentWillUnmount
@H_403_31@
@H_403_31@
必须在UI内只依赖React，underscore。
必须不在UI内部任何地方使用jQuery等直接操作DOM的库
@H_403_31@
必须命名JSX文件为.jsx.js。
必须使用PascalCase作为文件名。
必须只包含一个React Component在一个JSX文件中。
必须令文件名与所包含的React Component名字相同。
-
必须只能使用
React.createClass()来创建一个React Component。> 虽然ES6 Class和pure function都可以创建React Component， > 但ES6 Class不能使用mixin做扩展，与目前的扩展方法冲突； > Pure function较难掌握和管理。
必须使用JSX语法来生成组件的DOM片段。
必须不能在JSX中出现
React.createElement()。必须遵守下面示例中的DOM片段对齐方式。
@H_403_31@
基本概念 [basic-concepts]
核心依赖 [deps]（针对内部UI库）
JSX书写 [jsx]
// bad
<Foo superLongParam="bar"
anotherSuperLongParam="baz" />
// good
<Foo
superLongParam="bar"
anotherSuperLongParam="baz"
/>
// if props fit in one line then keep it on the same line
<Foo bar="bar" />
// children get indented normally
<Foo
superLongParam="bar"
anotherSuperLongParam="baz"
>
<Quux />
</Foo>
-
必须在DOM片段中使用双引号
"。> Why？JSX attributes [can't contain escaped quotes](http://eslint.org/docs/rules/jsx-quotes),so double quotes make conjunctions like `"don't"` easier to type. > Regular HTML attributes also typically use double quotes instead of single,so JSX attributes mirror this convention.
@H_403_31@
// bad
<Foo bar='bar' />
// good
<Foo bar="bar" />
// bad
<Foo style={{ left: "20px" }} />
// good
<Foo style={{ left: '20px' }} />
// bad
<Foo/>
// very bad
<Foo />
// bad
<Foo
/>
// good
<Foo />
// bad
<Foo
UserName="hello"
phone_number={12345678}
/>
// good
<Foo
userName="hello"
phoneNumber={12345678}
/>
必须当props的值为字面值true时，省略
={true}。
@H_403_31@
// bad
<Foo
hidden={true}
/>
// good
<Foo
hidden
/>
必须在DOM片段前后加一对括号
()，当DOM片段在一行以上时。
@H_403_31@
// bad
render() {
return <MyComponent className="long body" foo="bar">
<MyChild />
</MyComponent>;
}
// good
render() {
return (
<MyComponent className="long body" foo="bar">
<MyChild />
</MyComponent>
);
}
// good,when single line
render() {
const body = <div>hello</div>;
return <MyComponent>{body}</MyComponent>;
}
// bad
<Foo className="stuff"></Foo>
// good
<Foo className="stuff" />
// bad
<Foo
bar="bar"
baz="baz" />
// good
<Foo
bar="bar"
baz="baz"
/>
-
必须将bind handler到this的动作放到构造函数中。
> Why? A bind call in the render path creates a brand new function on every single render.
@H_403_31@
// bad
class extends React.Component {
onClickDiv() {
// do stuff
}
render() {
return <div onClick={this.onClickDiv.bind(this)} />
}
}
// good
class extends React.Component {
constructor(props) {
super(props);
this.onClickDiv = this.onClickDiv.bind(this);
}
onClickDiv() {
// do stuff
}
render() {
return <div onClick={this.onClickDiv} />
}
}
-
displayNamepropTypescontextTypeschildContextTypesmixinsstaticsdefaultPropsgetDefaultPropsgetInitialStategetChildContextcomponentWillMountcomponentDidMountcomponentWillReceivePropsshouldComponentUpdatecomponentWillUpdatecomponentDidUpdatecomponentWillUnmountclickHandlers or eventHandlers like
onClickSubmit()oronChangeDescription()getter methods for
renderlikegetSelectReason()orgetFooterContent()Optional render methods like
renderNavigation()orrenderProfilePicture()render
@H_403_31@
必须将所有UI组件实现为[Pure Renderer] (https://facebook.github.io/react/docs/pure-render-mixin.html)。
必须在props中存放所有外部导入的配置，包括显示控制参数、显示数据源、当前值（如果是input类型组件）、回调方法等。state相同时，对于一个特定的props，对应的组件展现结果唯一。
必须在state中存放组件运行期的状态，如输入框是否通过了校验、鼠标是否悬浮在按钮上等。props相同时，对于一组特定的state，对应的组件展现效果唯一。
不应该在state中存在[通过props运算来的属性] (https://facebook.github.io/react/tips/props-in-getInitialState-as-anti-pattern.html)。
建议父子关系的组件间传递props时，使用[rest-spread语法] (https://facebook.github.io/react/docs/transferring-props.html)。
必须仅在实例化生命周期中绑定window或body事件。
必须在销毁期生命周期中解绑window或body事件。
- @H_403_31@
更多的通用组件规范 [general-guide]
[基本的JSX书写规范] (#jsx-jsx)基础上，更多的通用的React组件开发规范。
// bad
render() {
var cleverFunction = function () {};
// ...
}
// good
{
cleverFunction() {},render() {
// just use this.cleverFunction
}
}
