React使用过程中零碎小结

最新推荐文章于 2025-12-21 13:28:14 发布

原创最新推荐文章于 2025-12-21 13:28:14 发布 · 153 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #javascript

本文详细探讨了React中setState的异步与同步调用场景，阐述了路由配置及参数传递方式，深入分析了Redux状态管理流程，包括action、reducer的使用及与React组件的连接方法。

//////////////////////////
// this.setState //
/////////////////////////
异步:
1. react 本身的事件
2. 在生命周期里 setState 都是异步的
同步:
1. 自己注册的事件
2. setTimetou setTimeInteval
3. axios或请求回调里

//////////////
// 路由 //
//////////////

文件拆出所有路由拆出一个文件
Switch组件，确保路由只匹配一个页面
路由传参 query 和动态路由
query 直接拼接使用location.search获取，获取可以直接qs.parse()解析

动态路由路由后设置动态变量使用 this.props.match.params.动态变量 获取

/////////////////////////////////
/// redux状态管理 ////
////////////////////////////////

流程 view->action->reduce->渲染 (只有一个store,单一数据源)
redux 与 react-redux
redux(状态管理) – react-redux(react版本状态管理)
使用流程:

{ createStore (创建store) , combineReducers (合并reducer) } from redux
{ Provider } from react-redux

cons defaultState = { } 	//state默认值
function getList( state = defaultState , action ){
// reducer 处理数据逻辑
	switch ( action.type ) {
		case '处理逻辑名':	//case值唯一，匹配时会在全局所有的reducer查找
			return { ...state( 用于备份state,防止冲突 ) , name: action.payload };
		default :
			break ;
	}
}

var myReducers = combineReducers ({ getList })

const action = {	//action 选择要操作的逻辑，与reducer匹配
	type: '要操作的逻辑名',
	payload: '转递的参数'	//多用于交互传参
}

var store = createStore ( myReducers )

<Provider store = { store }>
	包裹项目
</Provider>

组件部分使用redux

import { connect } from 'react-redux'
import { xxx } from '/action/xxx'
// React 17之前 
connect( 
   state => { value: state.reducer( .value ) },
   { xxx (引入的action) }
)( 组件 )
// React 17之后
@connect( state =>({
   	value: state.reducer( .value )
   }), {
   	xxx ( 引入的action)
   }
) 组件

redux-promise 插件
使action中，可以直接使用axios请求，并直接返回请求到的数据

const action = {
	type: '选择要操作的逻辑',
	payload: axios.get( url )
}
//相当于在action中，直接取到 `axios.get(url).then(res => {}) 中的res