merge
This commit is contained in:
BoyuZhou
commit
26a773ebd8
|
|
@ -2,7 +2,22 @@
|
|||
<project version="4">
|
||||
<component name="ChangeListManager">
|
||||
<list default="true" id="e6268886-b616-4b3f-a001-08a3385e36ae" name="Default" comment="">
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/.idea/workspace.xml" afterPath="$PROJECT_DIR$/.idea/workspace.xml" />
|
||||
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/media/15093423504762/15094349601186.jpg" />
|
||||
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/media/15093423504762/15094350133475.jpg" />
|
||||
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/media/15093423504762/15094367228974.png" />
|
||||
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/media/15093423504762/15094367812628.jpg" />
|
||||
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/media/15093423504762/15094370124130.jpg" />
|
||||
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/media/15093423504762/15094480240094.jpg" />
|
||||
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/media/15093423504762/15094483064241.jpg" />
|
||||
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/media/15093486333182/15094390880861.jpg" />
|
||||
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/media/15093486333182/15094393010120.jpg" />
|
||||
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/media/15096985213268/15101285258182.jpg" />
|
||||
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/media/15096985213268/15101285321317.jpg" />
|
||||
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/media/15096985213268/15101286812451.jpg" />
|
||||
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/bee-tools集成changelog使用方式.md" />
|
||||
<change type="NEW" beforePath="" afterPath="$PROJECT_DIR$/changelog使用方式.md" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/react编码规范.md" afterPath="$PROJECT_DIR$/react编码规范.md" />
|
||||
<change type="MODIFICATION" beforePath="$PROJECT_DIR$/组件版本及分支管理.md" afterPath="$PROJECT_DIR$/组件版本及分支管理.md" />
|
||||
</list>
|
||||
<ignored path="$PROJECT_DIR$/.tmp/" />
|
||||
<ignored path="$PROJECT_DIR$/temp/" />
|
||||
|
|
@ -17,20 +32,20 @@
|
|||
<component name="ExecutionTargetManager" SELECTED_TARGET="default_target" />
|
||||
<component name="FileEditorManager">
|
||||
<leaf SIDE_TABS_SIZE_LIMIT_KEY="300">
|
||||
<file leaf-file-name="react编码规范.md" pinned="false" current-in-tab="false">
|
||||
<file leaf-file-name="react编码规范.md" pinned="false" current-in-tab="true">
|
||||
<entry file="file://$PROJECT_DIR$/react编码规范.md">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="234">
|
||||
<caret line="102" column="15" lean-forward="true" selection-start-line="102" selection-start-column="15" selection-end-line="102" selection-end-column="15" />
|
||||
<state relative-caret-position="1697">
|
||||
<caret line="637" column="0" lean-forward="true" selection-start-line="637" selection-start-column="0" selection-end-line="637" selection-end-column="0" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
</file>
|
||||
<file leaf-file-name="如何写一个标准的react组件.md" pinned="false" current-in-tab="true">
|
||||
<file leaf-file-name="如何写一个标准的react组件.md" pinned="false" current-in-tab="false">
|
||||
<entry file="file://$PROJECT_DIR$/如何写一个标准的react组件.md">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="856">
|
||||
<state relative-caret-position="556">
|
||||
<caret line="145" column="25" lean-forward="false" selection-start-line="145" selection-start-column="25" selection-end-line="145" selection-end-column="25" />
|
||||
<folding />
|
||||
</state>
|
||||
|
|
@ -53,10 +68,10 @@
|
|||
<option name="CHANGED_PATHS">
|
||||
<list>
|
||||
<option value="$PROJECT_DIR$/组件划分原则.md" />
|
||||
<option value="$PROJECT_DIR$/react编码规范.md" />
|
||||
<option value="$PROJECT_DIR$/.gitignore" />
|
||||
<option value="$PROJECT_DIR$/现有组件及待开发.md" />
|
||||
<option value="$PROJECT_DIR$/如何写一个标准的react组件.md" />
|
||||
<option value="$PROJECT_DIR$/react编码规范.md" />
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
|
|
@ -89,7 +104,6 @@
|
|||
<foldersAlwaysOnTop value="true" />
|
||||
</navigator>
|
||||
<panes>
|
||||
<pane id="Scope" />
|
||||
<pane id="ProjectPane">
|
||||
<subPane>
|
||||
<PATH>
|
||||
|
|
@ -104,6 +118,7 @@
|
|||
</PATH>
|
||||
</subPane>
|
||||
</pane>
|
||||
<pane id="Scope" />
|
||||
<pane id="Scratches" />
|
||||
</panes>
|
||||
</component>
|
||||
|
|
@ -208,14 +223,16 @@
|
|||
<workItem from="1502951842356" duration="3929000" />
|
||||
<workItem from="1503381253636" duration="5666000" />
|
||||
<workItem from="1503456051856" duration="836000" />
|
||||
<workItem from="1510725706571" duration="68000" />
|
||||
</task>
|
||||
<servers />
|
||||
</component>
|
||||
<component name="TimeTrackingManager">
|
||||
<option name="totallyTimeSpent" value="10431000" />
|
||||
<option name="totallyTimeSpent" value="10499000" />
|
||||
</component>
|
||||
<component name="ToolWindowManager">
|
||||
<frame x="-8" y="0" width="1228" height="1084" extended-state="0" />
|
||||
<editor active="true" />
|
||||
<layout>
|
||||
<window_info id="Project" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.18235295" sideWeight="0.5" order="0" side_tool="false" content_ui="combo" />
|
||||
<window_info id="TODO" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="6" side_tool="false" content_ui="tabs" />
|
||||
|
|
@ -223,7 +240,7 @@
|
|||
<window_info id="Run" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Version Control" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Structure" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="1" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Terminal" active="true" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.3336842" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Terminal" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="true" show_stripe_button="true" weight="0.3336842" sideWeight="0.5" order="7" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Debug" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.4" sideWeight="0.5" order="3" side_tool="false" content_ui="tabs" />
|
||||
<window_info id="Favorites" active="false" anchor="left" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.33" sideWeight="0.5" order="2" side_tool="true" content_ui="tabs" />
|
||||
<window_info id="Cvs" active="false" anchor="bottom" auto_hide="false" internal_type="DOCKED" type="DOCKED" visible="false" show_stripe_button="true" weight="0.25" sideWeight="0.5" order="4" side_tool="false" content_ui="tabs" />
|
||||
|
|
@ -246,6 +263,22 @@
|
|||
<watches-manager />
|
||||
</component>
|
||||
<component name="editorHistoryManager">
|
||||
<entry file="file://$PROJECT_DIR$/react编码规范.md">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="2652">
|
||||
<caret line="102" column="15" lean-forward="true" selection-start-line="102" selection-start-column="15" selection-end-line="102" selection-end-column="15" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/如何写一个标准的react组件.md">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="3770">
|
||||
<caret line="145" column="25" lean-forward="false" selection-start-line="145" selection-start-column="25" selection-end-line="145" selection-end-column="25" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/react编码规范.md">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="0">
|
||||
|
|
@ -326,18 +359,18 @@
|
|||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/react编码规范.md">
|
||||
<entry file="file://$PROJECT_DIR$/如何写一个标准的react组件.md">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="234">
|
||||
<caret line="102" column="15" lean-forward="true" selection-start-line="102" selection-start-column="15" selection-end-line="102" selection-end-column="15" />
|
||||
<state relative-caret-position="556">
|
||||
<caret line="145" column="25" lean-forward="false" selection-start-line="145" selection-start-column="25" selection-end-line="145" selection-end-column="25" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
</entry>
|
||||
<entry file="file://$PROJECT_DIR$/如何写一个标准的react组件.md">
|
||||
<entry file="file://$PROJECT_DIR$/react编码规范.md">
|
||||
<provider selected="true" editor-type-id="text-editor">
|
||||
<state relative-caret-position="856">
|
||||
<caret line="145" column="25" lean-forward="false" selection-start-line="145" selection-start-column="25" selection-end-line="145" selection-end-column="25" />
|
||||
<state relative-caret-position="1697">
|
||||
<caret line="637" column="0" lean-forward="true" selection-start-line="637" selection-start-column="0" selection-end-line="637" selection-end-column="0" />
|
||||
<folding />
|
||||
</state>
|
||||
</provider>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,112 @@
|
|||
# bee-tools集成changelog使用方式
|
||||
|
||||
## 1、安装Commitizen
|
||||
|
||||
> Commitizen是一个格式化commit message的工具。
|
||||
> bee-tools 请更新到最新版本。【0.4.2】
|
||||
|
||||
npm install -g commitizen
|
||||
|
||||
npm install bee-tools/npm update bee-tools
|
||||
|
||||
## 2、初始化配置
|
||||
|
||||
>如果你项目中已经安装了changelog忽略此步骤
|
||||
|
||||
在项目中执行
|
||||
|
||||
bee-tools run changelogInit
|
||||
|
||||
## 3、带log的提交
|
||||
|
||||
完成上面2步骤后，如果想生成带log的提交，执行
|
||||
|
||||
git cz
|
||||
....(参考git cz命令截图)。
|
||||
|
||||
## 4、发布上线
|
||||
|
||||
执行 bee-tools run pub
|
||||
|
||||
1. 如果修改一次性把bug修复完毕，且提交不用执行第3步骤,在执行pub是可以设置log。
|
||||
2. 如果分批提交，且修改同一个bug，生成多条log记录。需要在每次提交时执行git cz，最后一次次可以直接执行。
|
||||
|
||||
执行 bee-tools run pub
|
||||
|
||||
1. please enter the package version to publish (should be xx.xx.xx) (1.0.2) //输入即将要发布的版本号
|
||||
|
||||
2. do you wang run changelog ?(y/n) (y) // y或直接回车
|
||||
|
||||
3. Select the type of change that you're committing: (Use arrow keys) // 选择本次修改的类型。
|
||||
❯ feat: A new feature
|
||||
fix: A bug fix
|
||||
docs: Documentation only changes
|
||||
style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi
|
||||
-colons, etc)
|
||||
refactor: A code change that neither fixes a bug nor adds a feature
|
||||
perf: A code change that improves performance
|
||||
test: Adding missing tests or correcting existing tests
|
||||
|
||||
|
||||
|
||||
4. What is the scope of this change (e.g. component or file name)? (press enter to skip) //输入描述(50字以内)
|
||||
|
||||
eg: > 本次修复了弹出框的问题。
|
||||
|
||||
5. Write a short, imperative tense description of the change: //
|
||||
|
||||
eg: > 请参考issues中回复。
|
||||
|
||||
6. Provide a longer description of the change: (press enter to skip)
|
||||
|
||||
eg: > 回车
|
||||
|
||||
7. Are there any breaking changes?
|
||||
|
||||
eg: > y
|
||||
|
||||
8. Describe the breaking changes
|
||||
eg: > 1. 修改了弹出框的问题。
|
||||
2. 修复了xx问题。
|
||||
|
||||
9. Does this change affect any open issues? (y/N)
|
||||
|
||||
eg: > y
|
||||
|
||||
10. Add issue references (e.g. "fix #123", "re #123".):
|
||||
|
||||
Closes #x //issues 的编号
|
||||
|
||||
|
||||
如果确定修改完毕，执行发布命令，在发布命令中，会让你输入是否是否再次生成log 的提交。(可选)
|
||||
|
||||
## 5、关闭issues
|
||||
|
||||
Closes issues编号
|
||||
eg：Closes #8
|
||||
|
||||
## 6、git cz 命令截图
|
||||
|
||||
|
||||
## 7、效果截图
|
||||
|
||||
|
||||
|
||||
## 注解
|
||||
|
||||
用来标识 commit 的类型，总共有以下 11 个标识：
|
||||
|
||||
feat: 添加了一个新功能
|
||||
fix: 修复了一个 bug
|
||||
docs: 文档发生修改
|
||||
style: 不影响代码运行的更改（空格，格式，缺少分号等）
|
||||
refactor: 重构代码且不引进新的功能或修复 bug
|
||||
perf: 代码优化
|
||||
test: 添加或修改测试用例
|
||||
build: 构建工具或外部依赖的更改（npm，webpack，gulp等）
|
||||
ci: 更改项目级的配置文件或脚本
|
||||
chore: 除上述之外的修改
|
||||
revert: 撤销改动先前的提交
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
# changelog使用方式
|
||||
|
||||
## 1、Commitizen
|
||||
|
||||
> Commitizen是一个格式化commit message的工具。
|
||||
|
||||
npm install -g commitizen
|
||||
|
||||
进入项目执行
|
||||
|
||||
commitizen init cz-conventional-changelog --save --save-exact
|
||||
|
||||
>此操作会修改package.json文件。
|
||||
>
|
||||
|
||||
git cz替换git commit命令
|
||||
|
||||
|
||||
|
||||
|
||||
## 2、conventional-changelog-cli
|
||||
>就是生成 Change log 的工具。
|
||||
|
||||
npm install -g conventional-changelog-cli
|
||||
cd my-project
|
||||
conventional-changelog -p angular -i CHANGELOG.md -s -r 0
|
||||
|
||||
现在是配置在package.json中
|
||||
|
||||
>"scripts": {
|
||||
>"changelog":"conventional-changelog -p angular -i CHANGELOG.md -s -r 0"
|
||||
>}
|
||||
|
||||
|
||||
## 3、命令截图
|
||||
|
||||
|
||||
## 4、效果截图
|
||||
|
||||
|
||||
|
||||
## 注解
|
||||
### 1.commit message 格式
|
||||
|
||||
commit message 主要包括三个部分：Header、Body、Footer。
|
||||
|
||||
除 Header 外，Body、Footer均为非必填项。
|
||||
|
||||
### 2.Header
|
||||
|
||||
Header 要求单行，其中包括 <type>、<scope>、<subject>三个部分。
|
||||
|
||||
### 3.type
|
||||
|
||||
用来标识 commit 的类型，总共有以下 11 个标识：
|
||||
|
||||
feat: 添加了一个新功能
|
||||
fix: 修复了一个 bug
|
||||
docs: 文档发生修改
|
||||
style: 不影响代码运行的更改（空格，格式，缺少分号等）
|
||||
refactor: 重构代码且不引进新的功能或修复 bug
|
||||
perf: 代码优化
|
||||
test: 添加或修改测试用例
|
||||
build: 构建工具或外部依赖的更改（npm，webpack，gulp等）
|
||||
ci: 更改项目级的配置文件或脚本
|
||||
chore: 除上述之外的修改
|
||||
revert: 撤销改动先前的提交
|
||||
|
||||
### 4.scope
|
||||
|
||||
用来标识改动所影响的范围，视项目而定。
|
||||
|
||||
### 5.subject
|
||||
|
||||
改动的简短描述，不超过 50 字符长度。
|
||||
|
||||
### 6.Body
|
||||
|
||||
本次 commit 的详细描述。
|
||||
|
||||
### 7.Footer
|
||||
|
||||
主要用于两种情况：
|
||||
|
||||
1. 重大的不兼容改动: 用于给出改动说明及解决方案。
|
||||
2. 关联 issues: 用于关闭相应 issues。
|
||||
|
||||
|
||||
> 特别注意：使用 revert 标识撤销 commit 时，subject 应为所撤销的 commit 的 message， Body 应包含 所撤销的 commit 的 hash。
|
||||
格式如下：
|
||||
|
||||
|
||||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 131 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 520 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 260 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 203 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 155 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
446
react编码规范.md
446
react编码规范.md
|
|
@ -6,67 +6,457 @@
|
|||
- 每一个文件只包含一个组件，每一个基本组件只包含单一功能
|
||||
- src目录下，如果文件返回是一个类，文件名首字母大写
|
||||
- 文件js模块统一使用js后缀名
|
||||
- 测试用例文件名使用.spec.js后缀
|
||||
- 每一个组件使用一个单独的测试用例文件
|
||||
|
||||
## js规范
|
||||
|
||||
### 语法
|
||||
|
||||
- 使用es6开发，尽量使用常用的ES6语法，(ES6语法参考)[http://es6.ruanyifeng.com/]
|
||||
- 使用es6开发，尽量使用常用的ES6语法，[ES6语法参考](http://es6.ruanyifeng.com/)
|
||||
- 使用jsx语法
|
||||
|
||||
### 命名规范
|
||||
### 格式
|
||||
|
||||
- 标签自闭合
|
||||
|
||||
```
|
||||
//bad
|
||||
|
||||
<Button></Button>
|
||||
|
||||
//good
|
||||
<Button />
|
||||
```
|
||||
|
||||
- 自闭合换行
|
||||
```
|
||||
//bad
|
||||
|
||||
<Button color="primary" />
|
||||
|
||||
//good
|
||||
|
||||
<Button
|
||||
color="primary"
|
||||
/>
|
||||
```
|
||||
|
||||
-
|
||||
|
||||
### 组件命名
|
||||
|
||||
- 组件仓库命名为小写和“-”连接，如button、button-group
|
||||
- 组件文件命名使用大驼峰， ComponentDemo
|
||||
- 带命名空间的组件，如果一个组件包含只有自身使用的子组件，以该组件为命名空间编写组件，例如Table，Table.Head
|
||||
|
||||
### 组件属性及写法规范
|
||||
### 组件声明
|
||||
|
||||
- 不使用displayName命名
|
||||
组件不使用displayName
|
||||
- 使用es6的class来声明组件，而不是使用`createClass`,在React V16版本，`createClass`已经废弃
|
||||
|
||||
- 自定义属性使用data-
|
||||
赋值给dom的自定义属性，使用`data-xxx=xxx`的形式
|
||||
```
|
||||
// bad
|
||||
const Button = React.createClass({
|
||||
// ...
|
||||
render() {
|
||||
return <button>{this.state.hello}</button>;
|
||||
}
|
||||
});
|
||||
|
||||
// good
|
||||
class Button extends React.Component {
|
||||
// ...
|
||||
render() {
|
||||
return <button>{this.state.hello}</button>;
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
- 对于不包含`state`和`refs`的组件，建议写成纯函数组件，而且建议使用function关键字声明
|
||||
|
||||
```
|
||||
//bad
|
||||
|
||||
class Button extends React.Component{
|
||||
render() {
|
||||
return (
|
||||
<Button>{ this.props.text }</Button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
//bad
|
||||
|
||||
const Button = ({ text }) => (
|
||||
<button>{ text }</button>
|
||||
)
|
||||
|
||||
//good
|
||||
|
||||
function Button ({ text }) {
|
||||
return (
|
||||
<button>{ text }</button>
|
||||
)
|
||||
}
|
||||
```
|
||||
|
||||
- 对于只有简单数据类型的`props`和`state`的组件，建议使用`PureComponent`来声明组件
|
||||
|
||||
```
|
||||
|
||||
//bad
|
||||
|
||||
class Button extends React.Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
disabled: false
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<Button
|
||||
disabled={this.state.disabled}>
|
||||
{ this.props.text }
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
//good
|
||||
|
||||
class Button extends React.PureComponent{
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
disabled: false
|
||||
}
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<Button
|
||||
disabled={this.state.disabled}>
|
||||
{ this.props.text }
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### 组件内部声明
|
||||
|
||||
- 使用propTypes进行props类型校验
|
||||
|
||||
```
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const propTypes = {
|
||||
disabled: PropTypes.bool
|
||||
}
|
||||
|
||||
class Button extends React.Component{}
|
||||
|
||||
Button.propTypes = propTypes;
|
||||
|
||||
```
|
||||
- 使用defaultProps定义默认参数
|
||||
|
||||
```
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
const defaultProps = {
|
||||
disabled: false
|
||||
}
|
||||
|
||||
class Button extends React.Component{}
|
||||
|
||||
Button.defaultProps = defaultProps;
|
||||
|
||||
```
|
||||
|
||||
- 不使用displayName命名
|
||||
|
||||
displayName属性用于组件调试时输出显示，JSX自动设置该值，可以理解为调试时显示的组件名。
|
||||
|
||||
```
|
||||
// bad
|
||||
export default React.createClass({
|
||||
displayName: 'Button',
|
||||
// stuff goes here
|
||||
});
|
||||
|
||||
// good
|
||||
export default class Button extends React.Component {
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### 属性定义
|
||||
|
||||
- 定义props避开react关键字及保留字，常用的props及state定义可参考下表
|
||||
|
||||
- `props`和`state`使用驼峰命名。
|
||||
|
||||
- 不直接修改`state`
|
||||
|
||||
```
|
||||
//bad
|
||||
|
||||
class Button extends React.Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
disabled: false
|
||||
}
|
||||
}
|
||||
handleClick = () => {
|
||||
this.state.disabled = true;
|
||||
this.setState({
|
||||
disabled: this.state.disabled
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Button
|
||||
disabled={this.state.disabled}>
|
||||
{ this.props.text }
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
//good
|
||||
|
||||
class Button extends React.Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
disabled: false
|
||||
}
|
||||
}
|
||||
handleClick = () => {
|
||||
let disabled = ture;
|
||||
this.setState({
|
||||
disabled
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Button
|
||||
disabled={this.state.disabled}>
|
||||
{ this.props.text }
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
- 自定义HTML属性使用data-
|
||||
|
||||
```
|
||||
class Button extends React.Component{
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Button
|
||||
data-name="submit-button">
|
||||
{ this.props.text }
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
- 尽量少或者不使用ref获取和操作dom节点，使用state和prop进行控制dom
|
||||
- 事件调用使用在元素上onClick调用
|
||||
```
|
||||
|
||||
- 可以使用es6的这种`...props`语法获取剩下所有属性,但是如果没有必要，尽量不要使用
|
||||
|
||||
```
|
||||
class Button extends React.Component{
|
||||
|
||||
render() {
|
||||
let {onClick, disabled, ...props} = this.props;
|
||||
return (
|
||||
<Button
|
||||
{ ...props }>
|
||||
{ this.props.text }
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
### ref
|
||||
|
||||
- 通过`ref`可以取到组件原生dom对象。使用传入函数function方式来定义`ref`，不使用字符串定义`ref`
|
||||
|
||||
```
|
||||
//bad
|
||||
|
||||
|
||||
class Button extends React.Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
}
|
||||
componentDidMount() {
|
||||
this.refs.buttonRef.focus();
|
||||
}
|
||||
|
||||
<div ref='demo' ></div>
|
||||
render() {
|
||||
return (
|
||||
<Button
|
||||
ref="buttonRef">
|
||||
{ this.props.text }
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
//good
|
||||
|
||||
handleClick = (e) => {}
|
||||
...
|
||||
<div onClick={this.handleClick} ></div>
|
||||
class Button extends React.Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.buttonRef = {};
|
||||
}
|
||||
componentDidMount() {
|
||||
this.buttonRef.focus();
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Button
|
||||
ref={(el) => this.buttonRef = el;}>
|
||||
{ this.props.text }
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
- 注意，react和html的表单元素的差异
|
||||
|
||||
- 尽量少或者不使用ref获取和操作dom节点，使用state和prop进行控制dom
|
||||
|
||||
### 组件声明周期函数
|
||||
|
||||
- 组件方法定义顺序
|
||||
- constructor
|
||||
- getChildContext
|
||||
- componentWillMount
|
||||
- componentDidMount
|
||||
- componentWillReceiveProps
|
||||
- shouldComponentUpdate
|
||||
- componentWillUpdate
|
||||
- componentDidUpdate
|
||||
- componentWillUnmount
|
||||
|
||||
- 在`componentDidMount`生命周期内获取初始数据
|
||||
|
||||
```
|
||||
class Button extends React.Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
data: ''
|
||||
}
|
||||
}
|
||||
componentDidMount() {
|
||||
axios.get('http://baidu.com/button-name')
|
||||
.then((res) => {
|
||||
this.setState({
|
||||
data：res.data
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Button>
|
||||
{ this.state.data }
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
- 在组件`componentWillUnmount`卸载生命周期中，进行清除定时器、卸载组件绑定的自定义事件等。
|
||||
|
||||
```
|
||||
class Button extends React.Component{
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
data: ''
|
||||
}
|
||||
this.timer = null;
|
||||
}
|
||||
componentDidMount() {
|
||||
this.timer = setInterval(this.getData, 1000);
|
||||
}
|
||||
|
||||
getData = () => {
|
||||
axios.get('http://baidu.com/button-name')
|
||||
.then((res) => {
|
||||
this.setState({
|
||||
data：res.data
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.clearInterval(this.timer);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Button>
|
||||
{ this.state.data }
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
- 使用箭头函数定义自定义的组件内方法
|
||||
|
||||
```
|
||||
//bad
|
||||
class Button extends React.Component{
|
||||
handleClick(e) {
|
||||
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<Button onClick={this.handleClick.bind(this)}>
|
||||
{ this.state.data }
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
- 使用es6后，不支持mixin，使用decorator进行扩展，（babel？需要增加解析器）和高阶组件方式扩展。
|
||||
- 尽量不使用比较大的第三方js库
|
||||
- 组件方法定义顺序 constructor --> 声明周期方法(componentWillMount,componentDidMount,
|
||||
componentWillUpdate,componentDidUpdate,componentWillUnmount)
|
||||
- 尽量多而有用的代码注释，方法用块级注释，结构如下例。
|
||||
- 有必要需要些组件的销毁方法，比如 定时器，需要用销毁方法销毁定时器
|
||||
- ...others 没有必要 勿用
|
||||
- 自身定义的props属性应避免与react的关键字相同
|
||||
//good
|
||||
|
||||
class Button extends React.Component{
|
||||
handleClick = (e) => {
|
||||
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<Button onClick={this.handleClick}>
|
||||
{ this.state.data }
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Mixin
|
||||
|
||||
- 使用es6后，不支持mixin，使用decorator进行扩展和高阶组件方式扩展。
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
45
组件版本及分支管理.md
45
组件版本及分支管理.md
|
|
@ -2,24 +2,35 @@
|
|||
|
||||
### 组件分支管理
|
||||
|
||||
- master分支，当前发布tinper-bee的依赖版本分支
|
||||
- release分支，是组件当前发布到npm上的最新版本分支
|
||||
- develop分支，是基于release分支切出来的分支，是组件开发分支
|
||||
- bugfix分支，是基于master分支切出来的分支，用于bug修改
|
||||
- master分支，npm、github、tinper-bee 均为无bug的最新代码。
|
||||
- develop/x.x.x 分支。 格式为:develop/当前版本号，用于组件功能添加、升级、文档处理等。是基于master切出来的分支。
|
||||
- bugfix/issues 分支。 格式为:bugfix/issues 编号，针对issues的bugfix的解决，是基于master分支切出来的分支，用于bug修改
|
||||
|
||||
### 组件版本管理
|
||||
### 组件版本号规则
|
||||
|
||||
1. 版本号从0.0.1开始起。
|
||||
2. 如果有做了不兼容旧版修改时，且组件的全量变更修改。需要升级第一位【eg： 1.x.x】
|
||||
3. 小功能迭代以及bugfix，只需要不断的增加最后一位即可。【eg ： 0.0.1】
|
||||
|
||||
>* 如有大的版本号的变更，需要check，在升级提交。
|
||||
|
||||
### 组件开发/提交流程
|
||||
|
||||
1. clone 代码。【eg : git clone xx】
|
||||
2. 根据需求确认分支，然后切换分支。【eg : git checkout -b xx/x.x.x】
|
||||
3. 在分支开发，开发完毕，后自测无bug的情况下。
|
||||
4. review下代码思路以及实现方式。【eg : xx 组员 eg: 博宇】
|
||||
5. review 完毕代码，切换到master进行代码合并。【git checkout master / git merge xx/xx 】
|
||||
6. 打包编译，进行发布。【次步骤后续需要配合changelog使用】
|
||||
|
||||
>* 以上git commit -m " xx " 操作需要替换，生成changelog 的md文件【稍后完善changelog的集成文档】。
|
||||
> * 代码review 既可以逐渐统一team的代码风格、技术点，语法的同步、还可以帮助我们梳理思路。
|
||||
|
||||
(图解)
|
||||
|
||||
|
||||
(流程图)
|
||||
|
||||
|
||||
版本号由三位数字组成，如1.2.3。
|
||||
第一位，做了不兼容旧版修改时，修改这一位
|
||||
第二位，做了兼容的新功能增强，修改这一位
|
||||
第三位，做了当前版微调和bug修改，修改这一位
|
||||
组件日常维护两个版本：
|
||||
一个是tinper-bee组件库依赖版本，锁定发布时的版本号的前两位，修改bug时更改第三位。
|
||||
另一个是当前npm发布的新版，包含一些新开发功能或是其他，这时修改版本号后两位，第一位不变。
|
||||
|
||||
### 操作细则
|
||||
|
||||
组件在develop分支开发，开发完成，及测试用例补全及测试通过，文档完善后，
|
||||
合并到release分支，并发布npm包，在tinper-bee组件库统一发版时，将tinper-bee依赖
|
||||
的版本，合并到master分支，并对之前master分支版本打tag。
|
||||
当需要bug修改时，在master上切一个bugfix分支，在这个分支上修改，验证通过后，合并回master分支，并发布新的npm包
|
||||
|
|
|
|||
Loading…
Reference in New Issue