# react-chat

**Repository Path**: playfe/react-chat

## Basic Information

- **Project Name**: react-chat
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-06-13
- **Last Updated**: 2022-01-24

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# React 基础

### 生命周期

1. 初始化生命周期

  * constructor
  * componentWillMount 已弃用
  * render
  * componentsDidMount

2. 重新渲染生命周期

  * componentWillReceiveProps 已弃用
  * shouldComponentUpdate
  * componentWillUpdate
  * render
  * componentDidUpdate

3. 卸载生命周期

  * componentWillUnmount

### Redux

store 

  - state 状态
  - action 修改状态的指令，是个对象
  - dispatch 发送指令
  - reducer 处理指令并修改状态
  - subscribe 监听状态变化执行更新试图

```
const store = createStore(reducerFun)

const state = store.getState()

const action = {
  type: 'add'
}

store.dispatch(action)

function reducerFun(state = defaultValue, action) {
  if(action.type === 'add') {
    return state + 1
  }
}
```

### redux-thunk 处理异步redux

利用了 redux 的中间件机制，action不再是一个对象而是一个函数

```
function addGunAsync() {
  return dispatch => {
    setTimeout(() => {
      dispatch(addGun())
    }, 2000)
  }
}
```

### 使用 react-redux 优雅连接 react 和 redux

不再需要 subscribe，只需要 reducer、action、dispatch

提供了 Provide 和 connect

- Provider 组件在应用最外层，只传入store即可
- connect 负责从外部获取组件需要的参数，复杂redux，多个reducer，用combineReducers合并

### router4

react-router-dom 作为浏览器端的路由

- BrowserRouter 包裹整个应用
- Route 路由对应渲染的组件，可嵌套，可用冒号标识参数
- Link 跳转专用
- Redirect 组件直接跳转，用于初始进入页面时，直接跳转的地址
- Switch 包裹所有Route，只渲染命中的第一个Route组件

### 使用 utility 实现密码的 md5 加密

md5 特点：
  1. 单向不可逆，但是通过“彩虹表”可以查到对应的加密前字符串。
  2. 确定性，相同的字符串经md5加密可得到相同的密文。

优化密码复杂度：通过加“盐”并进行两层 md5 加密的方式，增加密码的复杂度
```
function md5Pwd(pwd) {
  const salt = 'react_chat_29v3sx65!@#$~'   // 自定义随机字符串
  return utils.md5(utils.md5(pwd+salt))
}
```