# react-demo

**Repository Path**: bing-cola/react-demo

## Basic Information

- **Project Name**: react-demo
- **Description**: react 详细入门
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2021-07-12
- **Last Updated**: 2024-05-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


![avatar](/public/logo192.png)

---

## ref

```js
<div ref = {( box )=>{ this.box = box }}></div>

console.log(this.box); // 获取dom
```

---

## 生命周期(针对于组件而言)

### Mounting 挂载  

1. `constructor()`        state和props数据的初始化
2. `componentWillMount()` 在组件即将被挂载到页面时执行(16.3已废弃)
3. `render()`             渲染页面
4. `componentDidMount()`  在组件被挂载到页面后执行，只在挂载时执行一次

### Updation 更新

1. `componentWillReceiveProps()` 从父组件接收参数，且父组件重新执行了render函数，这个函数就会被执行
2. `shouldComponentUpdate()`     在组件被更新之前执行 (return true 更新 , return false 不更新)
3. `componentWillUpdate()`       shouldComponentUpdate返回true则会执行，返回false则不会执行
4. `render()`                    渲染页面
5. `componentDidUpdate()`        在组件被更新之后执行

### Unmounting 卸载

1. `componentWillUnmount()` 在组件即将被页面剔除时执行

### 注意

除了render函数，其他所有的生命周期函数都可以没有

---

## CSSTransition 动画库

### 安装

`yarn add react-transition-group`

### 使用

js

```js
import { CSSTransition } from 'react-transition-group';

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            show: true,
        };
    }
    render() {
        return (
            <div>
                <CSSTransition in={this.state.show} timeout={1000} appear={true} unmountOnExit classNames="mydemo">
                    <p>hello</p>
                </CSSTransition>
                <button onClick={this.toggle.bind(this)}>提交</button>
            </div>
        );
    }
    toggle() {
        this.setState(() => ({
            show: !this.state.show,
        }));
    }
}
```

css

```css
.mydemo-enter,
.mydemo-appear {
    opacity: 0;
}

.mydemo-enter-active,
.mydemo-appear-active {
    opacity: 1;
    transition: opacity 1s ease-in;
}

.mydemo-enter-done {
    opacity: 1;
}

.mydemo-exit {
    opacity: 1;
}

.mydemo-exit-active {
    opacity: 0;
    transition: opacity 1s ease-in;
}

.mydemo-exit-done {
    opacity: 0;
}
```

---

## Ant Design  UI库

### 安装

`yarn add antd`

### 使用

```js
import { Input, Button, List } from 'antd';
import 'antd/dist/antd.css';

<Input placeholder="Basic usage"/>
<Button type="primary">提交</Button>
```

---

## Redux

`Redux = Reducer + Flux`

### 安装

`yarn add redux`

### 原则

1. store是唯一的
2. 只有store能改变自己的内容(store里的数据不是reducer更新的)
3. reducer必须是纯函数

### 核心API

1. createStore (创建store)
2. store.dispatch(action);  (派发action给store)
3. store.getState();  (获取store中所有的数据)
4. store.subscribe (监听store，store发生改变时，自动触发)

### 具体用法

#### store/list.js

```js
import store from './store/index';
import { changeInputAction } from './store/actionCreator';

class List extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState();
        store.subscribe(this.storeChange.bind(this)); // store发生改变时，自动触发
    }
    render() {
        return (
            <div>
                <input value={this.state.value} onChange={this.change.bind(this)} />
            </div>
        );
    }
    storeChange() {
        this.setState(store.getState());
    }
    change(e) {
        // const action = {
        //     type: 'change_input',
        //     value: e.target.value,
        // };
        const action = changeInputAction(e.target.value);
        store.dispatch(action);
    }
}

export default NewTodoList;
```

#### store/actionCreator.js

action的统一管理

```js
export const changeInputAction = value => ({
    type: 'change_input',
    value,
});
```

#### store/index.js

```js
import { createStore } from 'redux';
import reducer from './reducer';

const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__());

export default store;
```

#### store/reducer.js

```js
const defaultState = {
    value: ''
};

export default (state = defaultState, action) => {
    console.log(state, action);
    let newState = JSON.parse(JSON.stringify(state)); // 深拷贝,不能直接修改state里的数据
    if (action.type === 'change_input') {
        newState.value = action.value;
    }
    return newState;
};

```

---

## Redux-thunk中间件

`Redux-thunk`可以使`action`可以返回函数，从而在`store/actionCreator.js`中可以进行异步请求(axios)

### 安装

`npm install redux-thunk`
或
`yarn add redux-thunk`

### 使用

#### store/index.js

```js
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import reducer from './reducer';

// window.__REDUX_DEVTOOLS_EXTENSION__  可使用Redux DevTools插件
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

// 使用Redux-thunk中间件
const enhancer = composeEnhancers(applyMiddleware(thunk));

// 创建store
const store = createStore(reducer, enhancer);

export default store;
```
#### TodoList.js

```js
import { Component, Fragment } from 'react';
import { List } from 'antd';
import store from './store/index';
import { getTodoList } from './store/actionCreator';

class TodoList extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState();
        // store.subscribe(this.storeChange.bind(this)); // store发生改变时，自动触发
    }
    render() {
        <Fragment>
            <List bordered dataSource={this.state.list} renderItem={(item, index) => <List.Item> {item} </List.Item>} />
        </Fragment>
    }
    componentDidMount() {
        // 使用redux-thunk后，action可以返回函数，用于进行异步请求(axios)
        const action = getTodoList();
        store.dispatch(action);
    }
}
export default TodoList;
```

#### store/actionCreator.js

```js
import axios from 'axios';

export const initListAction = list => ({
    type: 'init_list',
    list,
});

// 使用redux-thunk后，action可以返回函数，用于进行异步请求(axios)
export const getTodoList = () => {
    return dispatch => {
        let list = [];
        axios.get('https://www.fastmock.site/mock/0764b93cba70add273910b232c51aad8/development/api/getHotList').then(function (res) {
            if (res.data.data.length > 0) {
                for (const val of res.data.data) {
                    list.push(val.name);
                }
            }
            const action = initListAction(list);
            dispatch(action); // 将action传给store
        });
    };
};
```

#### store/reducer.js

```js
const defaultState = {
    list: []
};

export default (state = defaultState, action) => {
    console.log(state, action);
    let newState = JSON.parse(JSON.stringify(state)); // 深拷贝,不能直接修改state里的数据
    if (action.type === 'init_list') {
        newState.list = action.list;
    }
    return newState;
};
```

---

## Redux-saga中间件

### 安装

`npm install redux-saga --save`
或
`yarn add redux-saga`


### 使用

#### 1. 创建、使用、运行Redux-saga中间件

`src/store/index.js`

```js
import { createStore, applyMiddleware, compose } from 'redux';
import thunk from 'redux-thunk';
import createSagaMiddleware from 'redux-saga';
import reducer from './reducer';
import sagas from './sagas'; // 创建sagas.js

// window.__REDUX_DEVTOOLS_EXTENSION__  可使用Redux DevTools插件
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) : compose;

// 创建Redux-saga中间件
const sagaMiddleware = createSagaMiddleware();

// 使用Redux-thunk中间件、Redux-saga中间件
const enhancer = composeEnhancers(applyMiddleware(thunk, sagaMiddleware));

// 创建store
const store = createStore(reducer, enhancer);

// 运行saga中间件
sagaMiddleware.run(sagas);

export default store;
```

#### 2. 创建sagas.js

`src/store/sagas.js`

