# react-ps

**Repository Path**: pipepandafeng/react-ps

## Basic Information

- **Project Name**: react-ps
- **Description**: react练习
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-03-28
- **Last Updated**: 2023-04-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🐠 react练习

react的练习日记，以及使用其实现一些插件和案例

* 搭建react环境

  1: `webpack` , `webpack-cli` , `webpack-dev-server`

  2： `html-webpack-plugin`

  3：babel相关配置

* 文件分片上传案例

  > `partUpload.jsx` 包含前端文件分片分片处理案例

  1：以支持分片上传

  2：已支持分片上传时展示进度条

***

## Lifecycle

`react Lifecycle` 的练习

***

## todoList

react 简单实现 `todoList`

***

## routerps

`react-router-dom` 的练习

***

## redux

`redux` , `react-redux` 的练习

***

## 其他

* TODO

  1：学习最新的 `react18.0` 新知识 更新
  2: lesson - 37 生命周期函数 

* lesson 
  
  37. 生命周期函数 ()
  38. 生命周期函数 ()
  39. 生命周期函数 ing
  80. react-rouer-dom
    TODO:
    
        `history.js`库的了解

        `<Link>`组件`<NavLink>`组件

        `<BrowserRouter>`组件
        
        一般组件和路由组件 && 路由组件才存在`this.props.history`属性

        封装NavLink

        `BrowserRouter`和`HashRouter`,其中解决`BrowserRouter`页面刷新样式丢失问题

        路由的严格匹配

        `<Redirect>`组件

        嵌套路由的实现，结合`<Redirect>`组件一起完成

        路由组件传参，方法一:`params`传参 方法二：`search`传参 方法三：`state`传参，比较三种方法，并总结。

        编程式路由导航实现三种方式
        
        `withRouter`：可以加工一般组件，让一般组件具备路由组件的API，其返回值是一个新组件。提供一种在一般组件中使用路由组件的API的解决方案。探索其装饰器语法。

        `BrowserRouter`和`HashRouter`比较：其中`HashRouter`的state传参会导致参数丢失

  
***