We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
随着前端越来越快的发展,一些名词接踵而出,“工程化”、“组件化”、“自动化”等等名词,今天我们就从下面几个维度介绍一下组件式开发。
1、复用 2、封装html、js、css等 3、拆分成小的组件,易测试 4、并行开发,加大工作效率
组件交互的开销、过度组件化
组件化开发存在下面几种情况 1、为了组件化而组件化 盲目的封装组件,遇到一些不同的地方,就另外写一个组件 例子如下:
<Button type="primary" fixedWidth={76} > 约Ta </Button> <ButtonLoading type="primary" fixedWidth={76} > 提交 </ButtonLoading>
2、通过不同的UI部分通过props判断
export default class View extends Component{ constructor(props){ super(props) } render(){ let { a, b, c } = this.props; return ( <div className="view"> { a && <div> 显示a </div> } { b && <div> 显示a </div> } { c && <div> 显示a </div> } {/*.....*/} </div> ) } }
当View这个组件又有新的需求的时候,我们又要子在这个组件中加判断d...,有时候会出现几个条件关联判断,这个View会臃肿无比 3、组件耦合性太强、灵活性太低
export default class Input extends Component{ constructor(props){ super(props) } render(){ return ( <div className="view"> <input onChange={() => { console.log('........') }} /> </div> ) } }
写死点击事件、渲染界面等等 最后:请大家思考是一下什么是组件?组件到底要封装什么?
The text was updated successfully, but these errors were encountered:
No branches or pull requests
组件化开发
随着前端越来越快的发展,一些名词接踵而出,“工程化”、“组件化”、“自动化”等等名词,今天我们就从下面几个维度介绍一下组件式开发。
组件式开发有什么优点?
1、复用
2、封装html、js、css等
3、拆分成小的组件,易测试
4、并行开发,加大工作效率
缺点
组件交互的开销、过度组件化
怎么设计组件?
组件化开发存在下面几种情况
1、为了组件化而组件化
盲目的封装组件,遇到一些不同的地方,就另外写一个组件
例子如下:
2、通过不同的UI部分通过props判断
当View这个组件又有新的需求的时候,我们又要子在这个组件中加判断d...,有时候会出现几个条件关联判断,这个View会臃肿无比
3、组件耦合性太强、灵活性太低
写死点击事件、渲染界面等等
最后:请大家思考是一下什么是组件?组件到底要封装什么?
未完待续
The text was updated successfully, but these errors were encountered: