React17 入门

查看 demo

ref

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

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

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

Mounting 挂载顺序

constructor(props)：初始化 state 和 props 数据
~~componentWillMount() 在组件即将被挂载到页面时执行(16.3已废弃)~~
新增 static getDerivedStateFromProps(props, state)
render()：渲染组件
componentDidMount()：在组件被挂载到页面后执行，只在挂载时执行一次

Updation 更新顺序

static getDerivedStateFromProps(props, state)
shouldComponentUpdate()：在组件被更新之前执行 (return true 更新 , return false 不更新)
render()：渲染页面
static getSnapshotBeforeUpdate(prevProps, prevState)
componentDidUpdate()：state或props更新后调用

Unmounting 卸载

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

注意

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

CSSTransition 动画库

安装

yarn add react-transition-group

使用

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

.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

使用

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

原则

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

核心API

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

具体用法

store/list.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的统一管理

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

store/index.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

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

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

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

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

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

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

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

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

4. Reducer

src/store/reducer.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

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

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

src/index.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

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

src/List.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

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;
};

posted @ 2021-11-08 11:06 猫老板的豆阅读(372) 评论(2) 编辑收藏举报

刷新页面返回顶部

猫老板的豆

旁观自己 善待朝夕

React17 入门

ref

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

Mounting 挂载顺序

Updation 更新顺序

Unmounting 卸载

注意

CSSTransition 动画库

安装

使用

Ant Design UI库

安装

使用

Redux

安装

原则

核心API

具体用法

store/list.js

store/actionCreator.js

store/index.js

store/reducer.js

Redux-thunk中间件

安装

使用

store/index.js

TodoList.js

store/actionCreator.js

store/reducer.js

Redux-saga中间件

安装

使用

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

2. 创建sagas.js

3. action的统一管理

4. Reducer

5. List.js

React-redux 第三方模块

安装

使用

Provider组件

connect连接store

Reducer

公告

旁观自己善待朝夕