React
关注
分享
扫一扫
文章平均质量分 79
React框架系列文章
学全栈的灌汤包
这个作者很懒，什么都没留下…
展开
-
React中传入props.children后, 为什么会导致组件的重新渲染？
在 react 中, 我想要对组件的渲染进行优化, 遇到了一个非常意思的问题, 当我向一个组件中传入了 props.children 之后, 每次父组件重新渲染都会导致这个组件的重新渲染;它看起来的表现就像是被memo包裹的组件, props和自身状态未发生变化, 组件却重新渲染了;原创 2023-12-08 11:23:05 · 1810 阅读 · 0 评论 -
React框架创建项目详细流程-项目的基本配置-项目的代码规范
文件夹、文件名称统一小写、多个单词以连接符(-)连接, 组件采用大驼峰;JavaScript变量名称采用小驼峰标识，常量全部使用大写字母;CSS采用普通CSS和styled-component结合来编写(全局采用普通CSS或Less、局部采用styled-component);整个项目不再使用class组件，统一使用函数式组件，并且全面拥抱Hooks;所有的函数式组件，为了避免不必要的渲染，全部使用memo进行包裹;组件内部的状态，使用useState、业务数据全部放在redux中管理;原创 2022-11-02 00:00:00 · 12878 阅读 · 105 评论 -
React - Redux Hooks的使用细节详解
在之前的redux开发中，为了让组件和redux结合起来，我们使用了react-redux库中的connect:但是这种方式必须使用高阶函数结合返回的高阶组件;并且必须编写:mapStateToProps和 mapDispatchToProps映射的函数, 具体使用方式在前面文章有讲解;在Redux7.1开始，提供了Hook的方式，在函数组件中再也不需要编写connect以及对应的映射函数了的作用是将state映射到组件中:参数一: 要求传入一个回调函数, 会将state传递到该回调函数中;原创 2022-10-31 00:00:00 · 15610 阅读 · 106 评论 -
React Hooks - useContetx和useReducer的基本使用
更新时，该 Hook 会触发重新渲染，并使用最新的值传递给 MyContext provider 的 context value 值。允许我们通过Hook来直接获取某个Context的值, 相对于class组件中的使用方式会简单非常多;在某些场景下，如果state的处理逻辑比较复杂，我们可以通过useReducer来对其进行拆分;再在函数组件中通过useReducer函数将我们定义的reducer函数使用起来。或者这次修改的state需要依赖之前的state时，也可以使用;会导致代码阅读性非常差。原创 2022-10-24 13:09:19 · 16704 阅读 · 101 评论 -
React Hook - 自定义Hook的基本使用和案例练习
自定义Hook本质上只是一种函数代码逻辑的抽取，严格意义上来说，它本身并不算React的特性。例如有这样一个需求: 所有的组件在创建和销毁时都进行打印组件被创建: 打印组件被创建了;组件被销毁: 打印组件被销毁了;如果每个组件我们都单独编写是非常繁琐的, 并且有许多重复代码;我们可以将实现这样逻辑相同的代码抽离为一个自定义的Hookimport {useEffect } from 'react' // 自定义Hook function useLogLife() {原创 2022-10-30 00:00:00 · 13209 阅读 · 107 评论 -
React Hooks - useRef和useImperativeHandle的使用方式
通过useImperativeHandle的Hook，将传入的ref和useImperativeHandle第二个参数返回的对象绑定到了一起;所以在父组件中，使用 inputRef.current时，实际上使用的是参数二返回的对象;但是，事实上在上面的案例中，我们只是希望父组件可以操作的focus，其他并不希望它随意操作。那么我们就可以在子组件的内部, 在重新定义一个ref对象, 再将想要暴露的操作暴露出去即可。子组件拿到父组件中创建的ref，绑定到自己的某一个元素中;等等, 我们希望可以限制它的操作;原创 2022-10-28 00:00:00 · 12233 阅读 · 100 评论 -
React Hooks - 使用useCallback和useMemo进行性能优化
这是因为message发生改变, App组件会重新渲染, 那么就会重新定义一个新的increment函数, 将新的increment函数传递到Test组件, Test组件的props发生改变就会重新渲染。当向Test组件传递新的increment时, Test组件的props就会改变, Test依然会重新渲染, 这也是我们想要实现的效果。由于counter发生改变, 就会重新定义一个新的increment函数, 因此我们只要修改了counter, 就会传递一个新的increment函数到Test组件中;原创 2022-10-26 00:00:00 · 9212 阅读 · 105 评论 -
React Hook - useEffecfa函数的使用细节详解
Effect Hook 可以让你来完成一些类似于class中生命周期的功能;事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用(Side Effects);所以对于完成这些功能的Hook被称之为 Effect Hook;原创 2022-10-23 00:00:00 · 14398 阅读 · 102 评论 -
React Hook - useState函数的详细解析
useState来自react，需要从react中导入，是一个hook函数, 官方中也将它成为State Hook, 它与class组件里面的 this.state 提供的功能完全相同;在下一次重新渲染时，就已经不是创建了, useState 会返回给我们当前所保存的state(一般来说，在函数退出后变量就会”消失”，而 state 中的变量会被 React 保留。这也是 Hook 的名字总是以 use 开头的一个原因, 因为你总是在使用而不是创建。调用元素二: setCounter，设置一个新的值;原创 2022-10-21 00:00:00 · 13436 阅读 · 106 评论 -
React类组件和函数组件对比-Hooks的介绍及初体验
Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下, 使用state以及其他的React特性(比如生命周期)。我们先来思考一下class组件相对于函数式组件有什么优势?比较常见的是下面这些优势:class组件可以定义自己的state，用来保存组件自己内部的状态;PureComponent } from 'react' // 类组件 class HellWorld extends PureComponent {原创 2022-10-19 00:00:00 · 13773 阅读 · 107 评论 -
React中路由的参数传递 - 路由的配置文件
传递参数有二种方式(需要注意的是, 这两种方式在Router6.x中都是提供的hook函数的API, 类组件需要通过高阶组件的方式使用):方式一: 动态路由的概念指的是路由中的路径并不会固定:在跳转的页面中可以通过hook函数useParms获取到传入的id, 由于我们现在使用的是类组件, 无法使用hook函数, 因此需要通过高阶组件对当前组件增强(上一篇刚刚讲过高阶组件的封装, 这里直接使用, 给到大家代码)使用高阶组件增强当前Detail组件, 就可以通过useParams获取到传递的id原创 2022-10-17 00:00:00 · 14337 阅读 · 103 评论 -
React中的路由嵌套和手动实现路由跳转的方式
Link或者NavLink渲染出来是一个a元素, 如果我们想点击一个button或者其他元素实现页面跳转, 就需要通过JavaScript代码进行跳转了。这样我们引入自己封装的高阶组件, 通过高阶组件的增强, 就可以在类组件的props中获取到navigate。那么如果是一个函数式组件，我们可以直接调用它提供的hooks的写法，但是如果是一个类组件呢?我们知道Navigate组件是可以进行路由的跳转的，但是依然是组件的方式。点击不同的链接可以跳转到不同的地方，显示不同的内容;推荐列表和排行榜列表;原创 2022-10-16 00:00:00 · 15216 阅读 · 101 评论 -
React - Router的基本使用介绍
目前前端流行的三大框架, 都有自己的路由实现:Angular的ngRouterReact的ReactRouterVue的vue-routerReact Router在最近两年版本更新的较快，并且在最新的React Router6.x版本中发生了较大的变化。目前React Router6.x已经非常稳定，我们可以放心的使用;原创 2022-10-15 00:00:00 · 15164 阅读 · 140 评论 -
Redux工具包(二) - Redux Toolkit的异步操作(发送网络请求)
再在extraReducers中监听这个异步的action的状态, 当他处于fulfilled状态时, 获取到网络请求的数据, 并修改原来state中的数据。注意: 我们创建的一部action: fetchHomeMultidataAction返回的结果, 会被传到下面监听函数的actions参数中,这样我们获取到结果后, 通过dispatch修改store中的state, 无需再监听异步action的状态。参数二: 传入一个函数, 该函数可以执行异步操作, 甚至可以直接传入一个异步函数。原创 2022-10-14 00:00:00 · 15136 阅读 · 147 评论 -
Redux工具包(一) - Redux Toolkit的基本使用
Redux Toolkit 是官方推荐的编写 Redux 逻辑的方法。在前面我们学习Redux的时候应该已经发现，redux的编写逻辑过于的繁琐和麻烦。并且代码通常分拆在多个文件中(虽然也可以放到一个文件管理，但是代码量过多，不利于管理);Redux Toolkit包旨在成为编写Redux逻辑的标准方式，从而解决上面提到的问题;在很多地方为了称呼方便，也将之称为“RTK”;安装Redux ToolkitRedux Toolkit的核心API主要是如下几个。原创 2022-10-13 00:00:00 · 13891 阅读 · 170 评论 -
Redux中进行异步操作(网络请求)的方案
我们可以直接通过同步的操作来dispatch action，state就会被立即更新。但是真实开发中，redux中保存的很多数据可能来自服务器，我们需要进行异步的请求，再将数据保存到redux中。原创 2022-10-12 00:00:00 · 13181 阅读 · 177 评论 -
React中使用Redux (二) - 通过react-redux库连接React和Redux
store中的状态可能是非常多的, 而connect函数的参数的作用是, 要将store中的哪些数据或者方法映射过去, 我们就可以根据自己的需求, 决定映射过去哪些数据, 而不是直接将整个store映射过去(: 参数二也是接收一个参数fn2, 要求fn2也是返回一个对象, 对象中的属性同样会映射到props中去;但是实际上redux官方帮助我们提供了 react-redux 的库，这个库是帮助我们完成连接redux和react的辅助工具, 可以直接在项目中使用，并且实现的逻辑会更加的严谨和高效。原创 2022-10-11 00:00:00 · 10449 阅读 · 171 评论 -
React中使用Redux (一) - 在React中直接使用Redux
尽管这样说，redux依然是和React库结合的更好，因为他们是通过state函数来描述界面的状态，Redux可以发射状态的更新， 让他们作出相应;目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去。Profile组件:其中会展示当前的counter值，并且有一个-1和-5的按钮;Home组件:其中会展示当前的counter值，并且有一个+1和+5的按钮;在发生点击事件时，调用store的dispatch来派发对应的action;原创 2022-10-10 00:00:00 · 13715 阅读 · 175 评论 -
React编写CSS的方案-CSS In JS
事实上CSS-In-JS的模式就是一种将样式(CSS)也写入到JavaScript中的方式，并且可以方便的使用JavaScript的状态;但是在前面的学习中，我们就提到过，React的思想中认为逻辑本身和UI是无法分离的，所以才会有了JSX的语法。我们创建的是一个styled组件, 那么既然是一个组件, 我们就可以通过组件的props属性传递数据的。我们可以在一个单独的js文件中, 设置一系列统一的主题相关的变量, 例如主题颜色, 字体大小等等。所以，目前可以说CSS-In-JS是React编写CSS。原创 2022-10-09 00:00:00 · 13666 阅读 · 150 评论 -
React中编写CSS的常见方案
前面说过，整个前端已经是组件化的天下:而CSS的设计就不是为组件化而生的，所以在目前组件化的框架中都在寻找一种合适的编写CSS的解决方案。在组件化中选择合适的CSS解决方案应该符合以下条件:可以编写局部css: 组件内部的css具备自己的局部作用域，不会随意污染其他组件内的元素;可以编写动态的css: 可以获取当前组件的一些状态，根据状态的变化生成不同的css样式;支持所有的css特性: 伪类、动画、媒体查询等;编写起来简洁方便、最好符合一贯的css风格特点;等等…原创 2022-10-08 00:00:00 · 10119 阅读 · 152 评论 -
React中过渡动画的编写方式
在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验。当然，我们可以通过原生的CSS来实现这些过渡动画，但是React社区为我们提供了react-transition-group用来完成过渡动画。React曾为开发者提供过动画插件 react-addons-css-transition-group，后由社区维护，形成了现在的 react-transition- group。这个库可以帮助我们方便的实现组件的入场和离场动画，使用时需要进行额外的安装:# npm# yarn。原创 2022-10-07 00:00:00 · 9018 阅读 · 166 评论 -
React组件化的额外知识补充
Fragment 允许你将子列表分组，而不会渲染到页面中, 类似于Vue中的template和小程序当中的block;在之前的React API中，可以通过findDOMNode来获取DOM，不过已经不推荐使用了，可以自行学习演练一下。这是严格模式下故意进行的操作，让你来查看在这里写的一些逻辑代码被调用多次时，是否会产生一些副作用;这样传递给Modal组件的元素就会被单独渲染到modal节点上, 且该节点会显示在屏幕的正中央。它的作用是为其后代元素触发额外的检查和警告, 检查代码中潜在的风险;原创 2022-10-06 00:00:00 · 7320 阅读 · 159 评论 -
React的高阶组件详解
什么是高阶组件呢?在认识高阶组价之前, 我们先来回顾一下什么是高阶函数?相信很多同学都知道(听说过?)，也用过高阶函数高阶组件和高阶函数它们非常相似的接受一个或多个函数作为参数;返回一个新的函数;JavaScript中比较常见的filter、map、reduce都是高阶函数。那么什么是高阶组件呢?高阶组件的英文是 Higher-Order Components，简称为 HOC;官方的定义: 高阶组件是一个参数为组件，并且返回值为新组件的函数;首先， 高阶组件本身不是一个组件，而是一个函数;原创 2022-10-05 00:00:00 · 12441 阅读 · 161 评论 -
React的受控组件和非受控组件介绍
select标签的使用也非常简单，只是它不需要通过selected属性来控制哪一个被选中，它可以匹配state的value来选中。这个处理方式是DOM默认处理HTML表单的行为，在用户点击提交时会提交到某个服务器中，并且刷新页面;但是通常情况下会使用JavaScript函数来方便的处理表单提交，同时还可以访问用户填写的表单数据;渲染表单的 React 组件还控制着用户输入过程中表单发生的操作;一个受控组件中，表单数据是由 React 组件来管理的。在React中，并没有禁止这个行为，它依然是有效的;原创 2022-10-04 00:00:00 · 13402 阅读 · 142 评论 -
React获取DOM和获取组件实例的方式
当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性;来绑定函数组件中的某个元素, forwardRef中接收两个参数, 参数一: props, 参数二: ref，后面我们也会学习 hooks 中如何使用ref;该函数会在DOM被挂载时进行回调，这个函数回调时会传入一个元素对象，我们可以自己保存;方式提前创建出来一个对象, 将创建出来的对象绑定到要获取的元素上;使用时，直接拿到之前保存的元素对象即可;原创 2022-10-03 00:00:00 · 15742 阅读 · 145 评论 -
React性能优化SCU | PureComponent | memo
并且当我点了一次修改文本按钮时, state中的message已经变成了"你好啊", 当我再次点击修改文本按钮时, state中的message依然是"你好啊", 并没有发生变化, 但是App组件的render函数依然会重新执行, 并且它的子组件Home和About中的render函数也会重新执行。使用memo对函数组件进行包裹, memo调用会返回一个新的组件, 返回这个组件后, 函数组件也会和累组件的PureComponent是一样的效果。事实上，很多的组件没有必须要重新render;原创 2022-10-02 00:00:00 · 895 阅读 · 142 评论 -
React中的setState使用细节和原理解析
例如一个数据message有被展示到页面中, 并且传入到子组件中展示, 此时通过setState修改message, 如果是同步的修改完成后, message的值就被改变了;并且修改完成的后续代码有报错的情况, 在这个时候再进行调试的时候, 会出现页面中message的值被修改掉, 而传入到子组件的message并没有修改的情况, 导致于state和props中的数据不一致。而React中的做法也是如此, 在一个时间段中, 会获取多个更新, 再将多个更新放入一个任务队列中, 再对任务队列进行批处理;原创 2022-10-01 00:00:00 · 13918 阅读 · 141 评论 -
React组件通信-非父子组件间的通信
如果一个组件订阅了Context，那么这个组件会从离自身最近的那个匹配的 Provider 中读取到当前的context值；如果我们在顶层的App中定义这些信息，之后一层层传递下去，那么对于一些中间层不需要数据的组件来说，是一种冗余的操作。Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言；这里，React 组件也可以订阅到 context 变更。Context 提供了一种在组件之间共享此类值的方式，而不必显式地通过组件树的逐层传递 props；原创 2022-09-30 00:00:00 · 7977 阅读 · 132 评论 -
Redux的基本使用过程详解
例如上面代码中, 我们封装的动态创建action的函数, 这种动态生成action的函数在项目中可能会有很多个, 而且在其他多个文件中也可能会使用, 所以我们最好是有一个单独的文件夹存放这些动态获取action的函数。例如上面代码中, 我们修改名称多次, 只有传入的action的name属性值不相同, 那么我们可以封装一个函数, 动态的生成action, 这也是开发中一贯的做法。随着应用程序的复杂度增加，我们可以将reducer拆分成多个小的reducers，分别操作不同state tree的一部分;原创 2022-09-29 00:00:00 · 15659 阅读 · 102 评论 -
Redux核心理念的基本介绍
此篇文章是React中的Redux状态管理库的基本介绍, Redux的详细使用过程在下篇文章中进行讲解。原创 2022-09-28 00:00:00 · 8395 阅读 · 137 评论 -
React通过classnames库添加类
或者将要添加的类放在一个数组中, 在让数组中的元素使用空格连接。很明显，这是一个用于动态添加classnames的一个库。例如用三元运算符判断是否添加类。原创 2022-09-27 00:00:00 · 8844 阅读 · 132 评论 -
React中实现插槽效果的方案
例如我们实现一个navbar, 要求左边, 中间, 右边的内容是不固定的, 由使用者来决定到底放什么。我们之间通过具体的属性名，可以让我们在传入和获取时更加的精准；这个方案也是开发中使用的比较多的方案, 个人更推荐。再在子组件中获取到传递的数据进行展示。props属性传递React元素；子组件直接使用children即可。组件的children子元素；父组件中只插入了一个元素。而且对顺序有严格的要求。原创 2022-09-26 00:00:00 · 8643 阅读 · 130 评论 -
React组件的生命周期函数
注意这个不常用不是我说的, 实在React官网中, 官方列举的。原创 2022-09-25 00:00:00 · 11771 阅读 · 64 评论 -
React组件化-类组件和函数组件介绍
类组件需要继承自。原创 2022-09-24 00:00:00 · 8509 阅读 · 65 评论 -
React脚手架工具创建项目的详细介绍
只是在模块化开发中，我们需要手动的来导入React、ReactDOM，因为它们都是在我们安装的模块中;不会再是在HTML中引入几个css文件，引入几个编写的js文件或者第三方的js文件这么简单;既然相似，就没有必要每次都从零开始搭建，完全可以使用一些工具，帮助我们生产基本的工程化模板;比如项目需要依赖很多的第三方库，如何更好的管理它们(比如管理它们的依赖、版本升级等);不同的项目，在这个模板的基础之上进行项目开发或者进行一些配置的简单修改即可;每个项目作出完成的效果不同，但是它们的基本工程化结构是相似的;原创 2022-09-23 00:00:00 · 9782 阅读 · 72 评论 -
React基础-JSX的本质-虚拟DOM的创建过程
在这个理念中，UI以一种理想化或者说虚拟化的方式保存在内存中，并且它是一个相对简单的JavaScript对象。**而ReactElement最终形成的树结构就是虚拟DOM (Virtual DOM) **;另外，在我们编写原生的React情况下，我们就不需要babel相关的内容了(所有jsx中的属性都在config中以对象的属性和值的形式存储;存放在标签中的内容，以children数组的方式进行存储;当然真实开发中我们是不会编写原生的React的。如果是组件元素，那么就直接使用组件的名称;原创 2022-09-22 00:00:00 · 7994 阅读 · 70 评论 -
React基础-JSX语法列表渲染详解
比如截取数组中的一部分内容:slice函数, 例如上面代码中, 要求截取数组的前两条进行展示。但是React中的JSX正是因为和JavaScript无缝的衔接，让它可以更加的灵活;很多从Vue转型到React的小伙伴非常不习惯，认为Vue的方式更加的简洁明了;上面的操作先过滤, 再截取, 最后进行遍历, 其实可以通过链式调用一行代码完成。在React中，展示列表最多的方式就是使用数组的。比如好友消息、动态、联系人列表的数据;比如歌曲、歌手、排行榜列表的数据;比如商品、购物车、评论列表的数据;原创 2022-09-21 00:00:00 · 9069 阅读 · 75 评论 -
React基础-JSX语法条件渲染详解
逻辑与运算符&&, 适合如果条件成立，渲染某一个组件;如果条件不成立，什么内容也不渲染;主要是控制display属性是否为none, 在React中也可以实现v-show的效果。在React中，所有的条件判断都和普通的JavaScript代码一致;例如下面代码表示student有值的时候才会渲染, 没有值什么也不渲染。在vue中，我们会通过指令来控制:比如v-if、v-show;方式一: 条件判断语句判断, 适合逻辑较多的情况。方式二: 三元运算符判断, 适合逻辑比较简单。类似于Vue中v-if的效果。原创 2022-09-20 00:00:00 · 8225 阅读 · 82 评论 -
React基础-JSX事件绑定-事件传参
原因是btnClick函数并不是我们主动调用的，而且当button发生改变时，React内部调用了btnClick函数;而它内部调用时，并不知道要如何绑定正确的this;原创 2022-09-19 00:00:00 · 10140 阅读 · 77 评论 -
React基础-JSX动态绑定属性的方式
某些元素可能需要绑定class, 绑定class属性的方式是很多的, 这里暂时讲两种方式, 还有第三种方式是通过第三方库进行绑定, 在后续的文章中会进行讲解。注意: 在React中绑定class属性, 直接写class属性React虽然可以识别, 但是会报一个警告, 最好使用。比如元素都会有title属性。比如img元素会有src属性。比如a元素会有href属性。动态添加内联样式style。原创 2022-09-18 00:00:00 · 10437 阅读 · 49 评论