
React.js
文章平均质量分 96
react框架及其生态
起什么名字好呢!
Keep Reading , Keep Writing , Keep Coding
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
React(九):其他Hook、自定义Hook、Redux和Hook联动
必须以use开头自定义Hook本质上只是一种函数代码逻辑的抽取,严格意义上来说,它本身并不算React的特性。我感觉这东西就和高阶组件一个作用。例如有这样一个需求: 所有的组件在创建和销毁时都进行打印如果每个组件我们都单独编写是非常繁琐的, 并且有许多重复代码;我们可以将实现这样逻辑相同的代码抽离为一个自定义的Hook,在其他的组件中调用自定义Hook即可。原创 2025-08-14 11:43:34 · 1036 阅读 · 0 评论 -
React(八):引出Hook、useState、useEffect的使用详解
默认情况下,useEffect的回调函数会在每次渲染都重新执行,但是某些代码我们只是希望执行一次即可(比如网络请求,绑定事件、订阅redux)。顾名思义,其实我们平时的网络请求、手动更新DOM、一些事件的监听、订阅redux数据变化等操作,都是除了更新DOM之外需要做的操作,也就是一些副作用。如果是一个旧的项目,你并不需要直接将所有的代码重构为Hooks,因为它完全向下兼容,你可以渐进式的来使用它;所以说我们可以协商这个返回的回调函数,每次更新数据前先执行回调解绑事件,再更新再绑定事件,也就是同样的事件。原创 2025-08-14 10:39:04 · 749 阅读 · 0 评论 -
React(七):Router基本使用、嵌套路由、编程式导航、路由传参、懒加载
或HashRouter其中使用history<App/>HashRouter使用hash<App/>原创 2025-08-13 16:50:22 · 880 阅读 · 0 评论 -
React(五):受控组件、高阶组件、Portals、Fragment、CSS的编写方式(classNames的使用)
类似vue中的v-model,就是双向数据绑定。比如下面这两个input框,受控组件的条件就是有value值。但是只有value值读取state中的值不行,这样input里的东西就不能改了,所以要有onChange事件去修改相应的值,实现输入框和state数据的同步。个人理解受控组件和非受控组件的区别在于,是否受父组件的控制,如果父组件能够控制改变该组件,那么这个组件就是受控组件。如果只是在该组件内部维护状态,那么就是非受控组件。super();原创 2025-08-13 15:37:45 · 1100 阅读 · 0 评论 -
React(四):事件总线、setState的细节、PureComponent、ref
原因是:这里回调的参数state是上一个合并状态的state,所以是可以在上一个的基础上做操作的!如果同步更新了state,但是还没有执行render函数,那么state和props不能保持同步,这样会在开发中产生很多的问题;上面解决了这两个问题,但是真的是非常的麻烦,如果有多个数据,往下层也传了多个数据,那么我们要对每一个数据都写一个判断吗?2、第二个问题,如果子组件没有数据的改变,那么就不需要跟着父组件重新执行render函数了,我们同样可以用。更改数据,那么参数state保存的是上一个修改状态的值!原创 2025-08-11 10:34:42 · 803 阅读 · 0 评论 -
React(三):脚手架、组件化、生命周期、父子组件通信、插槽、Context
首先安装node,建议使用nvm管理node版本。使用nvm管理node在git bash中输入:,然后输入,如果能正常显示版本号,那么安装就成功了。目录下右键 => git bash => 项目名 => 回车等几分钟就欧了。注意项目名不能包含大写字母。脚手架目录下 => ,然后就可以看到非常帅气的大花。没啥用的先删了,我们自己搭建src中的文件:好,那么接下来我们重新写一下src里面的文件:三、组件化1. 类组件类组件的定义有如下要求:使用class定义一个组件:render函数的返原创 2025-08-07 19:51:06 · 900 阅读 · 0 评论 -
React(二):jsx事件绑定、条件渲染、列表渲染、jsx的本质、购物车案例
3、目前最常用的,直接写箭头函数,点击时触发一个箭头函数的回调,箭头函数可以调用另外一个函数,这样的话就是一个隐式绑定(this.fun3(),那么fun3里的this当然指向的也是类的实例),解决了this指向的问题。删除和修改的逻辑是类似的,不过修改是修改对象中某个属性,由于浅拷贝拷贝的是地址,所以修改对象中的属性,那么books和newBooks都会变。这里的逻辑比较有意思,因为我们不能直接去修改state中的数据,我们要借助调用setState这个方法去修改,从而可以执行render函数更新页面。原创 2025-08-06 16:20:14 · 647 阅读 · 0 评论 -
React(一):初识React、类组件、jsx的基础语法
1、React是什么?用于构建用户界面的 JavaScript 库3、React的特点:(1)声明式编程:声明式编程是目前整个大前端开发的模式:Vue、React、Flutter、SwiftUI;(2)组件化开发(3)多平台适配1、定义类组件,继承React.Component,并继承父类的属性-- 准备好一个容器 -->//1.定义类组件super();</script>2、添加一个state属性,用来存储数据,名字必须叫state-- 准备好一个容器 -->//1.定义类组件。原创 2025-08-05 17:26:01 · 909 阅读 · 0 评论