From 34716990288f574c55512bf89eac4702844a786d Mon Sep 17 00:00:00 2001
From: BoyuZhou <386607913@qq.com>
Date: Tue, 22 Aug 2017 14:41:06 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E7=BB=84=E4=BB=B6=E5=88=92?=
=?UTF-8?q?=E5=88=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.idea/misc.xml | 38 +++
.idea/modules.xml | 8 +
.idea/react-components-docs.iml | 12 +
.idea/vcs.xml | 6 +
.idea/workspace.xml | 378 +++++++++++++++++++++++++
react编码规范.md | 22 +-
如何写一个标准的react组件.md | 12 +
组件划分原则.md | 121 ++++++++
8 files changed, 591 insertions(+), 6 deletions(-)
create mode 100644 .idea/misc.xml
create mode 100644 .idea/modules.xml
create mode 100644 .idea/react-components-docs.iml
create mode 100644 .idea/vcs.xml
create mode 100644 .idea/workspace.xml
create mode 100644 组件划分原则.md
diff --git a/.idea/misc.xml b/.idea/misc.xml
new file mode 100644
index 0000000..3cf9024
--- /dev/null
+++ b/.idea/misc.xml
@@ -0,0 +1,38 @@
+
+
+
+
+
+
+ true
+
+ false
+ true
+
+
+
+
+
+
+
+
+
+ CSS
+
+
+ Code quality toolsCSS
+
+
+ GeneralJavaScript
+
+
+ JavaScript
+
+
+ Node.jsJavaScript
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/modules.xml b/.idea/modules.xml
new file mode 100644
index 0000000..59b6d2d
--- /dev/null
+++ b/.idea/modules.xml
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/react-components-docs.iml b/.idea/react-components-docs.iml
new file mode 100644
index 0000000..24643cc
--- /dev/null
+++ b/.idea/react-components-docs.iml
@@ -0,0 +1,12 @@
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/vcs.xml b/.idea/vcs.xml
new file mode 100644
index 0000000..94a25f7
--- /dev/null
+++ b/.idea/vcs.xml
@@ -0,0 +1,6 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
new file mode 100644
index 0000000..64ab556
--- /dev/null
+++ b/.idea/workspace.xml
@@ -0,0 +1,378 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ true
+ DEFINITION_ORDER
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ project
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ project
+
+
+ true
+
+
+
+ DIRECTORY
+
+ false
+
+
+
+
+
+
+
+
+
+ 1502951840899
+
+
+ 1502951840899
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/react编码规范.md b/react编码规范.md
index e901c11..9242a5b 100644
--- a/react编码规范.md
+++ b/react编码规范.md
@@ -184,17 +184,27 @@ export default Button;
### 常用npm包
-##### keyCode
+##### [keyCode](https://github.com/timoxley/keycode)
-##### warning
-##### bee-animate
+##### [warning](https://github.com/BerkeleyTrue/warning)
-##### bee-transition
+```
+var warning = require('warning');
-##### bee-overlay
+var ShouldBeTrue = false;
-##### dom-helpers (3.0.0)
+warning(
+ ShouldBeTrue,
+ 'This thing should be true but you set to false. No soup for you!'
+);
+```
+
+##### [bee-animate](https://github.com/tinper-bee/bee-animate)
+
+##### [bee-overlay](https://github.com/tinper-bee/bee-overlay)
+
+##### [dom-helpers (3.0.0)](https://github.com/react-bootstrap/dom-helpers)
参考链接
diff --git a/如何写一个标准的react组件.md b/如何写一个标准的react组件.md
index 6338c76..f916d2b 100644
--- a/如何写一个标准的react组件.md
+++ b/如何写一个标准的react组件.md
@@ -6,6 +6,16 @@
### 一、下载tinper-bee开发工具
#### 1、全局安装开发工具
+
+如果是用友内部员工，请使用用友内部npm镜像和下载工具ynpm-tool。
+
+```
+npm install -g ynpm-tool
+ynpm install
+```
+
+也可以使用npm。
+
```
npm install -g bee-tools
```
@@ -27,6 +37,8 @@ cnpm install -g bee-tools
npm --registry https://registry.npm.taobao.org install -g bee-tools
```
+
+
#### 2、生成组件脚手架
下面以创建button组件为例
diff --git a/组件划分原则.md b/组件划分原则.md
new file mode 100644
index 0000000..a1bbaa9
--- /dev/null
+++ b/组件划分原则.md
@@ -0,0 +1,121 @@
+# 组件划分原则
+
+### 一、单一原则
+
+一个组件只做一件事。
+遵循单一原则可以让我们的组件逻辑更简单，职责更明确，复用性更好。
+拆分单一原则组件也更方便我们将无状态组件改写成函数组件，来优化react性能。
+
+```
+//bad
+class Panel extends Component{
+ render() {
+ return (
+
+ )
+ }
+}
+
+//good
+function PanelHeader(props) {
+ return (
+
+
+
+ )
+}
+
+function PanelBody(props) {
+ return (
+
+
+
+ )
+}
+
+function PanelHFooter(props) {
+ return (
+
+
+
+ )
+}
+
+class Panel extends Component{
+ render() {
+ return (
+
+ )
+ }
+}
+
+```
+
+### 二、通用原则
+
+我们的基础组件，只包含业务中最常用的功能和适用性最广的DOM结构。
+
+### 三、可扩展原则
+
+组件提供最灵活的扩展性。
+- 每一个提供样式的DOM结构都允许用户传入class和style来修改样式。
+- 每一个UI展示部分都提供接口允许用户替换。组件只封装交互逻辑和提供默认的组件内容。
+- 对于封装逻辑的组件可以允许用户传入展示部分组件。
+- 逻辑组件允许用户扩展包裹的dom元素，即允许用户传入component（props, react元素或dom元素的字符串）
+来替换我们默认包裹的dom元素。
+
+
+- 样式扩展
+```
+class Example extends Component{
+ render() {
+ let {className, style} = this.props;
+
+ return (
+
+
+
+ )
+ }
+}
+```
+
+- 组件内容扩展
+
+```
+//默认给定一个图标
+let defaultProps = {
+ closeIcon:
+}
+class Tile extends Component{
+
+ render() {
+ //允许用户传入自定义的图标或按钮
+ let { closeIcon } = this.props;
+ let
+ return (
+
+ { React.cloneElement(closeIcon, { className: "close-btn", onClick: this.close }) }
+ ...
+
+ )
+ }
+}
+Tile.defaultProps = defaultProps;
+```
+
+