React.js初探-如何将一个普通button改造成类React组件

React.js初探-如何将一个普通button改造成类React组件

React.js目的在于提高前端组件的复用性，而组件状态和表现通常是随着数据而变化，在React中体现为通过父组件传递props或自身定义state来获取数据，通过props与state中数据的变化经过计算来重新渲染组件。下面以一个常见的例子来解释一下组件能为我们带来的便利以及React的超简化版本。

我是一个前端程序员，有一天老板叫我实现一个功能,功能描述如下：一个按钮有两个状态，分别是点击改变颜色和点击还原颜色，原始颜色是红色，点击后颜色为绿色。

通常情况下，我很快接会写出了如下代码：
HTML结构：

<button style="color:red;">换肤</button>

JavaScript代码：

const oButton = document.querySelector('button')
var isChanged = false
oButton.addEventListener('click',function(){
   
    isChanged = !isChanged
    if (isChanged) {
        this.innerHTML = '还原'
        this.style.color = 'green'
    }else{
        this.innerHTML = '换肤'
        this.style.color = 'red'
    }
},false)

是的，我很快就完成了老板交代的任务。
但是过了几天，老板又找到了我，说：“我们现在需要个按钮，功能是这样的：按钮初始状态为绿色，文字为下载。点击之后变为红色，文字为取消“。我想来想去，都觉得和前几天做的那个按钮很像，于是打算将这个Button做成一个组件算了，免得他到时候又提出什么类似的要求。

接下来，我开始按钮改造之旅：
HTML结构：

<div id="root"></div>

JavaScript代码，将按钮抽取为一个Button类：

const createDOMFromString = (str) => {
    var dom = document.createElement('div')
    dom.innerHTML = str
    return dom
}

class Button {
   
    handleClick() {
        console.log('clicked')
    }

    render() {
        const el = createDOMFromString('<button style="color:red;">换肤</button>')
        el.addEventListener('click',this.handleClick.bind(this),false)
        this.el = el
        return el
    }
}

const root = document.querySelector('#root')
root.appendChild(new Button().render())

接下来点击按钮控制台会输出clicked,但是我的目的还没有达到，需求是按钮点击后改变颜色和文字的。那接下来的任务就是通过点击改变按钮的状态，再状态改变之后使按钮的变现也从随之产生变化：

//点击事件只能添加到DOM，此方法用于将字符串包装为真实DOM
const createDOMFromString = (str) => {
    var dom = document.createElement('div')
    dom.innerHTML = str
    return dom
}

class Button