React 学习笔记(二)

最新推荐文章于 2025-08-23 02:53:08 发布

weixin_33922670

最新推荐文章于 2025-08-23 02:53:08 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ui json ViewUI

原文链接：https://juejin.im/post/5cd51e84e51d453a7e4c17f7

本文深入解析Redux工作原理及流程，涵盖状态管理、组件分类、中间件使用等，详解如何与React无缝集成，实现高效数据流管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇学习主要是围绕`Redux`展开的..

宇宙惯例..github地址 ⭐⭐⭐

Redux

Redux和React没关系 redux也可以用在其他框架里甚至是原生的js代码也可以用
Redux的工作流程
- 先上一图流(字丑莫介意..orz)
- 先做好各种初始化工作例如安装好Redux , 组件中引入 store 并定义好各个文件的配置 store.getState() 和当前state做绑定在此不过多赘述了
- ```
//例如
// store.index.js中 (store)
import { createStore } from 'redux'
import reducer from './reducer'
const store = createStore(
  reducer
)


//reducer.js中

//默认值
const defaultState = {
  value: ''
}
export default = ( state = defaultState, action )=>{
  return state
}
复制代码
```
1. 组件中定义一个action的对象
- 通常为了更便于维护和管理我们将要用到的action对象拆分成一个单独的 actionCreators.js文件里面是一个一个的返回一个对象的函数返回的对象有以下属性
  - type: 用于之后检测的标识值
  - 要传递更改的数据
```
//例如
//actionCreators.js中定义
export const getChangeAction = (value) => ({
  type : 'change_value',
  value
})
//组件中定义实际要用的action对象
import { getChangeAction } from './store/actionCreators'
const action = getChangeAction('testValue)
复制代码
```
1. 组件中将定义好的action对象通过 store.dispatch()方法将其派发出去
```
//例如
store.dispatch(action)
复制代码
```
1. reducer.js
  - 在 reducer.js 函数中利用之前定义好的action.type对传递来的对象进行拦截
  需要注意的是在进行数据的更改时 reducer里不能进行原始数据的更改只能将数据进行一次深拷贝将拷贝下来的数据更改然后再返回给store 让它对数据进行更新
```
//例如
export default = ( state = defaultState, action )=>{
  if( action.tyle === 'change_value' ){
    const newState = JSON.parse(JSON.stringify(state))
    newState.value = action.value
    return newState
  }
  return state
}
复制代码
```
1. 到目前为止数据以及更新完毕但是视图层还没有更新所以我们现在应该去更新视图层需要在组件里调用 store.subscribe()这个方法用来监听store里数据的变化同时接受一个函数作为参数, 如果store发生变化就调用传进去的那个函数所以我们可以这么写
```
//在constructor里

//不要忘记更改this指向
this.handleStoreChange = this.handleStoreChange.bind(this)
store.subscribe(this.handleStoreChange)

//handleStoreChange函数
handleStoreChange(){
  this.setState(store.getState())
}      
复制代码
```
大功告成

react-redux

react-redux也是用来做数据管理的只不过是利用了react本身的一些特性, 因为react是单向数据流所以我们索性把store集成到所有组件的顶层组件里, 即顶层的 props里
Provider 上做关联连接 store 内部组件都可以获取store上的内容了

//入口文件中 (index.js)
import { Provider } from 'react-redux'
const App = (
  <Provider store={store} >
    <TodoList/>
  </Provider>
)

ReactDOM.render(App, document.getElementById('root'));

复制代码

子组件通过 connect 获取
- connect的第二个括号就是组件本身第一个口号里需要两个参数这两个参数都是两个函数两个映射关系

//组件中
//state 是 store里的数据
// 这个映射的规则就是 把 store里的数据映射到当前的props上
const mapStoreStateToProps = (storeState) => {
  return {
    inputValue : storeState.inputValue
  }
}

// store.dispatch 挂到 当前的props上
const mapStoreDispatchToProps = (storeDispatch) => {
  return {
    changeInputValue(e){
      const action = {
        type : 'change_input_value',
        value: e.target.value
      }
      storeDispatch(action)
    }
  }
}

export default connect(mapStoreStateToProps , mapStoreDispatchToProps)(TodoList);
复制代码

Redux-thunk 中间件
- 这个中间件使得我们可以在action里返回一个函数使得一些异步操作比如获取ajax请求可以从组件中抽离出去

// 使用了 redux-thunk 后 action不仅仅只能是一个对象了 还可以是一个函数
export const getTodo =  () =>{
  // 返回的函数中的第一个参数就是dispatch方法
  return (dispatch) =>{
    $.get('something..').then(res=>{
      console.log(res)
    }).catch(()=>{
      console.log('error');
    })
  }
}
复制代码

由于在 `action` 和 `store`之间是通过 `dispatch`这个方法来进行沟通的 , 所以`redux-thunk`这个中间件实际上就是对`dispatch`的一个封装, 或者一个升级, 最原始的`dispatch`只能返回一个对象 然后再把这个对象返回给`store`, 使用了 `redux-thunk`之后, 我们可以传给`dispatch`一个函数 , 他就会先自动执行一遍这个函数, 执行完了之后 再将处理后或者执行完函数后的结构返回给store<br/>
一图流, `midWare`就是中间件处理的位置
复制代码

还有很多其他中间件就不一一枚举了..

组件分类

UI组件与容器组件 (傻瓜组件和聪明组件)
UI组件只负责样式
例如将demo用的 todolist拆分

const TodoListUI = (props) =>{
  return (
    <div style={{ margin: " 0 auto ", width: "400px", paddingTop: "150px" }}>
      <div style={{ margin: "10px" }}>
        <Input
          placeholder="todo"
          value={props.inputValue}
          style={{ width: "300px", marginRight: "10px" }}
          onChange={props.handleInputChange}
        />
        <Button onClick={props.handleBtnClick} type="primary">提交</Button>
      </div>
      <List
        style={{ margin: "10px", width: "300px" }}
        bordered
        dataSource={props.list}
        header='todo'
        renderItem={(item,index )=> <List.Item onClick={()=>{props.handleItemClick(index)}}>{item}</List.Item>}
      />
    </div>
  )
}
更多详情见 github.. todolist2.0里面的代码
复制代码