【笔记-react】《imooc-react16.4快速上手》、《imooc-React16.4 开发简书项目从零基础入门到实战》、《imooc-react全家桶+and共享单车后台管理系统开发》

港控/mmm° 2022-02-01 00:29 633阅读 0赞

<table> 
 <thead> 
  <tr> 
   <th>目录</th> 
   <th>课程名</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td></td> 
   <td><a rel="nofollow">《react16.4快速上手》</a></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><a rel="nofollow">《React16.4 开发简书项目 从零基础入门到实战》</a></td> 
   <td></td> 
  </tr> 
  <tr> 
   <td></td> 
   <td><a rel="nofollow">《react全家桶+and共享单车后台管理系统开发》</a></td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

# <table>   <tbody>    <tr>     <td> 《imooc-react16.4快速上手》</td>    </tr>   </tbody>  </table>  <table></table> #

地址：https://www.imooc.com/learn/1023

### 第01章 react简介及基础语法 ###

##### 1-01 react简介 #####

一、react fiber指的是react16之后的版本。  
二、react生命周期  
1、componentWillMount：在渲染前调用。  
2、componentDidMount：在第一次渲染后调用，组件已经生成了对应的DOM结构。  
3、componentWillReceiveProps：在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。  
`componentWillReceiveProps(newProps) {}`  
4、shouldComponentUpdate：返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。  
5、componentWillUpdate：在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。  
6、componentDidUpate：在组件完成更新后立即调用。在初始化时不会被调用。  
7、componentWillUnmount：在组件从 DOM 中移除之前立刻被调用。  
8、getDefaultProps  
9、getInitialState  
10、render  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70]

##### 1-02 react开发环境搭建 #####

一、react开发环境  
1、node  
2、官网-create react app  
（1）npx create-react-app todlist  
（2）cd todolist  
（3）npm start

##### 1-03 项目工程代码精简 #####

一、registerServiceWorker是pwa的概念，单页面应用。

##### 1-04 什么是组件 #####

一、react中，大写字母开头都是组件  
二、react组件中，必须有个函数叫render，这个函数负责组件显示的内容。  
三、reactDOM可以帮我们把react组件渲染到dom节点上。  
四、类继承React.Component，就成了react组件。  
五、jsx的\{\}中可以写js表达式（如1+2），而不是js语句（如if() \{\}）。

### 第02章 react实战 ###

##### 2-01 编写TodoList功能 #####

一、组件被创建的瞬间，constructor()会被自动执行，super()做一些初始化。

##### 2-03 实现列表项的删除功能 #####

一、如果要改变state中的list，建议拷贝一个出来操作。  
1、比较容易发现错误，调试错误。  
2、react升级后性能会比直接改变list好一些。  
3、state状态强调imuutable(不可变的)。

### 第03章 react组件与通信 ###

##### 3-01 react中组件的拆分 #####

一、父子组件传参  
1、父组件通过属性向子组件传递参数  
2、子组件通过props接受父组件传递过来的参数

// 将输入框的值显示在搜索历史列表中
    handleBtnClick() {
        this.setState({
          list: [...this.state.list, this.state.inputValue],
          inputValue: ''
        });
      }

##### 3-02 子组件向父组件传值的方式 #####

一、父子组件通信  
1、子组件如果想和父组件通信，子组件要调用父组件传递过来的方法

##### 3-03 代码优化 #####

一、如果onClick直接写this.handleDelete.bind(this)性能没那么好，还是在constructor里中写this.handleDelete = this.handleDelete.bind(this)好一些。

handleDelete(index) {
        const list = [...this.state.list];
        list.splice(index, 1);
        this.setState({list});
      }

### 第04章 react中的样式布局 ###

##### 4-01 react项目中如何使用css样式修饰 #####

一、jsx样式  
1、style=\{ \{background: ‘red’\}\}  
最外层的\{\}表示这是js表达式，里面的\{\}表示是一个对象。  
2、设置样式用className，不要用class，class是js中类的关键词（保留字）。  
二、render()需要用最外层元素包裹，如果用div，样式不好布局的时候，可以用`React.Fragment`，这时候就不会有多余的div

render() {
    	return (
    		<React.Fragment>
    			<div>测试</div>
    			<ul><li>单独项</li></ul>
    		</React.Fragment>
    	)
    }

--------------------

# <table>   <tbody>    <tr>     <td> 20190510-20190704：《imooc-React16.4 开发简书项目 从零基础入门到实战》</td>    </tr>   </tbody>  </table>  <table></table> #

（aSuncat：前3章到3-03为止，讲的全是《imooc-react16.4快速上手》的内容，如果已经看过这门过程的人，就没必要看。）

