2024年最新初步探索react-redux拆分组件——connect()，面试官不讲武德

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上大数据知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

需要这份系统化资料的朋友，可以戳这里获取

react-redux

理解

1. 一个react插件库
2. 专门用来简化react应用中使用redux

react-redux模型图

1. 所有的UI组件都应该包裹一个容器组件，他们是父子关系。
2. 容器组件是真正和redux打交道的，里面可以随意的使用redux的api。
3. UI组件中不能使用任何redux的api。
4. 容器组件会传给UI组件：(1).redux中所保存的状态。(2).用于操作状态的方法。
5. 备注：容器给UI传递：状态、操作状态的方法，均通过props传递。

react-redux将所有组件分成两大类

1️⃣ UI组件

• 只负责 UI 的呈现，不带有任何业务逻辑
• 通过props接收数据(一般数据和函数)
• 不使用任何 Redux 的 API
• 一般保存在components文件夹下

2️⃣ 容器组件

• 负责管理数据和业务逻辑，不负责UI的呈现
• 使用 Redux 的 API
• 一般保存在containers文件夹下

连接容器组件与UI组件

还是根据之前的求和案例来进行分析：

由于UI组件中不能使用任何redux的api，所以要把原先Count组件里所有redux相关的api都删掉。

src=> components=> Count => index.jsx：

import React, { Component } from 'react'

export default class Count extends Component {

  // 加法
  increment = () => {
    // 获取用户输入
    const { value } = this.selectNumber
  }

  // 减法
  decrement = () => {
    // 获取用户输入
    const { value } = this.selectNumber
  }

  // 奇数再加
  incrementIfOdd = () => {
    // 获取用户输入
    const { value } = this.selectNumber
  }

  // 异步加
  incrementAsync = () => {
    // 获取用户输入
    const { value } = this.selectNumber
  }

  render() {
    return (
      <div>
        <h1>当前求和为：??</h1>
        <select ref={c => this.selectNumber = c}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>
      </div>
    )
  }
}

创建一个存放Count容器组件的文件夹Containers。

在文件夹Containers下的Count容器组件不需要我们自己写，需要借助react-redux这个插件库。

安装react-redux库：

npm install react-redux

引入Count的UI组件和redux里核心的API对象store：

// 引入Count的UI组件
import CountUI from '../../components/Count'
// 引入redux
import store from '../../redux/store';

还要引入connect用于连接Count的UI组件与redux：

import { connect } from 'react-redux'

将Count的容器组件与Count的UI组件建立联系：

//创建一个Count的容器组件，名为CountContainer，
//这样Count的容器组件可以与Count的UI组件建立起联系
const CountContainer = connect()(CountUI)

connect()(CountUI)意思是：connect()函数返回一个新函数并调用，传入的参数是CountUI

暴露Count的容器组件：

export default CountContainer

---

src=> containers=> Count => index.jsx：

// 引入Count的UI组件
import CountUI from '../../components/Count'
// 引入redux
import store from '../../redux/store';
// 引入connect用于连接UI组件与redux
import { connect } from 'react-redux'

//使用connect()()创建并暴露一个Count的容器组件
export default connect()(CountUI)

这里先将Count的容器组件与Count的UI组件建立联系。

由于Count的容器组件与Count的UI组件是父子关系，所以App.jsx里不应该渲染Count的UI组件子组件，应该渲染父组件。

App.jsx：

import React, { Component } from 'react'
import Count from './containers/Count'

export default class App extends Component {
  render() {
    return (
      <div>
        <Count />
      </div>
    )
  }
}

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！

3261)]

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化资料的朋友，可以戳这里获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！