为了账号安全,请及时绑定邮箱和手机立即绑定
首页 手记 【九月打卡】第15天...

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

2022.09.21 22:32 58浏览

课程章节: 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中间件的使用

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不会执行。)

图片描述

图片描述

点击查看更多内容
0人点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
学生
手记
粉丝
2
获赞与收藏
2

关注TA,一起探索更多经验知识

同主题相似文章浏览排行榜

风间影月说签约讲师

50篇手记,涉及Java、MySQL、Redis、Spring等方向

进入讨论

Tony Bai 说签约讲师

146篇手记,涉及Go、C、Java、Python等方向

进入讨论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消