### 第01章 课程导学 ###

##### 1-01 课程导学 #####

一、课程内容  
1、基础内容：环境搭建-> 基础语法 -> 原理进阶 -> 动画 -> redux -> redux进阶  
2、实战项目：环境搭建 -> header -> 首页 -> 详情页 -> 登陆校验 -> 上线  
二、课程涉及到的react技术点  
1、create-react-app、组件化思维、jsx、开发调试工具、虚拟dom、声明周期、React-transition-group、redux、antd、ui/ 容器组件、无状态组件、Redux-thunk（redux中间件）、Redux-saga（redux中间件）、Styled-components（css样式编码，避免组件之间样式的污染）、immutable.js（避免数据的误操作）、redux-immutable（redux中间件）、axios（ajax请求发送）

### 第02章 react初探 ###

##### 2-03 工程目录文件简介 #####

一、脚手架工具是node包文件，都有package.json文件，有项目名称、指令等供自己调用。  
二、目录文件  
1、package.json:  
`"start": "react-scripts start"`，通过react-scripts工具启动。  
2、.gitignore  
不想传到git上的文件。  
3、public/ index.html  
`<noscript>you need to enable Javascript to run this app</noscript>`  
提高代码的健壮性  
4、manifest.json  
PWA serviceWorker，如果当app使用，快捷方式的图标，定义网址，主题  
5、App.test.js：  
自动化测试文件  
6、src/ index.js 项目入口文件  
三、pwa: progressive web application  
RegisterServiceWorker：与pwa有关

##### 2-04 react中的组件 #####

1、reactDom是一个第三方模块，有个render方法，能将组件挂载到某一个dom节点下。  
2、public/ index.html是工程的html模板  
3、只要有jsx语法，想要在react中使用jsx，就得引入React  
`import React from 'react'`

### 第03章 使用React编写TodoList功能 ###

##### 3-02 react中的响应式设计思想和事件绑定 #####

一、react中改变state的值，只能用setState，不能通过改变state的引用来改变值，如，得用`this.setState({inputVal: ''})`，而不能是`this.state.inputVal = e.target.value`;

##### 3-03 实现TodoList新增删除功能 #####

一、react：state不变  
1、immutable  
2、state不允许我们做任何的改变，如果修改了state，后续优化的时候会有问题。

##### 3-04 jsx语法细节补充 #####

一、如果是在jsx中写注释，  
1、一行：\{/*这是注释*/\}，注意要用\{\}，得用/\*\*/，不能用//  
2、多行  
\{  
// 下面是一个input框  
\}  
二、含带html标签的文字  
1、`<li dangerouslySetInnerHTML={ {__html: item}}></li>`  
就能得到`<h1>直接显示html</h1>`  
2、如果直接用`<li>{item}</li>`  
就只能得到`直接显示html`  
三、html中，label的作用是扩大点击的区域。  
`<label for="insertArea">输入内容</label>`  
这样与jsx中的for冲突，会报错，应该写成  
`<label htmlFor="insertArea">输入内容</label>`

##### 3-06 TodoList代码优化 #####

一、es6中，(\{inputValue: e.target.value\})最外层的（）有return的意思  
1、`this.setState({inputValue: e.target.value})` 可以写成  
`this.setState((） => ({inputValue: e.target.value}))`，但是这样是异步的，赋值会有问题，所以可以用  
`const value = e.target.value; this.setState(() => ({inputValue: value}))`  
2、可以避免不小心改变state的状态

this.setState((prevState) => ({
    	list: [...prevState.list, prevState.inputValue],
    	inputValue: ''
    }))

##### 3-07 围绕react衍生出的思考 #####

一、  
1、命令式编程：直接操作dom，如原生js，jquery  
2、声明式开发：面向数据，数据构建完成之后，react可以自动根据数据来更新dom。可以与其他框架共存。如react  
二、react  
1、声明式开发。  
2、可以与其他框架共存。react与其他框架的代码要互不影响。  
3、组件化。  
4、单向数据流。父组件向子组件传值，这个值子组件可以使用，但是不能更改。  
为了使测试更方便，不容易遇到坑。  
5、视图层框架。react只负责数据和页面渲染方面的问题。flux,redux等数据层框架  
6、函数式编程。如果代码里都是一些函数的话，给前端自动化测试带来了很大的便利。  
三、面向测试开发流程，自动化测试

### 第04章 react高级内容 ###

##### 4-02 PropTypes与DefaultProps的应用 #####

一、PropTypes作为属性接收的强校验

