something about AiDigger FE UI components
演示地址：(待补充)
// 不好的实践
render() {
if (this.state.a) {
return 不要
} else {
return 这样
}
}
- ref 应该尽快淘汰字符串形式，因为字符串形式的 ref 会自始至终将字符串放在 refs 对象中，会有泄露的问题。
// 不好的实践
/>// 一般的实践
/>
- 上面的方法之所以是一般的实践，而不是好的实践，是因为我们在查看组件时，别人很难察觉到你在 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：组件（方法）为单位以文件夹保存，文件夹名组件首字母大写（如
），方法首字母小写（如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新版本）