React.js 小书 Lesson4 - 前端组件化(三):抽象出公共组件类
发布时间:2020-12-15 06:41:59 所属栏目:百科 来源:网络整理
导读:React.js 小书 Lesson4 - 前端组件化(三):抽象出公共组件类 本文作者:胡子大哈 本文原文:http://huziketang.com/books/react/lesson4 转载请注明出处,保留原文链接以及作者信息 在线阅读:http://huziketang.com/books/react 为了让代码更灵活,可以写
React.js 小书 Lesson4 - 前端组件化(三):抽象出公共组件类
转载请注明出处,保留原文链接以及作者信息 在线阅读:http://huziketang.com/books/react 为了让代码更灵活,可以写更多的组件,我们把这种模式抽象出来,放到一个 class Component { setState (state) { const oldEl = this.el this.state = state this.el = this._renderDOM() if (this.onStateChange) this.onStateChange(oldEl,this.el) } _renderDOM () { this.el = createDOMFromString(this.render()) if (this.onClick) { this.el.addEventListener('click',this.onClick.bind(this),false) } return this.el } } 这个是一个组件父类 还有一个额外的 const mount = (component,wrapper) => { wrapper.appendChild(component.renderDOM()) component.onStateChange = (oldEl,newEl) => { wrapper.insertBefore(newEl,oldEl) wrapper.removeChild(oldEl) } } 这样的话我们重新写点赞组件就会变成: class LikeButton extends Component { constructor () { this.state = { isLiked: false } } onClick () { this.setState({ isLiked: !this.state.isLiked }) } render () { return ` <button class='like-btn'> <span class='like-text'>${this.state.isLiked ? '取消' : '点赞'}</span> <span> |