import PropTypes from 'prop-types'
    TodoItem.propTypes = {
    	test: PropTypes.string.isRequired, // 如果没有传，则不会校验，代码就不会报错
    	test: PropTypes.string.isRequired, // 如果没有传，会报错
    	content: PropTypes.string,
    		content: PropeTypes.arrayOf(PropTypes.number, PropeTypes.string), // content是数组，数组里的项可以是数字， 也可以是字符串
    	content: PropeTypes.oneOfType([PropTypes.number, PropeTypes.string]), // content可以是数字，或者是字符串
    	deleteItem: PropTypes.func,
    	index: PropTypes.number,
    }

二、DefaultProps

TodoItem.defaultProps = {
    	test: 'hello world',
    }

##### 4-03 props, state与render函数的关系 #####

一、当组件的state或者props发生改变，它自己的render函数就会重新执行一次。  
二、当父组件的render函数被运行时，它的子组件的render都会被执行一次。

##### 4-04 react中的虚拟dom #####

一、  
1、实现  
（1）state 数据  
（2）jsx模板  
（3）数据+ 模板结合，生成真实的dom，来显示  
（4）state发生改变  
（5）数据+模板结合，生成真实的dom，替换原始的dom  
2、缺陷  
（1）第一次生成了一个完整的dom片段。  
第二次生成了一个完整的dom片段。  
第二次的dom替换第一次的dom，非常耗性能。  
3、改进  
（1）state 数据  
（2）jsx模板  
（3）数据+ 模板结合，生成真实的dom，来显示  
（4）state发生改变  
（5）数据+模板结合，生成真实的dom，并不直接替换原始的dom。  
（6）新的dom和原始的dom做比对，找差异。  
（7）找出Input框发生了变化  
（8）只用新的dom中的input元素，替换掉老的dom中的input元素。  
4、第二次改进  
（1）state 数据  
（2）jsx模板  
（3）数据+ 模板结合，生成真实的dom，来显示  
`<div id="abc"><span>hello world</span></div>`  
（4）生成虚拟dom（虚拟dom就是一个js对象，用它来描述真实dom）  
`['div', {id: 'abc'}, ['span', {}, 'hello world']]`  
（5）state发生变化  
（6）数据+ 模板，生成新的虚拟dom（极大得提升了性能）  
（7）比较原始虚拟dom和新的虚拟dom的区别，找到区别是span中的内容  
（8）直接操作dom，改变span中的内容  
5、react  
（1）state 数据  
（2）jsx模板  
（3）数据+ 模板结合，生成虚拟dom，来显示  
（4）用虚拟dom的结构生成真实的dom，来显示  
（5）state发生变化  
（6）数据+ 模板，生成新的虚拟dom（极大得提升了性能）  
（7）比较原始虚拟dom和新的虚拟dom的区别，找到区别是span中的内容  
（8）直接操作dom，改变span中的内容  
二、js创建js对象很简单，但是如果创建一个dom，就需要调用一个webApplication级别的api

##### 4-05 深入了解虚拟dom #####

一、jsx ->createElement -> 虚拟dom（ js对象） -> 真实的dom  
二、优点  
1、性能提升了。  
2、它使得跨端应用得以实现。react native

##### 4-06 虚拟dom中的diff算法 #####

一、react底层会用到diff算法，diff, difference  
二、setState设计成异步，是为了提高性能。  
三、diff算法，同级比对，  
优点：算法简单，比对速度非常快。  
缺点：会造成一些dom节点渲染的浪费。  
但是大大减少比对性能消耗。  
四、循环最好不要用index作为Key值，因为这样就没法保证原来的key值与真正的数据一一对应。  
1、`['勤', '奋', '向', '上']`  
这时候的key与value对应关系  
0 - 勤， 1 - 奋， 2 - 向， 3 - 上。  
2、“向”前加入“好”  
0 - 勤， 1 - 奋， 2 - 好，3 - 向， 4 - 上。  
2不再对应向，3不再对应上。key值就不能与value建立起稳定正确的关系。  
五、引入key值  
1、提高虚拟dom比对性能。  
2、key值要保持稳定。项目中，能不用index作为key值，就不要用。因为index值不稳定。

##### 4-07 React中的ref的使用 #####

一、如果要操作dom，不应该在setState()后执行，需要放在setState的第二个参数中。

this.setState((prevState) => ({
    	list: [...prevState.list, prevState.inputValue],
    	inputValue: ''
    }), () => {
    	console.log(this.ul.querySelectorAll('div'))
    })

二、尽量避免使用ref，如果要使用，注意setState是异步的  
`ref={(input) => this.input = input}`