```js
import { put, takeEvery } from 'redux-saga/effects';
import axios from 'axios';
import { initListAction } from './actionCreator';

// generator 函数
function* mySaga() {
    // 接收 store.dispatch() 传过来的action
    // 接收到get_init_list的action后，会调用getInitList方法
    // getInitList可以执行异步操作
    yield takeEvery('get_init_list', getInitList);
}

function* getInitList() {
    let list = [];
    const res = yield axios.get('https://www.fastmock.site/mock/0764b93cba70add273910b232c51aad8/development/api/getHotList'); // 等待axios请求结束后，直接将结果赋值给res

    if (res.data.data.length > 0) {
        for (const val of res.data.data) {
            list.push(val.name);
        }
    }
    const action = initListAction(list);
    yield put(action);  // 类似于store.dispatch(action);
}

export default mySaga;
```

#### 3. action的统一管理

`src/store/actionCreator.js`

```js
export const initListAction = list => ({
    type: 'init_list',
    list,
});
```

#### 4. Reducer

`src/store/reducer.js`

```js
const defaultState = {
    list: [],
};

export default (state = defaultState, action) => {
    let newState = JSON.parse(JSON.stringify(state)); // 深拷贝,不能直接修改state里的数据
    if (action.type === 'init_list') {
        newState.list = action.list;
    }
    return newState;
};

```

#### 5. List.js

```js
import { Component, Fragment } from 'react'; // 占位符
import store from './store/index';
import { List } from 'antd';
import 'antd/dist/antd.css';

class NewTodoList extends Component {
    constructor(props) {
        super(props);
        this.state = store.getState();
        store.subscribe(this.storeChange.bind(this)); // store发生改变时，自动触发
    }
    render() {
        return (
            <Fragment>
                <List bordered dataSource={this.state.list} renderItem={(item, index) => <List.Item> {item} </List.Item>} />
            </Fragment>
        );
    }
    componentDidMount() {
        const action = {
            type: 'get_init_list',
        };
        store.dispatch(action); // action不仅会被reducer接收，还会被redux-saga接收
    }
    storeChange() {
        this.setState(store.getState());
    }
}

export default NewTodoList;
```

---

## React-redux 第三方模块


### 安装

`npm install react-redux --save`
或
`yarn add react-redux`

### 使用

#### Provider组件

provider包裹在根组件外层，使所有的子组件都可以拿到state

1. Provider连接了store
2. Provider内部的所有组件都可以使用store

`src/index.js`

```js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import './index.css';
import store from './store';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('root')
);

reportWebVitals();
```

#### connect连接store

1. mapStateToProps: 把state数据映射到props中,这样在jsx中就可以用this.props.value来代替this.state.value获取值
2. mapDispatchToProps: 把store.disptch()挂载到props上,这样在jsx中就可以用this.props.changeInput来代替store.disptch()改变store里的数据

`src/List.js`

```js
import { Component, Fragment } from 'react';
import { connect } from 'react-redux';

class List extends Component {
    render() {
        return (
            <Fragment>
                <div>
                    <label htmlFor="input">输入内容</label>
                    <input id="input" type="text" value={this.props.value} onChange={this.props.changeInput} />
                </div>
            </Fragment>
        );
    }
}

// 把state数据映射到props中
// 这样在jsx中就可以用this.props.value来代替this.state.value获取值
const mapStateToProps = state => {
    return {
        value: state.value,
    };
};

// 把store.disptch()挂载到props上
// 这样在jsx中就可以用this.props.changeInput来代替store.disptch()改变store里的数据
const mapDispatchToProps = disptch => {
    return {
        changeInput(e){
            const action = {
                type: 'change_input',
                value: e.target.value,
            };
            disptch(action);
        }
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(List); // List连接store
```

#### Reducer

`src/store/reducer.js`

```js
const defaultState = {
    value: ''
};

export default (state = defaultState, action) => {
    let newState = JSON.parse(JSON.stringify(state)); // 深拷贝,不能直接修改state里的数据
    if (action.type === 'change_input') {
        newState.value = action.value;
    }
    return newState;
};

```

---