qq_68442164的博客

作用：在组件多次重新渲染的时候缓存函数。

React组件默认的渲染机制：只要父组件重新渲染子组件就会重新渲染。作用：允许组件在Props没有改变的情况下跳过渲染。

作用：在组件每次重新渲染的时候缓存计算的结果。

3. 事件发生时，通过dispatch函数分派一个action对象（通知reducer要返回哪个新状态并渲染UI）2. 在组件中调用useReducer，并传入reducer函数和状态的初始值。1. 定义一个reducer函数（根据不同的action返回不同的新状态）

一个路径 path 对应一个组件 component 当我们在浏览器中访问一个 path 的时候，path 对应的组件会在页面中进行 渲染。语法说明：通过给组件的to属性指定要跳转到路由path，组件会被渲染为浏览器支持的a链接，如果需要传参直接通过 字符串拼接的方式拼接参数即可。在一级路由中又内嵌了其他路由，这种关系就叫做嵌套路由，嵌套至一级路由内的路由又称作二级路由。路由系统中的多个路由之间需要进行路由跳转，并且在跳转的同时有可能需要传递参数进行通信。2. 使用 `` 组件配置二级路由渲染位置。

组件中有俩个按钮 `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。

Redux 是React最常用的集中状态管理工具，类似于Vue中的Pinia（Vuex），可以独立于框架运行 作用：通过集中管理的方式管理应用的状态。为了职责清晰，数据流向明确，Redux把整个数据修改的流程分成了三个核心概念，分别是：state、action和reducer。4. 使用store实例的 dispatch方法提交action对象 触发数据变化（告诉reducer你想怎么改数据）3. 使用store实例的 subscribe方法 订阅数据的变化（数据一旦变化，可以得到通知）

2. 只能在组件的顶层调用，不能嵌套在 if、for、其他函数中。1. 只能在组件中或者其他自定义Hook函数中调用。

概念：自定义Hook是以 use 打头的函数，通过自定义Hook函数可以用来实现逻辑的封装和复用。

在useEffect中编写的由渲染本身引起的对接组件外部的操作，社区也经常把它叫做副作用操作，比如在useEffect中开 启了一个定时器，我们想在组件卸载时把这个定时器再清理掉，这个过程就是清理副作用。参数2是一个数组（可选参），在数组里放置依赖项，不同依赖项会影响第一个参数函数的执行，当是一个空数组的时候，副作用函数 只会在组件渲染完毕之后执行一次。说明：组件中没有发生任何的用户事件，组件渲染完毕之后就需要和服务器要数据，整个过程属于“只由渲染引起的操作”

2. props是只读对象 子组件只能读取props中的数据，不能直接进行修改, 父组件的数据只能由父组件修改。1. props可传递任意的数据 数字、字符串、布尔值、数组、对象、函数、JSX。概念：组件通信就是组件之间的数据传递，根据组件嵌套关系的不同，有不同的通信方法。实现思路：借助“状态提升”机制，通过父组件进行兄弟组件之间的数据传递。

1. 使用useRef创建 ref 对象，并与 JSX 绑定 React中获取DOM。2. 在DOM可用时，通过 inputRef.current 拿到 DOM 对象。

2. 通过value属性绑定状态，通过onChange属性绑定状态同步的函数。概念：使用React组件的状态（useState）控制表单的状态。1. 准备一个React状态值。

【代码】react中组件的样式处理。

useState 是一个 React Hook（函数），它允许我们向组件添加一个状态变量, 从而控制影响组件的渲染结果。本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（数据驱动视图）

组件概念：一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次。的函数，内部存放了组件的逻辑和视图UI, 渲染组件只需要把组件当成标签书写 即可。组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用。

语法：事件绑定的位置改造成箭头函数的写法，在执行clickHandler实际处理业务函数的时候传递实参。> 语法：在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意顺序对应。语法：on + 事件名称 = { 事件处理程序 }，整体上遵循驼峰命名法。语法：在事件回调函数中设置形参e。

概念：JSX是JavaScript和XMl(HTML)的缩写，表示在JS代码中编写HTML模版结构，它是React中构建UI的方式。> 在JSX中可以通过 `大括号语法{}` 识别JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等。注意事项：加上一个独一无二的key，字符串或者number id，key的作用：react框架内部使用，提升更新性能。> JSX并不是标准的JS语法，它是 JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中。

"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项目的名称（可以自定义）