something about AiDigger FE UI components




演示地址:(待补充)
// 不好的实践
render() {
if (this.state.a) {
return 不要
} else {
return 这样
}
}
`
- ref 应该尽快淘汰字符串形式,因为字符串形式的 ref 会自始至终将字符串放在 refs 对象中,会有泄露的问题。
`
// 不好的实践
ref="myRef"
/>// 一般的实践
ref={(ref) => { this.myRef = ref; }}
/>
`
- 上面的方法之所以是一般的实践,而不是好的实践,是因为我们在查看组件时,别人很难察觉到你在 JSX 里偷偷为组件添加了一个新属性。组件所有用到的属性,应该都能在 constructor 或 defaultProps 中找到。- refs.xxx 中的 DOM 节点,不应该再转存到组件实例上或其他地方中。每次访问 refs.xxx 必须判定其是否为空。
- 不要在 componentWillUpdate/componentDidUpdate/render 中执行 setState, 可能导致死循环。
- 不要在 JSX 中使用 bind 方法绑定组件实例
`
// 不好的实践
class extends React.Component {
onClickDiv() {
// do something
} render() {
return
;
}
}// 好的实践
class extends React.Component {
constructor(props) {
super(props);
this.onClickDiv = this.onClickDiv.bind(this);
}
onClickDiv() {
// do something
}
render() {
return
;
}
}
`
- 不要使用 cloneElement,createElement,让 JSX 与 babel 帮你创建它们。- 不要使用 createClass, mixin,PropTypes(它们已经被移出核心库,被逐渐边缘化,有关属性的描述改成文档注释吧)。
文件夹命名说明:
- components:组件(方法)为单位以文件夹保存,文件夹名组件首字母大写(如
DataTable),方法首字母小写(如layer),文件夹内主文件与文件夹同名,多文件以index.js导出对象(如./src/components/Layout)。
- routes:页面为单位以文件夹保存,文件夹名首字母小写(特殊除外,如UIElement),文件夹内主文件以index.js导出。$3
克隆项目文件:
git clone git@github.com:EigenLab/AUI.git
进入目录安装依赖:
npm install(npm i) 或者 yarn install
构建:
`bash
npm run build将会生成build目录
`
使用:
`bash
import 'agui/lib/style.css'
import { Button } from 'agui';ReactDOM.render(test, mountNode);
`开发及构建
$3
`
├── package.json
├── build # 生成目录
├── dev # 源文件目录
├── dev/agui # 组件库目录
└── lib # npm 包构建目录
`$3
使用之前先安装相关依赖:
`
npm install webpack -g
npm install浏览器输入
http://localhost:4001
`
- 开发
`
npm start
`
- 构建
`
npm run build -> build静态文件+lib css
npm run lib -> lib文件 -> npm publish(发到npm新版本)
``