声明： React基础（一）的内容来自腾讯课堂 Web前端【红点工场】的视频，原作者是 Skipper 老师。
这里会用几个原生的 Demo 向大家展示什么是单项数据流绑定，以及它的优势是什么。
相信大家看完这几个 Demo 之后，会对 React 有一个最基本的了解。
Demo 1：
首先，我们的 Demo 1 是做一个最简单的点赞按钮。
那么我们先做好准备工作：
我们获取按钮 btn，并且给它添加 click 点击事件。
那么接下来，我们就按照需求写上逻辑：
当我们点击 “喜欢” 按钮的时候，文字变成：已赞。文字颜色变为红色。
而当我们再次点击的时候，文字变回：喜欢。文字颜色变回黑色。
可以看到，我们已经实现了一个带有切换功能的点赞按钮了。
那么这个程序会有一个很显著的问题。
界面：<button type="button" id="btn">喜欢</button>
操作：btn.addEventListener('click', function () {
if (btn.innerHTML == '已赞') {
btn.innerHTML = '喜欢'
btn.style.color = 'black'
} else {
btn.innerHTML = '已赞'
btn.style.color = 'red'
}
})可以看到，数据 “喜欢” 在 html 里面。那么当我们操作，修改界面的时候，同时，数据也被修改了。然后下一次，我们又会根据这个数据来判断界面下一步需要做什么。
那么我们需要换一种思想。首先，我们分析这个按钮，它其实就只有 2 种状态：
1，喜欢：按钮的文字显示是“已赞”，颜色为红色。
2，不喜欢：按钮的文字显示就是“喜欢”，颜色为黑色。
那么首先，我们就可以先把这个状态给设计出来。
Demo 2：
那么我们用 state 来标记按钮的状态，它只会有 2 个值，要么是 true，要么就是 false。
然后我们需要根据 state 这个状态，去改变按钮，怎么改变呢？
我们来实现一个 render 方法：
那么，我们现在就是根据不同的状态，来渲染不同的结果。现在的程序就是可控的了。
那么下一步，就是给按钮添加点击事件了：
可以看到，效果也实现了，但是我们会发现，页面变的很单纯了。
之前的 Demo 1 是不单纯的，因为界面携带了数据，我们会根据里面的 innerHTML 来判断这个程序属于什么状态，可能引起混乱。
那么现在的 Demo 2 我们是用 state 来表示状态的，我们并不需要用文字去判断状态，我们只需要用 state 来确定就可以了。
然后接下来，我们会统一用一个函数来修改状态，因为如果随便什么时候都可以修改状态的话，那么程序就会显得很乱。
可以看到，在点击事件中，我们明确的告诉程序，我们接下来要修改新的状态了。
这样的逻辑就会比刚才清晰很多，那么我们就把这个逻辑统一的包装到 setState 里面去。setState 负责去修改状态，并且重新渲染。
可以看到，功能已经实现了。
那么看到这里，可能有些同学会有疑惑，你写了这么多代码，和 Demo 1 的几行代码效果不是一样的吗？
但是，请注意，现在这个程序的可读性，已可拓展性会强上很多。
那么我们这里还有一个小问题，比如说：
// 用个函数来修改状态
var setState = function (newState) {
state = newState
render()
}我们用 state = newState 这样直接赋值的方式，来修改 state，是不明智的。
因为我们可能还会有别的状态在 state 里面。那么如果我不想修改别的状态，只想修改 like 呢？
那么我们这样直接赋值，状态 state 里面就会只剩下 like 一个属性，而其他的就都被删除了。
所以这时候，我们就需要用一个 ES6 的解构语法来解决这个问题。
因为我希望，这里只是改变一个新的状态，而其他的状态也不会有影响。
那么我们现在重新分析一下程序：
首先程序有个状态 state，然后专门有个 setState 方法负责来修改这个状态。
修改完状态之后，就会重新调用 render() 函数，那么我们现在的程序很明显，就是一个单项数据流了。
那什么是单项数据流呢？我们分为三部分来看：
首先，我们的 HTML 是哪里来的？是 render() 函数渲染来的。
然后，我们的 HTML 里面提供了操作 Control，也就是一些操作的方法 ，就比如 addEventListener 里面的 click 事件。
那么 click 做了什么？它调用了 setState 方法。
那么 setState 方法，又修改了 state，最后再重新渲染页面。
于是，到这里，我们就知道了：Control 修改了 state，state 渲染 HTML。
