虽互不曾谋面,但希望能和你成为笔尖下的朋友
以读书,技术,生活为主,偶尔撒点鸡汤
不作,不敷衍,意在真诚吐露,用心分享
点击左上方,可关注本刊
撰文 | 川川
VX-ID:suibichuanji
点击文末左下方阅读原文,可看视频内容
前言
撰文:川川
至今为止,关于React中的组件已经接触到了有很多,用类class声明的组件,函数式funtion关键字声明的组件,以及样式组件(styled-components),对于前面几节当中已经用Redux实现了一个todolist,但是代码依旧不够完美,我们继续进行拆分的
在本节中,你将学习到,如何拆分容器组件,UI组件(无状态组件),让组件尽可能的保持功能的单一,减少组件的状态的
· 正 · 文 · 来 · 啦 ·
♚
容器组件(聪明组件)
在使用Redux中,无非就是做两件事情
如何获取store的状态(组件中通过getState方法获取),并且初始化组件的状态(在Reducer纯函数中初始化),同时还需要监听store的状态改变(通过store触发subscribe函数),当组件需要更改store状态时,需要通过dispatch派发action对象,然后在Reducer纯函数里面根据state以及action,返回最新的state给store
根据当前的props和state,渲染出用户界面
在React开发里,让一个组件专注做一件事情,是封装组件的一个基本原则,如果你发现编写的组件做的事情太多了,那么就可以把组件拆分成若干粒度的小组件的,让每个组件只专注的做自己的事情
例如:在我们上几节代码中的Todolist的代码中,尽管我们把数据已经抽离放到store当中进行存储了的,但是依旧有许多逻辑,组件的渲染都杂糅在一个文件当中的
如下代码所示
import React, { Component } from 'react';
import { Input, Button, List, Modal } from 'antd'; // 引入antd组件库
import 'antd/dist/antd.css'; // 引入antd样式
import { getInputChangeAction, getAddInputContentAction, getDeleteListAction} from '../store/actionCreators';
import store from '../store/index'; // 引入store
const { confirm } = Modal
// TodoList组件
class TodoList extends Component {
constructor(props) {
super(props);
// 在组件内部通过getState()方法就可以拿到store里面的数据
this.state = store.getState();
// this环境的绑定
this.handleInputChange = this.handleInputChange.bind(this);
this.handleStoreChange = this.handleStoreChange.bind(this);
this.handleAddClick = this.handleAddClick.bind(this);
// 触发订阅,让store感知到state的变化
store.subscribe(this.handleStoreChange); // 接收一个函数,重新获取store最新的数据,subscribe里面必须接收一个函数,否则是会报错的,这个订阅函数放在componentWillMount生命周期函数内调用操作也是可以的
}
// componentWillMount(){
// store.subscribe(this.handleStoreChange);
// }
// 组件卸载,移除时调用该函数,一般取消,清理已注册的订阅,定时器的清理,取消网络请求,在这里面操作
c