React17 入门

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​​

​​查看 demo​​

ref

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​​

使用

js

import { CSSTransition } from 'react-transition-group';class TodoList extends Component { constructor(props) { super(props); this.state = { show: true, }; } render() { return (

); } 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';提交

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 (

); } 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,) => { 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));// 创建storeconst 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() { {item} } /> } 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('(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,) => { 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));// 创建storeconst 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('// 等待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,) => { 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 ( {item} } /> ); } 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连接了storeProvider内部的所有组件都可以使用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( , 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 (

); }}// 把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,) => { let newState = JSON.parse(JSON.stringify(state)); // 深拷贝,不能直接修改state里的数据 if (action.type === 'change_input') { newState.value = action.value; } return newState;};

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。