##### 4-08 React的生命周期函数 #####

一、生命周期函数指在某一个时刻组件会自动执行的函数  
二、  
1、Initialization：初始化  
setup props and state  
2、mounting：挂载  
componentWillMount -> render -> componentDidMount  
（1）componentWillMount：在组件即将被挂载到页面的时刻自动执行  
（2）render  
①子组件数据发生变化  
②父组件render发生改变  
（3）componentDidMount：组件被挂载到页面之后，自动执行  
3、updation  
（1）props  
①componentWillReceiveProps：  
条件：一个组件要从父组件接收参数；如果这个组件第一次存在于父组件中，不会执行；如果这个组件之前已经存在于父组件中，才会执行  
执行条件：只要父组件的render函数被重新执行了，子组件的这个生命周期函数就会被执行  
②shouldComponentUpdate：需要有返回的布尔值，`return true`，或者`return false`  
如果返回true，则继续进行。  
③componentWillUpdate  
如果shouldComponentUpdate返回true，它才执行；如果返回false，这个函数就不会执行了。  
④render  
⑤componentDidUpdate  
（2）states  
①shouldComponentUpdate  
②componentWillUpdate：如果sholdCoponentUpdate返回true，才执行。  
③render  
④componentDidUpdate  
4、Unmounting  
componentWillUnmount：当这个组件即将被从页面中剔除的时候，会被执行  
三、生命周期  
（1）componentWillMount  
（2）render  
（3）componentDidMount  
（4）componentWillReceiveProps  
（5）componentWillUpdate  
（6）componentDidUpdate  
（7）componentWillUnmount

##### 4-09 react生命周期函数的使用场景 #####

一、所有的生命周期都可以不存在，但是render()这个生命周期必须有  
react的component默认其他所有生命周期函数，但是没有默认render，所以如果自己写，render必须有  
二、shouldComponentUpdate，提升了组件的性能，可以避免组件产生不必要的render  
1、如果return false，当父组件数据发生改变时，子组件并不会发生渲染  
2、

shouldComponentUpdate(nextProps, nextState) {
    	if (nextProps.content !== this.props.content) {
    		return true;
    	} else {
    		return false;
    	}
    }

三、一般ajax请求放在componentDidMount  
1、如果ajax放在render中，容易死循环。因为render会重复执行  
2、如果放在coomponentWillmount中，react也是可以的。但是如果是在react native，服务器端同构中，就容易发生错误。  
四、发送ajax请求  
1、终端输入：yarn add axios  
2、

axios.get('api/todolist')
    	.then(() => {})
    	.catch(() => {})

##### 4-10 使用charles实现本地数据mock #####

一、桌面创建文件  
1、cd Desktop  
2、touch todolist.json  
`["dell", "lee", "imooc"]`  
二、charles  
1、tools -map local  
2、map from：http localhost 3000 /api/todolist  
3、local from：本地的todolist.json文件  
三、

this.setState(() => {
    	return {
    		list: res.data
    	}
    })

可以优化写成

this.setState(() => ({
    	list: [...res.data]
    }))

##### 4-13 使用react-transition-group实现动画（一） #####

一、动画模块：react-transition-group模块  
二、安装使用  
1、npm install react-transition-group --save  
2、  
（1）js文件

<CSSTransition 
    	in={this.state.show} 
    	timeout={1000}
    	classNames = 'fade'
    	unmountOnExit
    	onEntered={(el) => {el.style.color='blue'}}
    	apper={true}
    >
    </CSSTransition>

①apper=\{true\}，第一次显示的时候就有动画，需要有.fade-appear,.fade-appear-active样式  
②入场动画执行到第一帧：onEntering  
（2）css文件

.fade-enter, .fade-appear {}
    .fade-enter-active, .fade-appear-active{}
    .fade-enter-done{}
    .fade-exit-enter{}
    .fade-exit-active{}
    .fade-exit-done{}

三、react-transition-group一般是用cssTransition，transition是cssTransition解决不了时用的

##### 4-14 react-transition-group的使用（2） #####

一、react-transition-group的transitionGroup可以让多个组件有动画效果

import {CSSTransition, TransitoinGoup} from 'react-transition-group'
    <TransitionGroup>
    this.state.list.map((item,index) => {
    	return (
    		<CSSTransition
    			timeout={1000}
    			classNames = 'fade'
    			unmountOnExit
    			onEntered={(el) => {el.style.color='blue'}}
    			apper={true}
    			 key={index}
    		>
    			<div>item</div>
    		</CSSTransition
    	)
    })
    </TranstionGroup>

