# antd+react17+hooks+redux+react-redux

**Repository Path**: jumphigher/antd-react17-hooks

## Basic Information

- **Project Name**: antd+react17+hooks+redux+react-redux
- **Description**: 基于antd+reacthooks的全球新闻管理系统
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-10
- **Last Updated**: 2022-11-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 侧边栏
        1、动态渲染侧边栏注意的点：
            *用到了“递归思想”，使二级侧边栏，动态渲染

        2、总结：根据接口返回的数据结构，结合所需数据（字段），灵活的取用需求数据（字段），以上都是对数据操作的方法！！！

### 权限列表
        1、用了antd中的table组件进行页面渲染

        2、数据都从json—server提供的接口中获取

        3、ID列中，用到了table中的树形结构，当数据中包含children字段时，会自动渲染树形结构
        
        4、操作列中（删除和编辑）要点：
            都是通过改变状态，使页面再次渲染；
            *复杂数据结构中，用到了向上or向下关联数据的操作，最后将所需数据进行浅拷贝，并再次更改状态来渲染页面

### 角色列表
        1、要学会处理数据！！！ 用的最多的就是es6的语法：[...arr]or{...obj}

### 用户列表
        1、*forwardRef的使用：使得函数式组件可接收第二个参数：ref
            该参数的作用：多用于表单组件，使得父子组件都可拿到表单数据

        2、form组件的一些api:setFieldsValue,valiDateFields等，详情见antd文档


### 草稿箱
        1、使用table组件，准备columns需要渲染的字段信息，dataSource中传入后端返回的数据

        2、删除操作中，在执行axios.delete()后，需要再次渲染页面：方法就是，使dataSource状态变更，用数组过滤的方法，过滤出【删除数据ID以外的数据】

        3、NewsPreview组件：
                a、用到了antd中的PageHeard组件
                b、在columns中，给需要跳转的字段的render中，加上a标签并传入id（路由传参）
                c、在NewsPreview组件中，通过props.match.params获取字段id，并向后端请求该条数据，最后存在状态中
                d、根据需要，将数据渲染至页面，用到两个知识点：
                        1）moment，格式化时间：moment(时间字段).format('YYYY/MM/DD HH:mm:ss')
                        2）一个属性，将html标签体内容，转为string，dangerouslySetInnerHTML={{_html:'这里放html标签数据'}}
        

### 发布模块
        1、主要知识点就是3点：
                a、封装共用的子组件
                b、自定义hooks
                c、html标签，可以通过props传递，也可以包裹成函数形式传递
        
        2、自定义hooks：
                -都是用useXXX开头；
                -函数主体是共有部分，最后将需要的数据return出去
                -可以给函数传递参数
        
        3、该模块是将，操作数据的方法封装在hooks中；
                -父组件给共用的子组件传递一个带形参的函数，子组件调用并传入父组件所需的实参（子->父的数据通信）
                -父组件再调用hooks中的方法，并传入所需的参数
                -父->子；子->父；父->hooks->hooks给父需要的函数，形成闭环


### SideMenu折叠
        1、用到的知识点:
                a、redux和react-redux
        
        2、具体步骤与思路
                1）处理数据的工作
                        a、cnpm i --save redux react-redux
                        b、src->创建Redux
                        c、Redux->创建store:
                                -用legacy_createStore
                                -给创建好的store中传入reducers
                                -如果有多个reducers，可以使用combineReducers进行对象形式的整合
                        d、Redux->创建reducers：
                                -reducer是一个数据的函数
                                -有两个参数，preState和action；action包括：type和payload
                                -处理多个type时，用switch分支进行处理，语法如下
                                        switch(action.type){
                                                case '1':
                                                <!-- 这一步需要首先将老状态进行深复制 -->
                                                let newState = {...preState}
                                                <!-- 在对新数据，进行编辑 -->

                                                <!-- 注意：一定要return出新的state -->
                                                return newState


                                                <!-- 以下是，没有捕获到相应的type时，返回老数据 -->
                                                default:
                                                return {preState}
                                        }
                2）使得所有组件都可以获取到store
                        在App.js中，用<Provide store={store}>包裹外壳组件（所有组件的父组件），并传入store
                3）使得需要数据共享的组件，可以拿到共享的状态，和操作状态的方法
                        -用connect包裹需要数据共享的组件
                                connect(mapStateToProps,mapDispatchToProps)(需要数据共享的UI组件)
                        -mapStateToProps:是一个函数，返回一个状态对象

                        -mapDispatchToProps:是一个对象，包含的是分发数据的函数，return出去的action：type和payload

                        -以上的状态和方法，都会存在UI组件的props中

### 游客模式下的新闻界面
        1、用到的antd组件:card、pageheader、list
        2、用到了处理数据的工具:
                import _ from 'loadsh'
        3、用到了Object方法，处理对象
                **用Object.entires的方法，可以将对象->二维数组
        4、动态渲染界面的方式，给antd组件传入key值，
                key值可以是id，也可以是唯一名称标识