React - Redux Hooks的使用细节详解
在之前的redux开发中，为了让组件和redux结合起来，我们使用了react-redux库中的connect:但是这种方式必须使用高阶函数结合返回的高阶组件;并且必须编写:mapStateToProps和 mapDispatchToProps映射的函数, 具体使用方式在前面文章有讲解;在Redux
React性能优化SCU | PureComponent | memo
并且当我点了一次修改文本按钮时, state中的message已经变成了"你好啊", 当我再次点击修改文本按钮时, state中的message依然是"你好啊", 并没有发生变化, 但是App组件的render函数依然会重新执行, 并且它的子组件Home和About中的render函数也会重新执行。
React的高阶组件详解
什么是高阶组件呢?在认识高阶组价之前, 我们先来回顾一下什么是高阶函数?相信很多同学都知道(听说过?)，也用过高阶函数高阶组件和高阶函数它们非常相似的接受一个或多个函数作为参数;返回一个新的函数;JavaScript中比较常见的filter、map、reduce都是高阶函数。那么什么是高阶组件呢?高
React中使用Redux (二) - 通过react-redux库连接React和Redux
store中的状态可能是非常多的, 而connect函数的参数的作用是, 要将store中的哪些数据或者方法映射过去, 我们就可以根据自己的需求, 决定映射过去哪些数据, 而不是直接将整个store映射过去(: 参数二也是接收一个参数fn2, 要求fn2也是返回一个对象, 对象中的属性同样会映射到p
React的受控组件和非受控组件介绍
select标签的使用也非常简单，只是它不需要通过selected属性来控制哪一个被选中，它可以匹配state的value来选中。这个处理方式是DOM默认处理HTML表单的行为，在用户点击提交时会提交到某个服务器中，并且刷新页面;但是通常情况下会使用JavaScript函数来方便的处理表单提交，同时
React中过渡动画的编写方式
在开发中，我们想要给一个组件的显示和消失添加某种过渡动画，可以很好的增加用户体验。当然，我们可以通过原生的CSS来实现这些过渡动画，但是React社区为我们提供了react-transition-group用来完成过渡动画。React曾为开发者提供过动画插件 react-addons-css-tra
React类组件和函数组件对比-Hooks的介绍及初体验
Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下, 使用state以及其他的React特性(比如生命周期)。我们先来思考一下class组件相对于函数式组件有什么优势?比较常见的是下面这些优势:class组件可以定义自己的state，用来保存组件自己内部的状态;P
React Hook - useState函数的详细解析
useState来自react，需要从react中导入，是一个hook函数, 官方中也将它成为State Hook, 它与class组件里面的 this.state 提供的功能完全相同;在下一次重新渲染时，就已经不是创建了, useState 会返回给我们当前所保存的state(一般来说，在函数退出
React组件化的额外知识补充
Fragment 允许你将子列表分组，而不会渲染到页面中, 类似于Vue中的template和小程序当中的block;在之前的React API中，可以通过findDOMNode来获取DOM，不过已经不推荐使用了，可以自行学习演练一下。这是严格模式下故意进行的操作，让你来查看在这里写的一些逻辑代码被
React编写CSS的方案-CSS In JS
事实上CSS-In-JS的模式就是一种将样式(CSS)也写入到JavaScript中的方式，并且可以方便的使用JavaScript的状态;但是在前面的学习中，我们就提到过，React的思想中认为逻辑本身和UI是无法分离的，所以才会有了JSX的语法。我们创建的是一个styled组件, 那么既然是一个组
React Hook - useEffecfa函数的使用细节详解
Effect Hook 可以让你来完成一些类似于class中生命周期的功能;事实上，类似于网络请求、手动更新DOM、一些事件的监听，都是React更新DOM的一些副作用(Side Effects);所以对于完成这些功能的Hook被称之为 Effect Hook;
React中路由的参数传递 - 路由的配置文件
传递参数有二种方式(需要注意的是, 这两种方式在Router6.x中都是提供的hook函数的API, 类组件需要通过高阶组件的方式使用):方式一: 动态路由的概念指的是路由中的路径并不会固定:在跳转的页面中可以通过hook函数useParms获取到传入的id, 由于我们现在使用的是类组件, 无法使用
React中的路由嵌套和手动实现路由跳转的方式
Link或者NavLink渲染出来是一个a元素, 如果我们想点击一个button或者其他元素实现页面跳转, 就需要通过JavaScript代码进行跳转了。这样我们引入自己封装的高阶组件, 通过高阶组件的增强, 就可以在类组件的props中获取到navigate。那么如果是一个函数式组件，我们可以直接
React - Router的基本使用介绍
目前前端流行的三大框架, 都有自己的路由实现:Angular的ngRouterReact的ReactRouterVue的vue-routerReact Router在最近两年版本更新的较快，并且在最新的React Router6.x版本中发生了较大的变化。目前React Router6.x已经非常稳
React获取DOM和获取组件实例的方式
当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性;来绑定函数组件中的某个元素, forwardRef中接收两个参数, 参数一: props, 参数二: ref，后面我们也会学习 hooks
React中使用Redux (一) - 在React中直接使用Redux
尽管这样说，redux依然是和React库结合的更好，因为他们是通过state函数来描述界面的状态，Redux可以发射状态的更新， 让他们作出相应;目前redux在react中使用是最多的，所以我们需要将之前编写的redux代码，融入到react当中去。Profile组件:其中会展示当前的count
在 React 项目中全量使用 Hooks
此篇文章整理了在 React 项目开发中常用的一些 Hooks使用Hooks能为开发提升不少效率，但并不代表就要抛弃，依旧还有很多场景我们还得用到它，比如需要封装一个公共的可继承的组件，当然通过自定义 hooks 也能将一些共用的逻辑进行封装，以便再多个组件内共用。下期更新在React 中自定义 H
前端实战｜React18极客园——项目打包与优化
欢迎来到我的博客【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏React/小程序。
相比Vue和React，Svelte可能更适合你
Svelte 基于用于（本质上，Svelte.js 本身就是一个编译器），允许仅加载在页面上显示应用程序所需的内容——尽可能小的、“可消化的” JavaScript 代码。这意味着没有虚拟 DOM，没有框架之上的框架，也没有运行时的框架。这是 Svelte 和 Vue 之间的主要区别，也是 Svel
React 路由v6 - 超全详解
React router v6 路由Ⅰ、路由 v6 (两种形式)Ⅱ、 动态路由Ⅲ、路由重定向Ⅳ、路由跳转 (两种形式)Ⅴ、路由懒加载