（1）CSSTransition没有in属性  
（2）循环列表的key放到外层标签，不放div中

### 第05章 redux入门 ###

##### 5-01 redux概念简述 #####

一、react是一个轻量级的视图层框架  
二、需要配套数据层框架和react配合使用，全球较好的数据层框架：redux  
三、redux = reducer + flux（官网推出的最原始的数据层框架，现已过时）

##### 5-02 redux的工作流程 #####

一、redux工作流  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 1]

##### 5-03 使用antd实现todolist页面布局 #####

一、antd：react基础组件库  
1、antd官网，开始使用，https://ant.design/docs/react/introduce-cn  
2、 npm i antd --save

##### 5-04 创建redux中的store #####

一、  
npm i redux --save

#### 5-05 action和reducer的编写 ####

一、`store.subscribe()`  
二、react要改变store里的数据，先要去派发一个action,action会通过dispatch方法传递给store,store再把之前的数据和action转发给reducer，reducer是一个函数，它接收到了state和action之后，做一些处理之后，会返回一个新的state给到sote，store用这个新的state替换到之前的store里的数据，store数据发生改变的时候，react组件知道store的数据发生了改变，这个时候会从store重新取数据，更新组件内容，页面就跟着发生变化了。

##### 5-07 actionTypes的拆分 #####

一、如果写成actionTypes.js，如果变量名写错，则控制台会报错。如果不放在actionTypes.js中，直接写个字符串，是不会报异常的，出了错误会非常难调。

##### 5-09 redux知识点复习补充 #####

一、store必须是唯一的  
二、只有store能够改变自己的内容  
1、reducer可以接收state，但是绝不能修改state  
三、reducer必须是纯函数  
1、纯函数指的是，给定固定的输入，就一定会有固定的输出，而且不会有任何副作用。  
（1）如果有setTimeout, ajax请求，new Date()，等，就不是纯函数了。  
`newState.inputValue = new Date();` 就不是纯函数了。  
（2）`state.inputValue = action.value;` 就是有副作用  
四、store相关  
`createStore`  
`store.dispatch`  
`store.getState`  
`store.subscribe`

### 第06章 redux进阶 ###

##### 6-01 ui组件和容器组件 #####

一、ui组件负责页面的渲染  
容器组件负责页面的逻辑  
二、视频中点击删除，视频中的写法index其实得到的是e,从上往下删除看起来不会报错，但是代码逻辑错误，应该用闭包

renderItem={(item, index) => {
                return (
                  <List.Item onClick={() => {this.props.handleDeleteClick(index)}}>
                    {item}
                  </List.Item>
              )}}

##### 6-02 无状态组件 #####

一、无状态组件，无状态组件的性能会比较高；  
1、如果组件是ui组件，只负责页面的渲染，只有render函数，推荐使用无状态组件  
2、js生成的类，里面会有生命周期等，性能不如无状态组件

// 无状态组件
    const TodoListUI = (props) => {}
    
    // 类
    class TodoListUI extends Component {}

##### 6-04 使用redux-thunk中间件实现ajax数据请求 #####

一、git搜索redux-thunk  
1、npm install redux-thunk --save  
2、引入中间件

import { applyMiddleware } from 'redux';
    import thunk from 'redux-thunk';
    const store = createStore(
    	rootReduce,
    	applyMiddleware(thunk)
    )

二、通过redux创建store的时候，要用中间件  
三、redux-thunk是redux的中间件，不是react的中间件。  
四、`applyMiddleware([redux-thunk, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()])`会出错  
1、解决  
（1）redux-devtools-extension  
（2）advanced store setup  
（3）创建了composeEnhancers  
（4）

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
    const enhancer = composeEnhancers(
      applyMiddleware([thunk])
    )
    const store = createStore(
      reducer, /* preloadedState, */
      enhancer
    );

五、调用store.dispatch，把action放到store的时候，这个action就会被自动执行，这个action就是actionCreators.js里的函数（异步请求）.  
六、actionCreators.js里，函数里能接收到store的dispatch方法  
`export const getTodoList = () => { return (dispatch) => {} }`  
七、只有用了redux-thunk，action才可以返回一个函数，不然只能返回一个对象。

##### 6-05 什么是redux的中间件 #####

一、中间件指的是action和store之间  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 2]  
二、dispatch，如果是对象，就直接把对象传给action，如果是函数，就等函数执行完之后传给action  
三、中间件  
1、redux-thunk，是把ajax放到action去操作  
2、redux-saga，是把ajax单独拿出来处理。  
3、redux-logger，是根据dispatch来对每次操作进行console.log()

