react
react的学习
小沐°
想做好前端的卑微小程序猿
展开
-
React-Redux
Redux是React最常用的集中状态管理工具,类似于Vue中的Pinia(Vuex),可以独立于框架运行作用:通过集中管理的方式管理应用的状态例子:不和任何框架绑定,不使用任何构建工具,使用纯Redux实现计数器使用步骤:1.定义一个reducer函数(根据当前想要做的修改返回一个新的状态)2.使用createStore方法传入reducer函数生成一个store实例对象3.使用store实例的subscribe方法订阅数据的变化(数据一旦变化,可以得到通知)原创 2024-06-14 18:00:00 · 361 阅读 · 0 评论 -
React-配置json-server
出现这个笑脸标识就说明启动json-serve服务成功,点击下面的链接可以查看数据列表。在终端输入命令npm run serve,就可以启动配置的json-serve。原创 2024-06-13 17:58:29 · 373 阅读 · 0 评论 -
React-useEffect
自定义Hook函数概念:自定义Hook是以use打头的函数,通过自定义Hook函数可以用来实现逻辑的封装和复用问题:布尔切换的逻辑与当前组件耦合在一起,不方便复用解决思路:自定义hook封装自定义hook通用思路:1.声明一个以use打头的函数2.在函数体内封装可复用的逻辑(只要是可复用的逻辑)3在组件中用到的状态或者回调return出去(以对象或数组)4.在哪个组件中要用到这个逻辑,就执行这个函数,解构出来状态和回调进行使用。原创 2024-06-03 12:40:56 · 422 阅读 · 0 评论 -
React-组件通信
场景:当我们把内容嵌套在子组件标签中时,父组件会自动在名为children的prop属性中接收该内容。实现思路:借助“状态提升”机制,通过父组件进行兄弟组件之间的数据传递。1.A组件先通过子传父的方式把数据传给父组件App。2.App拿到数据后通过父传子的方式再传递给B组件。,不能直接进行修改,父组件的数据只能由父组件修改。核心思路:在子组件中调用父组件中的函数并传递参数。,根据组件嵌套关系的不同,有不同的通信方法。1.父组件传递数据-在子组件标签上。2.子组件接收数据-子组件通过。原创 2024-05-30 17:56:27 · 559 阅读 · 0 评论 -
React-生成随机数和日期格式化
【代码】React-生成随机数和日期格式化。原创 2024-05-30 17:45:31 · 423 阅读 · 0 评论 -
React-获取DOM
1.使用useRef创建ref对象,并与JSX绑定。在React组件中获取/操作DOM,需要使用。2.在DOM可用时,通过inputRef.DOM可用:渲染完毕之后dom生成之后。原创 2024-05-30 15:32:23 · 170 阅读 · 0 评论 -
React-表单受控绑定
2.通过value属性绑定状态,通过onChange属性绑定状态同步的函数。概念:使用React组件的状态(useState)控制表单的状态。1.准备一个React状态值。原创 2024-05-30 15:14:59 · 488 阅读 · 0 评论 -
React-基础样式控制
classnames是一个简单的JS库,可以非常方便的。也可以把样式都提取到一个变量里,再赋值到style里。React组件基础的样式控制有两种方式。通过条件动态控制class类名的显示。属性名是多个单词的需要使用驼峰写法。1、行内样式(不推荐)2、class类名控制。原创 2024-05-29 14:55:08 · 386 阅读 · 0 评论 -
React-useState
本质:和普通JS变量不同的是,状态变量一旦发生变化组件的视图UI也会跟着变化(useState是一个React Hook(函数),它允许我们向组件添加一个。,从而控制影响组件的渲染结果。原创 2024-05-29 11:24:41 · 455 阅读 · 0 评论 -
React-组件基础使用
概念:一个组件就是用户界面的一部分,它可以有自己的逻辑和外观,组件之间。组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用。注意:也可以用箭头函数来定义,只要函数名的首字母大写就行。,内部存放了组件的逻辑和视图UI,渲染组件只需要把组件。可以互相嵌套,也可以复用多次。在React中,一个组件就是。原创 2024-05-28 17:59:27 · 925 阅读 · 0 评论 -
React-事件绑定
语法:事件绑定的位置改造成箭头函数的写法,在执行clickHandler实际处理业务函数的时候传递实参注意:不能直接写函数调用,这里事件绑定需要一个函数引用语法:在事件绑定的位置传递事件实参e和自定义参数,clickHandler中声明形参,注意顺序对应。原创 2024-05-28 14:16:44 · 230 阅读 · 0 评论 -
React-JSX基础
概念:JSX是JavaScript和XML(HTML)的缩写,表示在JS代码中编写HTML模板结构,它是React中编写UI模板的方式优势:1.HTML的声明式模板写法 2.JS的可编程能力。原创 2024-05-24 17:59:40 · 330 阅读 · 0 评论 -
React-入门
React由Meta公司研发,是一个用于构建Web和原生交互界面的库既可以写基于浏览器的应用,还可以写苹果和安卓的原生应用。原创 2024-05-24 17:30:20 · 433 阅读 · 0 评论