【九月打卡】第15天 React零基础入门到实战，完成企业级项目简书网站开发 第六讲

课程名称： React零基础入门到实战，完成企业级项目简书网站开发

课程章节： Redux进阶

主讲老师： Dell

课程内容：

今天学习的内容包括：

容器组件又叫做聪明组件，负责接收store的一些数据
ui组件展示型组件，负责的是数据的渲染，又叫做傻瓜组件

课程收获：

6.1 心得：

当一个组件，有逻辑处理和UI数据渲染时，会变得混杂。
这个时候可以拆分成 UI组件和容器组件。
拆分的时候，按照容器组件用变量传值给子组件，
子组件用props接收。

需要注意的是：
子组件调用父组件方法函数时，还会遇到this指向问题。
因为需要获取index的值，UI组件里用箭头函数来代替父组件bind（this）

onClick={(index) => {this.props.handleItemDelete((index) }}

容器组件负责页面的逻辑

1.创建一个UI组件->TodoListUI.js

import React, { Component } from 'react'; 

class TodoListUI extends Component { 
 render() {
  return (
   <div style={{marginTop: '10px', marginLeft: '10px'}}> 
    <div>
     <Input
      value={this.state.inputValue} 
	      placeholder='todo info'
	      style={{width: '300px', marginRight: '10px'}} 
	      onChange={this,handleInputChange}
	     />
	     <Button type="primary" onClick={this.handleBtnClick} 
	    </div>
	    <List
		     style={{marginTop: '10px', width: '300px'}} 
			  bordered
			  dataSource={this.state.list}
			  renderItem={(item, index) => (<List.Item onClick={ this.handleBtnClick} 
		 />
</div> 
)
}

2.在TodoList的页面import进来
3.需要把UI组件需要的属性和方法在父组件通过属性传入
4.在子组件中通过this.props.xxx获取父组件传入的属性和方法
5.父组件传递给子组件的方法想要传入参数

子组件调用时 如果想传入参数 可以在创建箭头函数时添加一个传参
这样区分
UI组件制作页面的渲染
有逻辑的TodoList就是容器组件，只负责逻辑，不负责页面渲染

6.2 心得：

无状态组件

当一个组件里只有一个render函数时，可以使用无状态组件去代替

无状态组件实际上就是一个函数，性能较高

性能高：普通组件是一个类，还有许多生命周期函数需要执行，而无状态组件只是一个函数

当ui组件只负责渲染，没有做复杂逻辑操作时，一般都可以通过无状态组件来定义

6.3 心得：

redux发送异步请求获取数据

axios.get('/list').then(

  (res) => {

    const data = res.data;

    store.dispatch(actCreInit(data))

  },

  (err) => { console.log('出错啦') }

)

axios的方法要写在componentDidMount中，在then的方法里执行，相当于发起一个action，携带着请求成功的数据res.data，跟redux过程一样

6.4 心得：

1、不使用中间件，store接收的action只能是对象
2、使用了中间件(redux-thunk)，action可以是一个函数，通过store.dispatch将action函数传给store
3、store接收到action后进行判断，如果action是函数，则会执行调用对应的函数，反之是对象，会调动对应的对象返回值
4、action是函数时，内部先进行函数操作，之后去改变store中的数据(state）
注:函数内部可创建一个action对象，外部action这个函数默认接收store的dispatch方法，因此直接调用dispatch方法将内部action对象传给store以便更新数据

6.5 心得：

Redux中间件—用在action和store之间

中间件会对dispatch方法进行升级，如果action是一个对象，就直接传递给store，如果action是一个函数，就不会直接传递给store，而是先让函数执行，需要调用store时再调用store

例如thunk中间件，使得dispath可以接受函数并且当action是一个函数，那么dispath会让这个函数异步执行。若不是，则按原本逻辑返回对象给store。
redux-log对dispath每次派发的时候进行console.log()
redux-saga单独对异步的逻辑拆分出来放在一个文件管理。

6.6、6.7 心得：

Redux-saga中间件的使用

Redux-saga官网：https://github.com/redux-saga/redux-saga

1.安装-> yarn add redux-saga

引用：

import createSagaMiddleware from 'redux-saga'
......
// create the saga middleware
const sagaMiddleware = createSagaMiddleware()
// mount it on the Store
const store = createStore(  reducer,  applyMiddleware(sagaMiddleware))

2.创建saga.js
3.使用中间件运行saga
4.创建action
5.在didmount调用action

中间件：是action和store之间的middleware 是redux的中间件

redux-saga解决了action使用异步代码，还能将异步代码抽取出存放在一个单独文件里方便管理。相较于react-thunk，saga多了许多api，使用方法也较thunk麻烦许多，但是在处理繁多的复杂逻辑时，比较好用。
saga的原理是通过在store处注入后，拦截到所有的action，通过takeEvery()这个API，将拦截的action的Type进行比较，条件符合则执行指定的函数。
(thunk则是在action和store之间做了一层拦截，将原本只能返回JS对象的action，修改后可以返回一个函数)
需要注意的是：单独的saga文件中的函数必须是Generator函数。

redux-saga：
1–配置完了后，首先通过createSagaMiddleleware去创建一个sagamiddleware；
然后通过applyMiddleware去使用创建出来的sagamiddleware；
2–saga.js里面一定要导出一个generator函数，里面通过使用takeEvery方法抓取指定的actionType后执行相应的方法，最好这个方法也是一个generator函数，然后得到相应的数据；之后把取来的数据结果再创建一个action通过put派发给store，store接收到action后又给了reducer，在reducer中进行相应的处理。

6.8、6.9 心得：

1.npm i react-redux
2.store/index.js 引入 { createStore } from redux
3.引入 reducer.js
4.const store = createStore(reducer)
5.reducer是一个纯函数 export default (state, action) = > {}
6.todoList 组件中引入 conncect组件连接 组件和store
7.index.js 根组件 中从react-redux 中引入 Provider
8.const app = ( <Provider store={store}>< todoList /></Provider>)
9.todoList 组件通过 connect 组件把store和组件连接起来

export default connect(mapStateToPropd,mapDispatchToProps)(TodoList)

react-redux提供了Provider组件，用来绑定store，Provider内部的所有子组件都能够连接store。

Provider组件（提供器），可以将store提供给其内部的组件，每一个内部组件都可以使用store

connect方法：让组件与store做连接

export default connect(mapStateToProps,mapDispatchToProps)(TodoList)

前两个参数代表连接的规则，最后一个参数代表该组件要和store做连接

mapStateToProps：store里的公用数据映射到组件的props上；

用法：接收参数state（即store中的数据），返回一个对象

mapDispatchToProps:把store.dispatch方法挂载到props上；

用法：接收dispatch方法，返回一个对象，如果函数需要调用dispatch方法就可以将其写在对象中

6.10 心得：

1. 如果组件只使用到render函数，我们可以将其变成一个无状态组件。这样性能会有很大的提升。
2. export default connect 实际上返回的是一个容器组件(逻辑(mapStateToProps,mapDispatchToProps)+ui组件)
3. action和Type放在统一的文件夹中创建.
4. 点击事件时注意onclick，逻辑需要卸载onclick中的箭头函数中。（因为React自身机制，会自动执行一遍代码，导致代码被执行，放在箭头函数中就是一个函数，React不会执行。）