##### 6-06 redux-saga中间件使用入门（1） #####

一、只有redux才有action和store的概念，而不是react的  
二、可以用redux-saga完全代替redux-thunk  
三、安装及使用redux-saga  
1、npm install redux-saga --save  
2、store/index.js

import { createStore, applyMiddleware, compose } from 'redux';
    import reducer from './reducer';
    // import thunk from 'redux-thunk';
    import createSagaMiddleware from 'redux-saga';
    import sagas from './sagas';
    
    const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
    // const middleware = [thunk];
    const sagaMiddleware = createSagaMiddleware();
    const enhancer = compose(applyMiddleware(sagaMiddleware), composeEnhancers);
    
    const store = createStore(
      reducer, /* preloadedState, */
      enhancer
    );
    
    sagaMiddleware.run(sagas);
    
    export default store;

##### 6-07 redux-saga中间件使用入门（2） #####

一、有了redux-saga，reducer可以接收action，sagas也可以接收action  
二、sagas.js中，用put代替`store.dispatch(action)`  
三、generator函数里不要用promise形式了

const res = yield axios.get('http://localhost:3000/mock/list');
    const action = initListAction(res.data);
    yield put(action);

代替

axios.get('http://localhost:3000/mock/list').then((res) => {
          const data = res.data;
          const action = initListAction(data);
          put(action);
        })

##### 6-08 如何使用react-redux #####

一、（提供器） 连接store，把store提供给内部所有组件了。  
二、mapDispatchToProps是把store.dispatch挂载到props上。  
三、todolist是一个Ui组件，connect将ui组件和业务逻辑相结合，返回的内容是一个容器组件。  
1、容器组件包括数据，派发之类的东西

### 第07章 项目实战：header组件开发 ###

##### 7-01 项目目录搭建，styled-components与reset.css的结合使用 #####

一、npm安装失败，网络问题等的解决方案有以下2种：  
1、cnpm  
2、手机切换到移动网络，开个热点，电脑连接到热点  
二、styled-components，对css样式进行管理。  
1、npm install --save styled-components  
三、aSuncat：eslint  
1、  
`npm install --save-dev eslint babel-eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y`  
babel-eslint：项目中需要用到es2015规范  
eslint-config-airbnb : 配置一些 eslint rules 的规范  
eslint-plugin-import ：在使用 import 的时候，一些 rules 规范  
eslint-plugin-react ： 一些 react 的 eslint 的 rules 规范  
eslint-plugin-jsx-a11y： 一些 jsx 的 rules 规范  
2、.eslintrc

{
      // 环境
      "env": {
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true
      },
      // 使用的扩展库
      "extends": "airbnb",
      // 解析器用于解析代码
      "parser": "babel-eslint",
      // 解析器配置
      "parserOptions": {
        "ecmaVersion": 8,
        "sourceType": "module",
        "ecmaFeatures": {
          "jsx": true
        }
      },
      // 第三方插件
      "plugins": [
        "react"
      ],
      // 规则
      "rules": {
        "eol-last": 0, // 在非空文件的末尾至少执行一个换行符（或不存在）
        "func-names": 0,
        "max-len": 0, // 代码最大行长度，0-不校验
        "no-console": 0, // 禁止调用console对象的方法
        "no-underscore-dangle": 0, // 不允许在标识符中使用悬空下划线
        "no-param-reassign": 0,
        "no-plusplus": 0,
        "no-unused-expressions": 0,
        "no-unused-vars": 0,
        "object-curly-newline": 0, //在对象文字或解构赋值的大括号内强制执行一致的换行符
        "semi": [2, "always"], // 语块结尾要加分号
        "import/prefer-default-export": 0, // 只有一个export时，使用default
        "jsx-a11y/anchor-has-content": 0, // a标签需要有内容
        "jsx-a11y/click-events-have-key-events": 0, // 不能给非绑定元素(如：li )绑定事件问题
        "jsx-a11y/no-static-element-interactions": 0, // 静态html元素（非Button）的 onClick 事件需要至少一个键盘事件
        "react/destructuring-assignment": 0,
        "react/jsx-filename-extension": [1, { // 允许使用jsx的文件扩展名
          "extensions": [".js", ".jsx"] // 允许使用jsx的文件扩展名:.js 和.jsx 文件
        }],
        "react/jsx-one-expression-per-line": 0,
        "react/no-array-index-key": 0, // 禁止使用数组的 index 作为 key
        "react/no-danger": 0, // 禁止在使用了 dangerouslySetInnerHTML 的组建内添加 children
        "react/prefer-stateless-function": 0, // 如果组件是一个无状态组件，推荐使用正常函数，而不是用类class
        "react/prop-types": 0, // 必须定义props的type
        "react/self-closing-comp": 0 // 当标签没有子元素的时候,始终使用自闭合的标签
      }
    }

