「HearLing」React学习之路-redux(1)，面试篇

最新推荐文章于 2024-04-02 00:00:49 发布

2401_84023262

最新推荐文章于 2024-04-02 00:00:49 发布

阅读量744

点赞数 13

分类专栏： 2024年程序员学习文章标签： react.js 学习面试

本文链接：https://blog.csdn.net/2401_84023262/article/details/137193757

版权

2024年程序员学习专栏收录该内容

240 篇文章 1 订阅

订阅专栏

class Counter extends Component {

render() {

const { value, onIncreaseClick } = this.props;

return (

{value}

Increase

);

}

export default Counter;

同理也是可以通过this.props.onIncreaseClick调用dispatch，这样就不需要在代码中运行dispatch了。

connect、provider应用实例

看了上面的介绍，应该能比较清楚的了解connect是干什么的了，然后也基本能明白怎么做了，但还是没有写哥实例更清楚直白的了：

简单的点击增加count的实例，应该还有许多需要优化的地方，这里就学明白connect和provider就好了。

复杂一点的todolist的实例这里用了hooks、connect、provider没有用react-redux里的hooks钩子（如果有看不懂的话可以学学hooks或者等我有时间再出一个class改写成hooks的文章，还是很简单的，只要你专心学）

五、Hooks下的redux

==============

如果项目开发是用的hooks，那很好，你又省了许多力气，比如计数器这个这种**「简单」**的状态管理例子，几行代码解决。

import { useState } from ‘react’;

function Example() {

const [count, setCount] = useState(0);

return (

You clicked {count} times

<button onClick={() => setCount(count + 1)}>

Click me

);

}

但是我们能完全不用redux状态管理了嘛？哈哈哈怎么可能呢

对于已经使用redux的：首先在redux没有给出对hooks较好支持之前，大多不会为了hooks来完全重构项目吧，顺便一讲重构可能造成的问题：
- 失去很多connect()提供的自动引用缓存，可能导致性能问题，除非用大量的useCallback()来包裹
如果代码依赖于mapStateToProps中的ownProps，那么你可能会使用redux hooks编写更多代码，而不能直接拿到这个属性。
不能像以前那样在mapDispatchToProps中，为action creator提供依赖注入
对于有可能是复杂应用的：许多公司的项目大部分都是用的redux管理状态，他的许多优点比如单一数据源、数据共享、事务状态、数据状态I/O和副作用隔离、状态回溯以及一系列辅助工具带来的强大调试能力等等，使得用redux来管理数据流成为更好的选择。
react-redux发布了新的版本，与之前的contextAPI分离，提供对hooks的支持，那这不就更香了

新的redux带来的改变

「不再需要使用」 mapStateToProps，mapDispatchToProps和connect来维护单独的container组件和UI组件，而是在组件中直接使用redux提供的hooks,读取redux中的state。
可以将任何现有的自定义**「hooks与redux集成」**，而不是将通过hooks创建的state，作为参数传递给其他hooks。

redux对hooks的支持

首先介绍几个核心：

「useSelector：」 用于从Redux存储的state中提取值并订阅该state。
「useDispatch：」 除了读取store中的state，还能dispatch actions更新store中的state。
「useStore：」 用于获取创建的store实例。

光看简介还不是很清楚，一个个来说：

useSelector

看它的介绍，就很像mapStateToProps，但是

不提供ownProps API，最好用useCallback或useMemo来获取
和useEffect一样，如果不提供第二个参数，每次组件更新就会重新计算

那可能会存在一些担忧，会不会新的没有之前用的mapStateToProps好用呢？那来看看他的一些好处吧：

当然是配合hooks写代码更**「简洁」**
性能上延续redux以前的性能优化逻辑，「比较props」，如果当前的props跟老的props相同，则组件将不会重新渲染。
批处理更新，使得多个useSelector()重新计算出state，组件只会重新渲染一次，「不用担心useSelector重复渲染问题」。

首先看看以前是怎么写的：

//before

// React component

class Counter extends Component {

render() {

const { value, onIncreaseClick } = this.props;

return (

{value}

Increase

);

}

export default Counter;

// Connected Component

// Map Redux state to component props

function mapStateToProps(state) {return {value: state.count}}

// Map Redux actions to component props

function mapDispatchToProps(dispatch) {return {onIncreaseClick: () => dispatch(increaseAction)}}

// Connected Component

const App = connect(mapStateToProps,mapDispatchToProps)(Counter)

export default App

然后让我们用新的useSelect改写之前写得计数器：

//after

const Counter = props=> {

const { count } = useSelector(

(state) => ({

count: state.count

})

);

return (

{count}

);

}

export default Counter;

useDispatch

之前是使用mapDispatchToProps：

//before

// Map Redux actions to component props

function mapDispatchToProps(dispatch) {

return {

onIncreaseClick: () => dispatch(increaseAction)

}

现在使用useDispatch，可以直接在组件中使用，以匿名函数形式：

//after

const dispatch = useDispatch();

return (

<button onClick={()=>dispatch(increaseAction)}>Increase

);

由于匿名函数的性质，每次重新渲染获得新的引用，如果作为props传递给子组件，那么子组件每次都要重新渲染。

优化的意见是在useCallback中创建这个匿名函数：

//after

import React, { useCallback } from “react”;

import { useDispatch, useSelector } from “react-redux”;

import increaseAction from “./store/action”;

const Counter = props=> {

const { count } = useSelector(

(state) => ({

count: state.count

})

);

const dispatch = useDispatch();

const onIncreaseClick = useCallback(

() => dispatch(increaseAction),[dispatch]

);

return (

{count}

Increase

);

}

export default Counter;

useStore

在任何需要访问store的应用中，都可以通过usestore来获取。如果出于某种原因，比如说单元测试时，想要获取不同的store，我们可以将store通过新的contextAPI传递进组件树中，就像下面这样：

import React from ‘react’;

import { useStore } from ‘react-redux’;

import OtherProvider from ‘./OtherProvider’;

const Component = props => {

const store = useStore();

return {props.children}

}

实战

–

接着上面已经改成hooks的todolist但是还是用的connect的实例，来重新用react-redux的useSelector和useDispatch实现。

基本思想前面介绍的差不多来，这里我就不败代码，为了更直观还是用sandbox虽然不是很快：

SandBox ------ useSelector、useDispatch实战TodoList

Hooks下的redux总结

为什么还是要用redux？简单来说：Redux 提供了应对大型应用的代码组织和调试能力，在程序出错时，能帮你快速定位问题。

对于一些场景的需求hooks没法解决：

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

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

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

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

不同点
1）react是jsx和模板；（jsx可以进行更多的js逻辑和操作）
2）状态管理（react）
3）对象属性（vue）
4）vue：view——medol之间双向绑定
5）vue：组件之间的通信（props，callback，emit）

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！**

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）
[外链图片转存中…(img-rQxCPhIc-1711851233141)]

react和vue的比较

相同
1）vitual dom
2）组件化
3）props，单一数据流

CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-KMognmWl-1711851233141)]

2401_84023262

关注

13
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
「HearLing」React学习之路-redux(1)，面试篇

render() {return ({value}Increase同理也是可以通过this.props.onIncreaseClick调用dispatch，这样就不需要在代码中运行dispatch了。connect、provider应用实例看了上面的介绍，应该能比较清楚的了解connect是干什么的了，然后也基本能明白怎么做了，但还是没有写哥实例更清楚直白的了：简单的点击增加count的实例，应该还有许多需要优化的地方，这里就学明白connect和provider就好了。
复制链接

扫一扫