上海《React+redux 高阶实战周末班》课程记录（三）－妙味新闻

妙味 React 周末班，学习记录第三弹来啦~不废话，上文档学习吧！（文末有视频彩蛋）

本周课程记录（12 月 9 日）

本次课程要点

利用 React 实现我们的第一个 todoList 程序
npm 基本使用

课程时间线

10:00 整喽，老司机开始开车了
- todoList 练习讲解
- 功能分析
  - 焦点在输入框时（回车键添加）添加一条新的内容
  - 展示任务列表
  - 改变当前任务状态（已完成 or 未完成）
  - 编辑当前任务（双击，修改完成回车或失去光标）
  - 删除当前任务（点击）
  - 全部改成已完成状态（点击）
  - 删除全部已完成（点击）
  - 记录未完成任务的条数
  - 分类显示：全部任务、已完成任务、未完成任务（点击）
- 目录结构划分
  - CSS
  - JS 组件结构划分，这里进行了模块化处理，每个组件都是一个单独的文件，方便后期我们进行模块化加载
    - Header.js —— 所有关于头部组件的 js
    - Main.js —— 所有关于 Main 组件的 js
    - Footer.js —— 所有关于 Footer 组件的 js
    - App.js —— 主组件的 js
  - Lib 需要引入的初始的 js 文件
    - React.development.js
    - React-dom.development.js
    - Babel.min.js
- 分析拆解 HTML 结构
- 组件划分
```
`<App/>` 主组件
  `<Header/>` 头部组件
  `<Main/>` 主体组件
  `<Footer/>` 底部组件
```
- 数据格式分析
```
data:[
  {
      id:1,//后期循环要用到的 key 值
      title:’这是任务的标题’,
      completed:false //控制是否完成
  },
  {
      id:2,
      title:’这是任务的标题’,
      completed:false
  }
]
```
- 展示任务列表功能完善（Main 组件中）
  - 利用 map 循环数据显示
    为了能够在组件之间共享数据，我们通常把数据放置在这些组件的共同父级组件中：App 组件
  - 父 -> 子：通过属性 props
  - 子 -> 父：通过父级传入子级的事件回调

11:05 是时候来一支黄鹤楼放飞一下自我了

11:20 开始完善添加添加数据的功能
- 添加一条新的数据 onKeyDown，按下回车（keycode=13），把新的数据通过事件传递给父组件 App，统一修改，可以利用 push 或者扩展运算符
  养成好习惯，所有的数据操作都由父级去完成，子级只读取，如果子级需要对数据进行修改，需要利用事件回调通知父级进行操作
- 添加是否完成的状态
  - 利用受控组件 checkbox 完成，在 onChange 事件，修改数据中的对应项的 completed—>同步状态—>重新渲染 DOM
    在项目中养成习惯，修改数据，然后通过数据去更新状态
- 删除单条数据
  - 点击按钮时，调用 App 组件中传入的事件回调，传入当前是第几条数据
  - 利用 filter 过滤掉该条数据—> 同步状态 —> 重新渲染 DOM
- 全选功能实现
  - 依然利用受控组件 checkbox，onChange 时，修改数据中所有项的 completed，然后进行同步
- 统计未完成的条数
  - 循环累计 completed 为 false 项的结果，可以利用 filter，然后拿到用数组的 length
- 清除已完成
  - 过滤掉数据中所有 completed 为 true 的项，然后进行同步

12:20 吃饭饭去

14:00 精神抖擞我们继续撸码
- 分类展示功能完善
  - 全部列表，未完成列表，已完成列表，添加 onClick 事件，通过事件回调，同步显示数据
- 编辑输入框内容
  - 双击的时候，出现输入框可以进行编辑，隐藏文本展示框
  - 在 <Main /> 组件的 componentDidUpdate 周期中，每次组件更新之后通过 refs 获取到 ul 下所有输入框，态判断编辑状态的数组中某一项是是编辑状态时，对应的 input 加 focus 焦点
  - input onblur 时判断是否更新该条信息
  - 调用 <App /> 传入的事件回调更新数据 —> 同步
- 附加功能说明
  - 属性默认值：如果不传参数，默认一个空函数
```
Header.defaultProps = {
  onSubmit:function(){}
}
```
  - 属性验证:要求输入的内容必须是函数
```
Header.propTypes = {
  onSubmit:PropTypes.func
}
```
    使用属性验证时，需引入 prop-types.js 文件

15:30 休息一下，喵^_^

15:35 来吧，解决这个 npm
- npm
  Node Package Manager：Node包（模块）管理器
  主要功能管理 node 包，包括：安装卸载更新查看搜索发布等
  作用类似于：Pc 中的软件管家，安卓市场，Appstore 等软件安装
  - node 安装
    NPM 基于 node.js，所以要先安装 node.js
    地址：nodejs.org/en/download/
    - Window 选择 msi 版本
    - Mac 选择 pkg 版本
  - 测试
    使用命令行工具—> 菜单->运行-> cmd->输入 node，没有报错就成功了
  - 命令行基本操作
    - pwd（mac）打印当前工作的目录
    - cd 改变目录
    - 盘符 d:
    - dir/ls（mac）打印当前目录文件
  - npm 使用
    - 安装文件
      官网：https://www.npmjs.com/
    - 安装软件的命令：npm install，所有安装软件会在node_module 文件夹下(npm 会自动创建)
      - 本地安装 npm install * – 安装在当前目录下（以项目为单位）,一般安装的是我们当前项目的依赖文件，如 jQuery, bootstrap 等
      - 全局安装 npm install * -g 所有项目都可以使用,一般安装的是工具性文件，如webpack，grunt等
      - 写法：npm install name（包名称）
      - 简写：npm i name
      - 指定版本：npm install name@ 版本
      - 更新: npm update name
        注意：这里只更新到主版本的最新版本
      - 搜索: npm search name
      - 卸载: npm uninstall name
  - package.json
    用来描述当前项目（包）的信息，该文件的内容是一个 json 格式的数据
    - “name”:”miaov” //项目名称
    - “version”:”2.2.2” //版本
    - “dependencies”:{“jquery”:”^2.2.2”} //项目依赖
    - “devDependencies”:{“”:””} //工具
    - 通过npm init可以创建 package.json 文件
    - 可以直接在 package.json 文件中自己书写依赖，利用命令 npm install ，会自动读取依赖，下载安装
18:00 下课了