3、package.json的scripts

"scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },

改成：

"scripts": {
        "start": "PORT=3002 react-scripts start",
        "dev": "npm run lint && npm run start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject",
        "lint": "eslint --ext .js --ext .jsx src",
        "lint-fix": "eslint --fix --ext .js --fix --ext .jsx src"
      },

（1）`"lint": "eslint --ext .js --ext .jsx src",` // lint：检查代码是否符合eslint规则  
（2）`"lint-fix": "eslint --fix --ext .js --fix --ext .jsx src"`// lint-fix: 修复不符合eslint规则的代码

4、关闭eslint检查  
（1）关闭当前文件eslint检查

/*eslint-disable*/
    function test() {
    	return true
    }

（2）关闭某一行eslint检查

// eslint-disable-next-line

（3）调整eslint规则

/* eslint no-console:"error"*/
    console.log('test');

5、如果使用了git，可以通过pre-commit钩子在每次提交前检测  
（1）npm install --save-dev pre-commit  
（2）

'pre-commit': [
    	''lint
    ]

四、通过terminal开启了一个端口号为3002的项目，找不到退出的出口，手动关掉terminal也不行，解决方案，terminal输入  
`pkill -a Terminal`  
五、视频中的injectGlobal这个api已经被弃用，应该用createGlobalStyle  
六、css Tools的reset css，粘贴到style.js中

/* http://meyerweb.com/eric/tools/css/reset/ 
       v2.0 | 20110126
       License: none (public domain)
    */
    
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, 
    figure, figcaption, footer, header, hgroup, 
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    	margin: 0;
    	padding: 0;
    	border: 0;
    	font-size: 100%;
    	font: inherit;
    	vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, 
    footer, header, hgroup, menu, nav, section {
    	display: block;
    }
    body {
    	line-height: 1;
    }
    ol, ul {
    	list-style: none;
    }
    blockquote, q {
    	quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    	content: '';
    	content: none;
    }
    table {
    	border-collapse: collapse;
    	border-spacing: 0;
    }

##### 7-03 用styled-components完成Header组件布局（2） #####

一、aSuncat:不喜欢用css封装成组件使用，所以弃用styled-components，用sass写样式。  
二、sass  
1、npm i --save node-sass

##### 7-04 使用iconfont嵌入头部图标 #####

一、阿里图标库：https://www.iconfont.cn  
创建简书的图标库

##### 7-07 使用combineReducers完成对数据的拆分管理 #####

一、redux引入combineReducers，将多个reducer组合在一起。

##### 7-09 使用immutable.js来管理store中的数据 #####

一、immutable.js  
1、immutable对象，不可变更的对象  
2、npm i --save immutable  
3、通过fromJS将js对象转换成immutable对象  
4、immutable对象中获取某个属性，用get方法  
`state.header.get('focused')`  
5、immutable对象的set方法，会结合之前immutable对象的值，和设置的值，返回一个全新的对象。

##### 7-10 使用redux-immutable统一数据样式 #####

一、redux-immutable  
1、reducer.js  
`import { combineReducers } from 'redux-immutable';`  
redux有combineReducers方法，返回普通的对象: state，redux-immutable有combineReducers方法，返回immutable对象：state  
2、header/ index.js中  
`focused: state.get('header').get('focused'),` 可以获取到state（immutable对象）中的header（immutable对象）中的focused属性，也可以简写成下列方式  
`focused: state.getIn(['header', 'focused']),`  
及用getIn方法代替get方法。

##### 7-11 热门搜索样式布局 #####

一、react 只能兼容到ie8浏览器

##### 7-12 ajax获取推荐数据 #####

一、api/headerList.json  
1、工程目录下看是否有对应的路由  
2、public下的是否有api，是否有headerList.json

### 第08章 项目实战：路由开发 ###

##### 8-01 什么是路由，如何在react中使用路由功能 #####

1、npm install --save react-router-dom  
2、

import { BrowserRouter, Route } from 'react-router-dom';
     <BrowserRouter>
    	<div>
    	  <Route path="/" exact render={() => <div>home</div>} />
    	  <Route path="/detail" exact render={() => <div>detail</div>} />
    	</div>
    </BrowserRouter>

（1）BrowserRouter代表的是一个路由  
（2）Route代表的是一个个路由规则

##### 8-08 实现加载更多功能 #####

