目录

• 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

{ this.box = box }}>console.log(this.box); // 获取dom

生命周期(针对于组件而言) Mounting 挂载顺序

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

Updation 更新顺序

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

Unmounting 卸载

1. 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 (hello
提交); } 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
原则

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

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

Redux-thunk中间件 【React17|React17 入门】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() { {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('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请求结束后，直接将结果赋值给resif (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 ( {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

1. Provider连接了store
2. 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(, 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

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

推荐阅读

• 

  su日照分析教程,su怎么做日照分析插件sunshine
• 

  大金空调出现代码反复出现是怎么回事,你遇到过这种情况吗？
• 

  蠕行系统应该在什么时候用
• 

  n95口罩能持续戴多久
• 

  嫂子在家炸鲫鱼怎么做 家庭炸鲫鱼做法
• 

  C语言|C语言 OpenCV实现柱面投影
• 

  油葵怎么脱粒手工
• 

  剧荒了！有人能推荐什么好看的电影电视剧吗？综艺也行？
• 

  noteexpress官网，noteexpress怎么申请试用
• 

  肠粉配方 你都学会了吗
• 

  《魔兽世界》幻化瓦里安国王的武器,这会是比“风剑”更拉风的神器外观吗？
• 

  2019年,你觉得哪些生意的前景比较好？
• 

  脸上有胎记有什么讲究吗 脸上有胎记有什么讲究吗女生
• 

  酒精能杀墙上的霉菌吗
• 

  杭州西湖的灵隐禅踪景点怎么样？
• 

  k50|120W快充+性能铁三角，极致性价比的Redmi K50，你期待么？
• 

  家装app竞品分析报告,APP竞品分析报告
• 

  关于介绍学习方法的讲座结束语
• 

  阿里云主从mysql 阿里云mysql优势
• 

  法兰绒是什么材质? 法兰绒是什么材质

• opencv|opencv C++模板匹配的简单实现
• Java|Java基础——数组
• ssh生成公钥秘钥
• 言情成长小说《后来》｜目录
• typeScript入门基础介绍
• Android|Android sqlite3数据库入门系列
• laravel框架泛解
• Android下的IO库-Okio源码解析(一)|Android下的IO库-Okio源码解析(一) 入门
• JavaScript|JavaScript之DOM增删改查(重点)
• 新一代Python包管理工具