React进阶(5)-分离容器组件,UI组件(无状态组件)

虽互不曾谋面,但希望能和你成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

撰文 | 川川

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