![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
mengyu小雨啊
这个作者很懒,什么都没留下…
展开
-
react--useCallback
作用:在组件多次重新渲染的时候缓存函数。原创 2024-05-30 17:16:26 · 93 阅读 · 0 评论 -
react--react.memo
React组件默认的渲染机制:只要父组件重新渲染子组件就会重新渲染。作用:允许组件在Props没有改变的情况下跳过渲染。原创 2024-05-30 16:42:38 · 114 阅读 · 0 评论 -
react-useMemo
作用:在组件每次重新渲染的时候缓存计算的结果。原创 2024-05-30 16:32:20 · 128 阅读 · 0 评论 -
react---usereducer
3. 事件发生时,通过dispatch函数分派一个action对象(通知reducer要返回哪个新状态并渲染UI)2. 在组件中调用useReducer,并传入reducer函数和状态的初始值。1. 定义一个reducer函数(根据不同的action返回不同的新状态)原创 2024-05-30 16:24:53 · 195 阅读 · 0 评论 -
ReactRouter
一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候,path 对应的组件会在页面中进行 渲染。语法说明:通过给组件的to属性指定要跳转到路由path,组件会被渲染为浏览器支持的a链接,如果需要传参直接通过 字符串拼接的方式拼接参数即可。在一级路由中又内嵌了其他路由,这种关系就叫做嵌套路由,嵌套至一级路由内的路由又称作二级路由。路由系统中的多个路由之间需要进行路由跳转,并且在跳转的同时有可能需要传递参数进行通信。2. 使用 `` 组件配置二级路由渲染位置。原创 2024-05-24 21:43:17 · 626 阅读 · 0 评论 -
Redux与React5
组件中有俩个按钮 `add to 10` 和 `add to 20` 可以直接把count值修改到对应的数字,目标count值是在组件中传递过 去的,需要在提交action的时候传递参数。react-redux负责把Redux和React 链接 起来,内置 Provider组件 通过 store 参数把创建好的store实例注入到应用中 ,链接正式建立。3. store中的入口文件 index.js 的作用是组合modules中所有的子模块,并导出store。3. 启动项目 npm run start。原创 2024-05-23 22:29:56 · 236 阅读 · 0 评论 -
react--Redux
Redux 是React最常用的集中状态管理工具,类似于Vue中的Pinia(Vuex),可以独立于框架运行 作用:通过集中管理的方式管理应用的状态。为了职责清晰,数据流向明确,Redux把整个数据修改的流程分成了三个核心概念,分别是:state、action和reducer。4. 使用store实例的 dispatch方法提交action对象 触发数据变化(告诉reducer你想怎么改数据)3. 使用store实例的 subscribe方法 订阅数据的变化(数据一旦变化,可以得到通知)原创 2024-05-23 19:41:18 · 228 阅读 · 0 评论 -
ReactHooks使用规则
2. 只能在组件的顶层调用,不能嵌套在 if、for、其他函数中。1. 只能在组件中或者其他自定义Hook函数中调用。原创 2024-05-23 14:36:11 · 134 阅读 · 0 评论 -
react--自定义Hook实现
概念:自定义Hook是以 use 打头的函数,通过自定义Hook函数可以用来实现逻辑的封装和复用。原创 2024-05-23 14:27:07 · 86 阅读 · 0 评论 -
react--useEffect 的使用
在useEffect中编写的由渲染本身引起的对接组件外部的操作,社区也经常把它叫做副作用操作,比如在useEffect中开 启了一个定时器,我们想在组件卸载时把这个定时器再清理掉,这个过程就是清理副作用。参数2是一个数组(可选参),在数组里放置依赖项,不同依赖项会影响第一个参数函数的执行,当是一个空数组的时候,副作用函数 只会在组件渲染完毕之后执行一次。说明:组件中没有发生任何的用户事件,组件渲染完毕之后就需要和服务器要数据,整个过程属于“只由渲染引起的操作”原创 2024-05-23 14:11:49 · 252 阅读 · 1 评论 -
react--组件通信
2. props是只读对象 子组件只能读取props中的数据,不能直接进行修改, 父组件的数据只能由父组件修改。1. props可传递任意的数据 数字、字符串、布尔值、数组、对象、函数、JSX。概念:组件通信就是组件之间的数据传递,根据组件嵌套关系的不同,有不同的通信方法。实现思路:借助“状态提升”机制,通过父组件进行兄弟组件之间的数据传递。原创 2024-05-23 13:19:38 · 266 阅读 · 1 评论 -
React中获取DOM
1. 使用useRef创建 ref 对象,并与 JSX 绑定 React中获取DOM。2. 在DOM可用时,通过 inputRef.current 拿到 DOM 对象。原创 2024-05-22 21:33:28 · 295 阅读 · 1 评论 -
react--受控表单绑定
2. 通过value属性绑定状态,通过onChange属性绑定状态同步的函数。概念:使用React组件的状态(useState)控制表单的状态。1. 准备一个React状态值。原创 2024-05-22 21:23:52 · 169 阅读 · 1 评论 -
react中组件的样式处理
【代码】react中组件的样式处理。原创 2024-05-22 15:40:14 · 117 阅读 · 0 评论 -
useState使用
useState 是一个 React Hook(函数),它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果。本质:和普通JS变量不同的是,状态变量一旦发生变化组件的视图UI也会跟着变化(数据驱动视图)原创 2024-05-22 15:18:19 · 198 阅读 · 0 评论 -
React中的组件
组件概念:一个组件就是用户界面的一部分,它可以有自己的逻辑和外观,组件之间可以互相嵌套,也可以复用多次。的函数,内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件当成标签书写 即可。组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用。原创 2024-05-22 15:07:50 · 112 阅读 · 0 评论 -
React中的事件绑定
语法:事件绑定的位置改造成箭头函数的写法,在执行clickHandler实际处理业务函数的时候传递实参。> 语法:在事件绑定的位置传递事件实参e和自定义参数,clickHandler中声明形参,注意顺序对应。语法:on + 事件名称 = { 事件处理程序 },整体上遵循驼峰命名法。语法:在事件回调函数中设置形参e。原创 2024-05-22 14:54:01 · 181 阅读 · 0 评论 -
JSX基础
概念:JSX是JavaScript和XMl(HTML)的缩写,表示在JS代码中编写HTML模版结构,它是React中构建UI的方式。> 在JSX中可以通过 `大括号语法{}` 识别JavaScript中的表达式,比如常见的变量、函数调用、方法调用等等。注意事项:加上一个独一无二的key,字符串或者number id,key的作用:react框架内部使用,提升更新性能。> JSX并不是标准的JS语法,它是 JS的语法扩展,浏览器本身不能识别,需要通过解析工具做解析之后才能在浏览器中。原创 2024-05-22 14:27:18 · 578 阅读 · 0 评论 -
react开发环境创建
"start": "react-scripts start"开发命令, "build": "react-scripts build"打包命令,create-react-app是一个快速创建React开发环境的工具,底层由Webpack构件,封装了配置细节,开箱即用。2. create-react-app - 核心包(固定写法),用于创建React项目。1. npx - Node.js工具命令,查找并执行后续的包命令。3. react-basic React项目的名称(可以自定义)原创 2024-05-21 20:45:17 · 185 阅读 · 0 评论