一、List只是最外面的数组变成了immutable对象，用fromJS使得数组和数组里面的小对象都变成immutable对象。

##### 8-10 首页性能优化及路由跳转 #####

一、组件通过connect与store产生连接，，只要store数据发生了改变，那么每个组件都会被重新渲染，每次都会执行一次render函数。  
二、按需加载组件  
1、每个组件写shouldComponentUpdate，就可以按需  
2、immutable.js与PureComponent想结合，就会根据数据改变按需重新渲染。  
三、react-router-dom是单页面应用路由，单页面应用只会加载一次html，f12 - network - doc ，能看到页面html渲染次数  
1、解决：用Link代替a标签，

### 第09章 项目实战：详情页面和登录功能开发 ###

##### 9-04 页面路由参数的传递 #####

一、获取参数  
1、动态路由获取参数  
`to={`/detail/KaTeX parse error: Expected 'EOF', got '\}' at position 18: …tem.get('id')\}\`\}̲\` \`<Route path=…\{item.get(‘id’)\}`}`  
`<Route path="/detail" exact component={Detail} />`

##### 9-08 异步组件及withRouter路由方法的使用 #####

一、按需加载组件：react-loadable  
1、详情代码只有在进入详情时才会加载  
2、以Detail为例，detail文件夹下新增loadable.js

import React from 'react';
    import Loadable from 'react-loadable';
    
    const LoadableComponent = Loadable({
      loader: () => import('.'),
      loading() {
        return <div>正在加载</div>;
      },
    });
    
    export default () => <LoadableComponent />;

二、`const { params } = this.props.match;`，如果不用withRouter，会获取不到这个参数。  
三、`export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Detail));`  
1、withRouter，让Detail有能力获取到Router中所有参数和内容

### 第10章 课程总结 ###

##### 10-02 react版本升级说明 #####

一、16.4，飞起来componentWillUpdate, componentWillReceiveProps

# <table>   <tbody>    <tr>     <td> 20190722-：《imooc-react全家桶+and共享单车后台管理系统开发》</td>    </tr>   </tbody>  </table>  <table></table> #

### 第01章 课程导学 ###

##### 1-01 课程导学 #####

一、公共机制封装  
1、axios请求插件封装  
2、api封装  
3、错误拦截  
4、权限、菜单封装  
5、日期、金额、手机号封装…  
6、Loading、分页、Mock…  
二、项目整体架构  
1、核心库、中间件、公共机制封装  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 3]

### 第02章 React基础知识 ###

##### 02-01 react基础介绍 #####

一、react介绍  
1、facebook开源的一个Javascript库  
2、react结合生态库构成一个MV*框架  
3、react特点  
（1）Declarative（声明式编码）  
（2）Component-Based（组件化编码）  
（3）高效-高效的DOM Diff算法，最小化页面重绘。  
（4）单向数据流  
二、MV*框架代表-只关注视图view层+数据层model  
三、生态介绍  
1、vue生态： vue + vue-router + vuex + axios + babel + webpack  
2、react生态：react + react-router + redux + axios + babel + webpack  
四、  
1、编程式实现  
需要以具体代码表达在哪里（where），做什么（what），如何实现（how）  
2、声明式实现  
只需要声明在哪里（where）做什么（what），而无需关心如何实现（how）

##### 02-02 rect脚手架使用 #####

一、yarn  
1、yarn是新一代包管理工具  
2、yarn  
（1）速度快  
（2）安装版本统一、更安全  
（3）更简洁的输出  
（4）更好的语义化  
3、如何使用yarn  
（1）`yarn init`，npm init  
（2）`yarn add`, npm install  
（3）`yarn remove`, npm uninstall  
（4）`yarn / yarn install`, npm i 或 npm install  
二、学习任何一门语言，都需要先学习官网内容。  
三、安装yarn  
`npm i -g yarn`  
四、App.js：项目根组件  
index.js：项目入口

##### 02-03 react生命周期介绍 #####

一、生命周期里的方法，本来就是自己这个类的实例。

### 第03章 主页面架构设计 ###

##### 03-01 #####

一、ant design react和ant design pro有什么区别  
ant design react是一套react组件库，而pro是使用了这套组件库的完整前端脚手架。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70]: /images/20220201/10731dbc5baa4ecb8741209af33bc0ef.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 1]: /images/20220201/55672ae7da2f4323b6f70bbd10a4f9d8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 2]: /images/20220201/6bc1bbb8e64a4c4a8e201b26272370a5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FTdW5jYXQ_size_16_color_FFFFFF_t_70 3]: /images/20220201/cd393fb9d1a34743b5a9ec7345ea0490.png