点赞功能案例
首先完成一个点赞组件LikeButton,和一个 DOM 挂载函数 createDOMFromString
const createDOMFromString = (domString) => {
const div = document.createElement('div')
div.innerHTML = domString
return div
}
class LikeButton {
constructor () {
this.state = { isLiked: false }
}
changeLikeText () {
const likeText = this.el.querySelector('.like-text')
this.state.isLiked = !this.state.isLiked
likeText.innerHTML = this.state.isLiked ? '取消' : '点赞'
}
render () {
this.el = createDOMFromString(`
<button class='like-button'>
<span class='like-text'>点赞</span>
<span>👍</span>
</button>
`)
this.el.addEventListener('click', this.changeLikeText.bind(this), false)
return this.el
}
}
如上代码，代码通过在 this.el 上监听 click 事件，通过 DOM 操作改变页面文字和组件状态。
当页面上需要维护的状态过多时，状态改变，需要写更多的 DOM 操作。
提出这样一种解决方案:一旦状态发生改变，就重新调用 render 方法，构建一个新的 DOM 元素。
于是代码可以改成这样:
class LikeButton {
constructor () {
this.state = { isLiked: false }
}
setState (state) {
this.state = state
this.el = this.render()
}
changeLikeText () {
this.setState({
isLiked: !this.state.isLiked
})
}
render () {
this.el = createDOMFromString(`
<button class='like-btn'>
<span class='like-text'>${this.state.isLiked ? '取消' : '点赞'}</span>
<span>👍</span>
</button>
`)
this.el.addEventListener('click', this.changeLikeText.bind(this), false)
return this.el
}
}
可以看到添加了一个 setState 方法，该方法实现了状态改变，重新调用 render 的目的。
但该版本的问题在于更改了的 DOM 片段没有插入到页面中。
于是，修改代码，进行点赞操作时，删除页面中的旧的点赞代码，添加新的点赞代码。
class LikeButton {
constructor () {
this.state = { isLiked: false }
}
setState (state) {
const oldEl = this.el
this.state = state
this.el = this.render()
if (this.onStateChange) this.onStateChange(oldEl, this.el)
}
changeLikeText () {
this.setState({
isLiked: !this.state.isLiked
})
}
render () {
this.el = createDOMFromString(`
<button class='like-btn'>
<span class='like-text'>${this.state.isLiked ? '取消' : '点赞'}</span>
<span>👍</span>
</button>
`)
this.el.addEventListener('click', this.changeLikeText.bind(this), false)
return this.el
}
}
可以看到修改后的 setState 函数添加缓存修改前的 DOM 片段。在 this.onStateChange 函数中进行 DOM 删除添加操作。
该组件使用方法如下:
const likeButton = new LikeButton()
wrapper.appendChild(likeButton.render()) // 第一次插入 DOM 元素
likeButton.onStateChange = (oldEl, newEl) => {
wrapper.insertBefore(newEl, oldEl) // 插入新的元素
wrapper.removeChild(oldEl) // 删除旧的元素
}
仔细思考，可以看到，每次点赞点踩操作，都会从页面中删除和添加 DOM 片段。因而不停的引起页面重排，应用性能很低。
React中引入了 Virtual-Dom ,通过 diff 算法比较更新前后的 Virtual-Dom 树，将 Virtual-Dom 树上更新的部分更新到实际 DOM 中。
当有多个组件时，每个组件中都需要写一个 setState 函数。于是可以提出一个父类组件
class Component {
setState (state) {
const oldEl = this.el
this.state = state
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
}
}
该类中，有两个方法，一个是 setState；一个是私有方法 _renderDOM。_renderDOM 方法会调用 this.render 来构建 DOM 元素并且监听 onClick 事件。所以，组件子类继承的时候只需要实现一个返回 HTML 字符串的 render 方法就可以
于是点赞组件可更新为
class LikeButton extends Component {
constructor () {
super()
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>👍</span>
</button>
`
}
}
将上面渲染出的 DOM 判断，插入页面
const mount = (component, wrapper) => {
wrapper.appendChild(component._renderDOM())
component.onStateChange = (oldEl, newEl) => {
wrapper.insertBefore(newEl, oldEl)
wrapper.removeChild(oldEl)
}
}
调用方式如下
mount(new LikeButton(), wrapper)
实际开发中，可能需要给组件传入一些自定义的配置数据。例如说想配置一下点赞按钮的背景颜色，如果传入一个参数设置颜色。那么这个按钮的定制性就更强了。所以可以给组件类和它的子类都传入一个参数 props，作为组件的配置参数。修改 Component 的构造函数为
constructor (props = {}) {
this.props = props
}
于是点赞组件代码可更新为
class LikeButton extends Component {
constructor (props) {
super(props)
this.state = { isLiked: false }
}
onClick () {
this.setState({
isLiked: !this.state.isLiked
})
}
render () {
return `
<button class='like-btn' style="background-color: ${this.props.bgColor}">
<span class='like-text'>
${this.state.isLiked ? '取消' : '点赞'}
</span>
<span>👍</span>
</button>
`
}
}
mount(new LikeButton({ bgColor: 'red' }), wrapper)
由此，就完成了一个超简化版的React.js
本文总结摘抄自:React.js 小书
网友评论