- 博客(29)
- 收藏
- 关注
RSS订阅原创 react--react.memo
React组件默认的渲染机制：只要父组件重新渲染子组件就会重新渲染。作用：允许组件在Props没有改变的情况下跳过渲染。
2024-05-30 16:42:38
97
原创 react---usereducer
3. 事件发生时，通过dispatch函数分派一个action对象（通知reducer要返回哪个新状态并渲染UI）2. 在组件中调用useReducer，并传入reducer函数和状态的初始值。1. 定义一个reducer函数（根据不同的action返回不同的新状态）
2024-05-30 16:24:53
176
原创 ReactRouter
一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候，path 对应的组件会在页面中进行 渲染。语法说明：通过给组件的to属性指定要跳转到路由path，组件会被渲染为浏览器支持的a链接，如果需要传参直接通过 字符串拼接的方式拼接参数即可。在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由，嵌套至一级路由内的路由又称作二级路由。路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信。2. 使用 `` 组件配置二级路由渲染位置。
2024-05-24 21:43:17
360
原创 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
226
原创 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
217
原创 ReactHooks使用规则
2. 只能在组件的顶层调用，不能嵌套在 if、for、其他函数中。1. 只能在组件中或者其他自定义Hook函数中调用。
2024-05-23 14:36:11
111
原创 react--useEffect 的使用
在useEffect中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用操作，比如在useEffect中开 启了一个定时器，我们想在组件卸载时把这个定时器再清理掉，这个过程就是清理副作用。参数2是一个数组（可选参），在数组里放置依赖项，不同依赖项会影响第一个参数函数的执行，当是一个空数组的时候，副作用函数 只会在组件渲染完毕之后执行一次。说明：组件中没有发生任何的用户事件，组件渲染完毕之后就需要和服务器要数据，整个过程属于“只由渲染引起的操作”
2024-05-23 14:11:49
207
1
原创 react--组件通信
2. props是只读对象 子组件只能读取props中的数据，不能直接进行修改, 父组件的数据只能由父组件修改。1. props可传递任意的数据 数字、字符串、布尔值、数组、对象、函数、JSX。概念：组件通信就是组件之间的数据传递，根据组件嵌套关系的不同，有不同的通信方法。实现思路：借助“状态提升”机制，通过父组件进行兄弟组件之间的数据传递。
2024-05-23 13:19:38
243
1
原创 React中获取DOM
1. 使用useRef创建 ref 对象，并与 JSX 绑定 React中获取DOM。2. 在DOM可用时，通过 inputRef.current 拿到 DOM 对象。
2024-05-22 21:33:28
146
1
原创 react--受控表单绑定
2. 通过value属性绑定状态，通过onChange属性绑定状态同步的函数。概念：使用React组件的状态（useState）控制表单的状态。1. 准备一个React状态值。
2024-05-22 21:23:52
149
1
原创 useState使用
useState 是一个 React Hook（函数），它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果。本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）
2024-05-22 15:18:19
170
原创 React中的组件
组件概念：一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次。的函数，内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件当成标签书写 即可。组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用。
2024-05-22 15:07:50
101
原创 React中的事件绑定
语法：事件绑定的位置改造成箭头函数的写法，在执行clickHandler实际处理业务函数的时候传递实参。> 语法：在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意顺序对应。语法：on + 事件名称 = { 事件处理程序 }，整体上遵循驼峰命名法。语法：在事件回调函数中设置形参e。
2024-05-22 14:54:01
170
原创 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
298
原创 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
169
原创 pinia--计数器案例
3. 去掉了 modules 的概念，每一个 store 都是一个独立的模块。创建组件:son-com.vue and son-com.vue。2. 提供符合，组合式风格的API （和 Vue3 新语法统一）4. 配合 TypeScript 更加友好，提供可靠的类型推断。1. 提供更加简单的API （去掉了 mutation ）1. 使用 Vite 创建一个空的 Vue3 项目。Pinia基础使用 - 计数器案例。Pinia 是 Vue 的最新。安装 pinia 到项目中。router.js代码。
2024-05-14 18:03:07
177
2
原创 vue3--provide和inject
在调用provide函数时，第二个参数设置为。底层组件调用方法修改顶层组件中的数据。顶层组件可以向底层组件传递方法，顶层组件向任意的底层组件。二.跨层传递响应式数据。一.跨层传递普通数据。provide函数提供。inject函数获取。
2024-05-14 16:40:10
227
1
原创 vue3--模板引用的概念
想要打印出来，第一步创建一个ref对象，第二步跟这个组件做一个关联。打印出<TextCom>组件。dom对象或者组件实例对象。
2024-05-14 15:39:31
105
1
原创 vue3--reactive() and ref(）
/ reactive作用：接受一个。数据的传入并返回一个响应式对象。的数据，返回一个响应式对象。// ref()接受。
2024-05-13 19:18:35
190
原创 vue3--组合式API - setup选项
第三个特点：提供数据或者函数，想要在我们的模板中使用，必须在setup中return -->第一个特点：setup的执行时机比beforeCreate早。第二个特点：创建时机太早，setup中获取不到this。第四个特点：多次return复杂，简洁：语法糖。
2024-05-13 15:33:36
199
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人