React.js
文章平均质量分 96
react框架及其生态
DantinZhang
学习只是一种习惯
展开
-
React(九):其他Hook、自定义Hook、Redux和Hook联动
必须以use开头噢自定义Hook本质上只是一种函数代码逻辑的抽取,严格意义上来说,它本身并不算React的特性。我感觉这东西就和高阶组件一个作用。例如有这样一个需求: 所有的组件在创建和销毁时都进行打印如果每个组件我们都单独编写是非常繁琐的, 并且有许多重复代码;我们可以将实现这样逻辑相同的代码抽离为一个自定义的Hook,在其他的组件中调用自定义Hook即可。原创 2023-03-12 15:37:23 · 675 阅读 · 0 评论 -
React(八):引出Hook、useState、useEffect的使用详解
之前我们一直用类组件写demo,类组件相对于函数组件有什么优势? - 类组件可以保存组件自己的状态,但是在函数组件中,修改数据页面不会重新渲染,而且就算重新渲染,重新执行函数又重新赋值,等于没改。原创 2023-03-10 19:05:37 · 888 阅读 · 0 评论 -
React(七):Router基本使用、嵌套路由、编程式导航、路由传参、懒加载
或HashRouter其中使用history模式;HashRouter使用hash。原创 2023-03-08 21:21:42 · 1452 阅读 · 0 评论 -
React(六):Redux的使用、react-redux简化代码、redux模块化、RTK的使用
可以像以前一样,写在挂载钩子中,写法一样,但是还是那个意思,组件里发请求不太好。最后我们再来看第一行是什么,其实这里的action的名字,只不过我们把名字单独写到另一个js文件引入进来,避免一些名字写错的问题。在src的index.js中引入Provider,包裹App组件并传入我们定义好的store,这样的话后代组件就可以访问store。函数,该函数返回一个高阶组件,高阶组件本身是一个函数,调用该函数可以给Son注入东西。当然啊,如果在框架中用的话,最好在销毁钩子中取消订阅,方法就是调用这个玩意儿。原创 2023-03-07 20:08:35 · 1828 阅读 · 0 评论 -
React(五):受控组件、高阶组件、Portals、Fragment、CSS的编写方式
类似vue中的v-model,就是双向数据绑定。比如下面这两个input框,受控组件的条件就是有value值。但是只有value值读取state中的值不行,这样input里的东西就不能改了,所以要有onChange事件去修改相应的值,实现输入框和state数据的同步。super();let {/* 1.受控组件 */ } < input type = "text" value = {/* 2.非受控组件 */ } < input type = "text" / > < h1 > {原创 2023-03-04 20:21:37 · 781 阅读 · 1 评论 -
React(四):事件总线、setState的细节、PureComponent、ref
原因是:这里回调的参数state是上一个合并状态的state,所以是可以在上一个的基础上做操作的!上面解决了这两个问题,但是真的是非常的麻烦,如果有多个数据,往下层也传了多个数据,那么我们要对每一个数据都写一个判断吗?所以我们一般不要直接去修改state中的数据,要修改内层数据的话,最好整个替换掉,给个新地址。2、第二个问题,如果子组件没有数据的改变,那么就不需要跟着父组件重新执行render函数了,我们同样可以用。1、刚才提到的,第一个参数是对象,第二个参数是回调,在第二个回调中,可以获取。原创 2023-03-02 15:27:27 · 1400 阅读 · 0 评论 -
React(三):脚手架、组件化、生命周期、父子组件通信、插槽、Context
我们在父组件中的子组件标签内部写几个div,那么子组件中就可以通过this.props.children读取到我们写的这些div,如果写多个,那么children是一个数组,如果写一个,那么children就是一个react元素(当然啊,我们可以通过propType限制children的类型)。比第一种更好的方式,就是我们在父组件中的子组件标签上直接添加属性,传入相应的react元素,子组件就可以通过props直接读取,直接用,非常奈斯。我们可以在这些回调函数中编写自己的逻辑代码,来完成自己的需求功能;原创 2023-02-28 22:36:44 · 1208 阅读 · 1 评论 -
React(二):jsx事件绑定、条件渲染、列表渲染、jsx的本质、购物车案例
1、默认绑定,独立执行:,一般绑定window,严格模式下undefined2、隐式绑定:被一个对象执行:3、显式绑定:call / apply / bind,4、new绑定:new Fun(),创建一个实例,this指向实例还是之前的一些知识点,看一下下面的代码:这种情况我们是把obj里面的方法赋值给了另一个变量,这样我们调用的话相当于进行了默认绑定,如果上面这段不好理解,那么看看下面的:2.jsx中绑定this的三种方式以下面这段代码为例:1、显式绑定,之前我们了解的都是直接把函数的地址给到原创 2023-02-27 15:00:10 · 1268 阅读 · 0 评论 -
React(一):初识React、类组件、jsx的基础语法
React是什么?用于构建用户界面的 JavaScript 库React的特点:1、声明式编程:声明式编程是目前整个大前端开发的模式:Vue、React、Flutter、SwiftUI;2、组件化开发3、多平台适配1、定义类组件,继承React.Component,并继承父类的属性。原创 2023-02-24 16:34:40 · 1092 阅读 · 0 评论