# 通过Todo项目学习React理念
React是一个为数据提供渲染为HTML视图的开源JavaScript 库。它也是前端下载量最多的一个框架。React的目的就是使用JavaScript创建大型的，快速响应的网络应用。为了更好的学习React，React理念（英文是Thinking In React）的掌握就显得至关重要。在这篇文章中，通过一个Todo项目来一步一步的学习React理念。
# 一 项目搭建
# 1 介绍
这个项目的脚手架工具使用的是：create-react-app，官方文档。
它有以下几个优点：
- 零配置创建React应用
- 对前端资源JS，CSS，图片等提供了资源构建打包功能
- 有自动刷新，代理转发，单元测试等来提高开发效率
# 2 使用
使用create-react-app创建一个新的项目可以使用npx，npm，yarn等，使用npx时需要npm的版本大于5.2
这里只介绍npx的使用方式，其他的方式可以查看官方文档
# npx
npx create-react-app my-app
my-app指项目名称
创建完成后可以通过npm start来打开新创建的应用。
# ESLint
可以通过这篇文章，使用ESLint和Prettier来规范代码的书写。
# 二 React理念
Todo项目的代码可从这里进行查看与下载
# Start With A Mock
从模拟页面开始
想象我们已经有一个设计师给我们的原型图。原型图如下所示：
# Step 1: Break The UI Into A Component Hierarchy
第一步：把UI划分出组件层级
第一件要做的事情是用方框划分出每一个组件(和子组件)并给他们命名。
组件划分的原则：
- 解耦：降低单一模块/组件的复杂度
- 复用：保证组件一致性，提升开发效率
- 组件颗粒度需要避免过大或过小
如上图所示，这个Todo项目有5个组件。
App(蓝色)：包含了整个项目。
AddTodo(红色)：接受用户的输入并进行添加。
TodoList(橙色)：展示整个待办事项列表。
TodoItem(绿色)：表示每一个待办事项，并有完成和未完成的两种样式。
Footer(粉色)：用来过滤完成与未完成的列表。
# Step 2: Build A Static Version in React
第二步：用React创建一个静态版本
第二步就是去实现你的应用了，去创建一个静态版本。传入数据模型，渲染UI但是没有任何交互。
- 创建静态版本使用props来传递数据，不能使用state
- 可以自顶向下或自底向上的构建应用。在简单的项目中，推荐使用自顶向下的方式
# Step 3: Identify The Minimal (but complete) Representation Of UI State
第三步：定义UI最小（但完整的）表示
其实第三步就是去设计项目中的state。因为为了使项目进行UI交互，就需要触发能够对底层数据模型的更改，这时候就需要state了。
**state是代表UI的完整且最小的状态集合。**所以在定义State时，首先这个state是代表UI的，如定义了一个定时器state，它不是UI，所以不能当作state；其次这个state是一种状态，这种状态是可变的，如果这个state是一成不变的，也就不能把它定义成state。
如果项目中有多个数据，但是不确定能不能将其定义为state。那么可以考虑这三个问题：
- 它是通过 props 从父级传来的吗？如果是，他可能不是 state。
- 它随着时间推移不变吗？如果是，它可能不是 state。
- 你能够根据组件中任何其他的 state 或 props 把它计算出来吗？如果是，它不是 state。
所以，这个Todo项目最后的state是：
- 待办事项列表
- 新增输入框中的文本
- 当前筛选条件
# Step 4: Identify Where Your State Should Live
第四步：定义你的State存放的位置
state的双层含义：
- 代表应用UI的所有状态的集合
- 状态集合中的每一部分（待办事项列表、新增输入框中的文本、当前筛选条件）
第四步中的state指的是第二个含义。在不同语境下，要理解state的不同含义。
分析state的保存位置的步骤：
- 确定依赖state的每一个组件
- 如果某个state被多个组件依赖，寻找共同的父组件。也叫状态提升
- 如果你没有找到可以拥有这个 state 的组件，创建一个仅用来保存状态的组件并把它加入比这个公共所有者组件层级更高的地方。
所以根据上面的步骤，可以判断出该项目的state的存放位置
- 待办事项列表：
todos。TodoList和AddTodo组件都会依赖，所以定义在App组件中。 - 新增输入框中的文本：
text。只有AddTodo组件依赖，所以定义在AddTodo组件中。 - 当前筛选条件：
filter。TodoList和Footer组件都会依赖，所以定义在App组件中。
# Step 5: Add Inverse Data Flow
第五步：添加反向数据流
通过props，添加反向数据流，实现交互行为的添加。
在这个项目中，需要添加的交互行为有：
- 新增todo
- 修改todo状态
- 过滤显示
# And That’s It
就是这样
到这里就结束了，从上面的五步中了解了如何使用React构建组件和应用程序。虽然这可能会比以前编写更多的代码，但请记住，代码是用来读的，这比写更重要，并且非常容易阅读这个模块化的，思路清晰的代码。