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

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

2022.09.20 23:18 60浏览

课程章节: Redux入门

主讲老师: Dell

课程内容:

今天学习的内容包括:

redux:数据都放在Store里面,组件改变Store里面的数据,其他组件能感知到Store数据的变化,如果有变化,就获取新的数据,从而达到组件数据传递的功能.store类似于全局变量(但是store更强大的地方在于能主动去刷新所有用到store的组件

redux三个基本原则:
①:store必须是唯一的
②:只有store可以改变自己的内容
③:reducer 必须是纯函数

只有store能改变自己内容说明在reducer里我们不能直接操作state,只能通过定义新变量copy state的值,然后对新变量进行操作并 return 出新变量,不允许直接改变state。
什么是纯函数?
给固定的输入,就一定会有固定的输出,并且不会有任何副作用。
所以对于异步函数(定时器、ajax数据请求等)、动态时间都不适意在reducer里订阅。

课程收获:

5.1 心得:

Redux的设计理念:把所有的数据放到store里进行管理,一个组件改变的store里面的内容,其他的组件就感知到了store里面的变化,再来取数据,从而间接的实现了组件之间实现数据传递的功能。

Facebook:react在2013年开源的时候,还开源了flux(已经过时),flux是官方推出最原始的辅助react的数据层框架,但实际使用时有缺点:公共数据存储区域store由很多的store所组成,这样会导致数据存储的时候会有数据依赖的问题。便在flux的基础上引入了reducer的概念–>redux。

react只是一个轻量级的视图层框架,如果要做大型应用就要搭配视图层框架redux一起使用
redux组件之间的传值非常简单,redux里面要求我们把数据都放在一个公共的存储区域store里面,组件之中尽量少放数据,也就是所有数据都不放在组件自身了,都把它放到一个公用的存储空间里面,然后组件改变数据就不需要传递了,改变store里面的数据之后其它的组件会感知到里面的数据发生改变。这样的话不管组件的层次有多深,但是走的流程都是一样的,会把数据的传递简化很多

render生命周期函数必须存在

shouldComponentUpdate(nextProps,nextState){
} 

图片描述

提高性能

5.2 心得:

ReactComponents 页面上的组件

Store 存储数据的公共区域

redux是视图层框架,把所有数据都放在store之中,每个组件都要从store里拿数据,然后每个组件也要去改store里面的数据,
举例:把这个流程理解成一个图书馆的流程
react compontents:借书的人
action creators:“要借什么书”这句话(语句的表达,数据的传递)
store:图书馆管理员(没办法记住所有书籍的存储情况)
reducers:图书馆管理员的记录本(要借什么书,先查有没有,要还的书查一下放到某个位置);
借书的人~ 我要借一本书 ~ 图书管理员听见 ~ 查阅reducers手册 ~ 去store找书 ~ 把对应的书给借书人

对应到redux中(redux工作流):
一个组件 ~ 要获取数据 ~ store接收到 ~ 查数据reducers告诉store给什么数据 ~ store把数据给react。
如果想改变store数据,
一个组件~ 我要改变数据 ~ store接收到 ~ reducers知道store的数据应该如何被修改,reducers告诉store怎么修改数据~store修改好数据 ~ 告诉组件数据修改完了可以获取数据了
图片描述

5.3 心得:

安装antd

yarn add antd

实例代码:

import React,{ Cmponent } from 'react';
import 'antd/dist/antd.css';
import { Input, Button , List } from 'antd';

const data = [
 'Racing car sprays burning fuel into crowd.',
 'Japanese princess to wed commoner.'
 'Australian walks 100km after outback crash.',
 'Man charged over missing wedding girl.',
 'Los angeles battles huge wildfires.',
];

class TodoList extends Component {
 render() {
  return (
   <div style = {{marginTop: '10px', marginLeft: '10px'}}>
    <div>
     <Input placeholder = 'todo info' style = {{width: '300px'}}>
     <Button type = "primary">提交</Button>
    </div>
    <List
     header = {<div>Header</div>}
     footer = {<div>Footer</div>}
     bordered
     dataSource = {data}
     renderItem = {item => (<List.Item>{item}</List.Item>)}
     />
    </div>
  )
 }

5.4 心得:

1.npm安装Redux
2.在store文件夹下创建index.js,import { createStore } from 'redux'
3.在store文件夹下创建reducer.js

const defaultState = {
inputValue:'123'
}
export default (state = defaultState,action) =>{
return state;
}

4.index.js中const store = createStore(reducer);
5.在组件中引入,this.state = store.getState()
6.通过redux提供的getState()方法获取Store中的数据:

import store from './store'
constructor() {this.state = store.getState()}
return <input value={this.state.inputValue}>

store相当于图书管理员,管理员记不住该怎样管理和存储数据,所以交给reducer(笔记本)来处理和管理数据
所以在创建store的时候,要把笔记本同时传给管理员,要不然store不知道自己存的是什么

使用 store

constructor(props){

super(props)

store.getState();

}

5.5 心得:

1.更新store中的数据,首先定义action对象,其中包含type: ‘’, newValue: ‘’,然后通过store.dispatch(action)传给store。

2.store把之前的数据previousState和传过来的action转发给reducers函数。

3.reducers接收state和action后进行数据处理,重新生成一个newState,把newState作为返回值返回给store。

4.store接收newState,将新数据替换原来的数据.

5.观测到数据发生改变(store.subscribe()),重新取值store.getState(),更新页面。

redux过程:
1.用户通过事件先发起action:
const action={
type: ‘input_change’,
value: e.target.value//如果有value的话要写上
}
2.然后把action发送给store:
store.dispatch(action)

5.6 心得:

绑定函数的参数是通过bind(this,index),传递的,然后在函数内通过action传递到store再到reducer中去的,在action中获得index是通过action.index获得的传递过来的index

5.7 心得:

拆分ActionType的原因在于,action中传递Type内容如果是字符串,则不能被react检测。
如果组件中传递的action中的字符串值与reducer中接收比对的字符串值不同,react无法检测出来错误,会导致程序逻辑出现问题。
所以需要将actionTypes拆分出来,单独在文件中定义。需要使用的时,就引入actionTypes文件,以变量的形式使用actionTypes,这样react就可以检测到变量之间而不是字符串之间是否相同,从而进行提示。

5.8 心得:

store文件夹下创建一个actionCreators.js,把action都集中写在一个文件夹中,提高代码的可维护性,方便后期维护和自动化测试

5.9 心得:

核心API:

createStore

store.dispatch —— 派发action,该action传递给store

store.getState —— 获取store中所有数据

store.subscribe(回调函数) —— 订阅store的改变。只要store发生改变,回调函数执行

图片描述

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

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

评论

作者其他优质文章

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

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

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

风间影月说签约讲师

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

进入讨论

Tony Bai 说签约讲师

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

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

举报

0/150
提交
取消