使用react编写TodoList功能
首先，我们需要先来对页面的内容进行构造。我们在项目的 src文件夹下创建一个文件，命名为 TodoList 。我们想要实现的是，点击提交按钮，可以把 input 框里面的内容显示在列表下方。如果按照我们正常的思维来想的话，我们可能会觉得，在提交按钮中绑定一个事件，之后呢，当点击绑定按钮时，获取到 input 框的值，进行绑定提交。
但事实上， react 强调的是，我们不要直接操作 DOM ，而是要操作数据。当数据发生变化时， react 会自动地感知到我们数据发生的变化，会自动地帮我们生成 DOM 。因此，在写 react 时，我们不需要关心 DOM 层面的操作，只需要去关心数据层面的操作即可。现在，我们先来监听 input 框的值。代码如下：
import React, { Component, Fragment } from 'react';
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
inputValue: 'hello!!',
list: []
}
}
render() {
return (
<Fragment>
<div>
<input
value = {this.state.inputValue}
onChange = {this.handleInputChange.bind(this)}
/>
<button>提交</button>
</div>
<ul>
<li>学英语</li>
<li>Learning React</li>
</ul>
</Fragment>
)
}
handleInputChange(e) {
this.setState({
inputValue: e.target.value
})
}
}
export default TodoList;
大家可以看到，我们正确的使得 input 框响应到了数据。state 负责存储组件中的数据；如果想要在 html 代码中用一些 js 的表达式，那么要记得用 {} 进行包裹；在进行事件绑定时，记得使用 bind(this) 对事件的作用域进行变更；当想要改变数据项时，不能直接使用 this.state 来改变数据的值，要通过 setState 函数来进行改变。
对TodoList功能进行进阶操作
（1）自动转义
如果在 jsx 中，我们希望显示一些内容，且这些内容我们希望它自动转义。我们就通过 dangerouslySetInnerHTML 这个属性来对 html 进行设置，已达到对 <li> 标签下的内容进行改变，具体代码如下：
<li
key={index}
onClick={this.handleItemDelete.bind(this, index)}
dangerouslySetInnerHTML={{ __html: item }}
>
</li>
通过对 dangerouslySetInnerHTML 的设置，我们 html 的内容进行了转义。
（2）光标聚焦
在实际的实践中，对于 input 框来说，我们往往会想要点击某个文本，然后让它去聚焦到 input 框中输入内容。那这应该怎么处理呢？
我们继续来改造 jsx 代码。具体代码如下：
render() {
return (
<Fragment>
<div>
<label htmlFor="insertArea">输入内容</label>
<input
id="insertArea"
className="input"
value={this.state.inputValue}
onChange={this.handleInputChange.bind(this)}
/>
<button onClick={this.handleBtnClick.bind(this)}>提交</button>
</div>
<ul>
{
this.state.list.map((item, index) => {
return (
<li
key={index}
onClick={this.handleItemDelete.bind(this, index)}
dangerouslySetInnerHTML={{ __html: item }}
>
</li>
)
})
}
</ul>
</Fragment>
)
}
通过 label 标签和 htmlFor 来对内容进行绑定，以达到最终我们想要实现的效果。
（3）拆分组件与组件之间的传值 在实际的项目中，对于一个大的组件来说，我们总是会对其进行组件拆分。那对于上面这个 todoList 组件来说，也不例外。
我们可以把①输入内容，② input 框 和 ③提交按钮拆分成一个组件。之后呢，把 list 列表拆分成另外一个组件。那接下来我们来对这个组件进行拆分以及父子组件间数据的传递。首先我们在项目的 src 文件夹下添加一个新的文件。命名为 TodoItem.js，然后再改造 TodoList.js 文件 。
首先，我们创建了一个新的文件 TodoItem ，来存放列表的内容。其次，有了列表的内容后，我们要来想，父子组件间的数据，怎么传递。那事实上，父组件向子组件传递内容，通过属性的形式来传递。大家看到父组件中 的位置，在父组件中，通过 content={item} 这样的形式，来把 item 命名为 content ，并将其传递给子组件。而对于子组件 来说，它将以 this.props 的方式来调用父组件的数据和事件。
总结
由以上操作流程，我们可以衍生出 react 的一些特殊的优势。具体如下：
声明式开发 —— 以前我们在 js 的开发中，都是大量的操作 DOM ，这种开发方式称为命令式开发。到现在，我们在使用 react 时，基本都是直接操作数据，而不是操作 DOM 。那么这样的开发方式，被称为是声明式开发。
可以与其他框架并存
组件化方式开发
单向数据流 —— 在 react 中，父组件允许往子组件传值，但是子组件只能去使用这个值，而不能去改变这个值。
视图层框架 —— 只帮助我们解决数据和页面上的内容，并不负责组件间怎么传值，如何传值。
函数式编程 —— 当一个函数内容变得多时，可以进行拆分。每一个函数各司其职，使得代码更具有维护性。同时，给前端的自动化测试带来巨大的便捷性。
