月光晒了很凉快的博客

【代码】webpack配置react18中路径别名、antd按需加载、网络服务。

在 src/index.js 文件中定义当前项目所使用的路由模式import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' // 定义当前项目的路由模式 import {在 src/App.jsx 组件中定义路由规则import React from 'react' // 定义路由规则 import {

如果你有很多没那么着急的内容要渲染更新就可以使用此hook函数。它可以对于更新渲染进行降级，提高更重要的组件的提前渲染。

redux-saga 是 redux 一个中间件，它是基于ES6 的Generator功能实现，用于解决异步问题（让redux中可以直接进行异步操作）。组件会发送一个 action 对象给 redux-saga，redux-saga（主saga） 就会分析监听 saga 中有没有当前 action 对应的 type 类型操作，如果在监听 saga 中找到了，说明当前操作是一个异步操作，然后就会走下面的异步操作流程，最后 action 会被交给 redux，也就是交给 reducer 完成修改。

useRef 跟 createRef 类似，都可以用来生成对 DOM 对象的引用，useRef 默认只能在 html 标签中使用，不可以在函数组件中使用。useRef 和 createRef 的区别：createRef 它可以用在类组件和函数组件中，声明时不能给初始值useRef 它只能使用在函数组件中，useRef 它可以在声明时给初始值。

此方法是一个 React 顶层 Api 方法，给函数组件来减少重复渲染，类似于 PureComponent 和 shouldComponentUpdate 方法的集合体。React.memo顶层Api方法，它可以用来减少子组件的重复渲染次数，从而提升组件渲染性能。React.memo它是一个只能在函数组件中使用的顶层Api方法。当父组件发生改变时，默认情况下它的子孙组件也会重新渲染，当某些子组件不需要更新时，也会被强制更新，为了避免这种情况，我们可以使用 React.memo。

Context 对象是解决跨层级组件通信的方案。

useReducer 这个 Hooks 在使用上几乎跟 Redux 一模一样，唯一缺点的就是无法使用 redux 提供的中间件。使用 hook 函数后，一般情况下，一个组件组中的数据我们可以用 useReducer 来管理，而不是用 redux 来完成，redux 一般存储公用数据，而不是把所有的数据都存储在里面，redux 它是一个单一数据源，如果存储多个数据的话，性能会降低。

在 React 的世界中，有容器组件和 UI 组件之分，在 React Hooks 出现之前，UI 组件我们可以使用函数组件，无状态组件来展示 UI，而对于容器组件，函数组件就显得无能为力，我们依赖于类组件来获取数据，处理数据，并向下传递参数给 UI 组件进行渲染。React在v16.8的版本中推出了 React Hooks 新特性，Hook是一套工具函数的集合,它增强了函数组件的功能，hook不等于函数组件，所有的hook函数都是以use开头。

在项目中可能会给一些组件的显示或隐藏添加某种过渡动画，这样可以很好的增加用户的使用体验， react-transition-group 是 react 的第三方模块，借助这个模块可以实现动画切换效果。

假设当前 redux 的大小为 1G，现在要修改 redux 树中的某个节点（节点的大小很小），我们就需要深复制整棵 redux 树，只为了修改很少的数据，这样对于性能的损耗是非常大的。于是我们使用 Immutable 来对这一现象进行优化，Immutable 只会深复制发生改变的节点及其祖先节点，然后修改后返回新数据。Immutable.js 出自 Facebook，是非常流行的不可变数据结构的实现之一。它实现了完全的持久化数据结构，使用结构共享。

使用 redux 库中提供的方法，可以将多个拆分 reducer 函数合并成统一的 reducer 函数，提供给 createStore 来使用。

目录，极大的简化了我们对路径的书写。但是 react 中，要想实现这种方式书写文件路径，需要写配置文件来实现。但是在书写时，并不会触发编辑器的提示，没有提示写起来很痛苦，所以我们还需要再写一个配置文件，用作触发书写带有。温馨提示：在 react 项目中，修改配置文件后需要重启项目。上面的两种方案，任选一种即可完成配置，此时我们已经能够实现用。在 Vue 中，我们导入文件时，文件路径中可以使用。符的文件路径时，编辑器的自动提示功能。至此，我们就可以愉快地书写代码了。

React-Redux 是 Redux 的官方针对 React 开发的。

默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用编程式导航的写法，执行this.props.history.push(‘/uri’)跳转到对应路由的页面，然而不是所有组件都直接与路由相连的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，此时就可以使用this.props。在组件渲染显示时，不是关注与它是否显示，而是在显示的时候关注于它的路由相关信息，才用到它。这种渲染方式有两种，一种是类方式渲染，一种是函数方式渲染。

隐式传参（state），通过地址栏是观察不到的；通过路由对象中的state属性进行数据传递，在落地组件中通过this.props.location.state得到。以“/detail/:id”形式传递的数据，在落地组件中通过this.props.match.params得到。key=value&key=value传递。

指定路由规则和对应匹配成功后要渲染的组件Route：path属性：路由路径，在地址栏中访问的地址。

CSS-in-JS 是一种技术，而不是一个具体的库实现。简单来说 CSS-in-JS 就是将应用的CSS样式写在 JavaScript 文件里面，而不是独立为一些 css，scss 或 less 之类的文件，这样你就可以在 CSS 中使用一些属于JS的诸如模块声明，变量定义，函数调用和条件判断等语言特性来提供灵活的可扩展的样式定义。CSS-in-JS 在 React 社区的热度是最高的，这是因为 React 本身不会管用户怎么去为组件定义样式的问题，而 Vue 有属于框架自己的一套定义样式的方案。

高阶组件 (Higher-Order Components) 就是一个函数，传给它一个组件，它返回一个新的组件。高阶组件：就相当于手机壳，通过包装组件，增强组件功能。创建一个函数指定函数参数，参数应该以大写字母开头在此函数内部创建一个类组件或函数组件进行权限控制路由限制访问统计统一布局缺点：增加了组件层级，影响性能。

父传子：通过自定义属性向子组件传值，值可以是任何类型子传父：通过父组件把方法传给子组件，子组件调用传过去的方法完成传值。

来创建的react工程，如果有请求跨域，在开发时的解决方案首先需要新建配置文件。

生命周期函数指在某一时刻组件会自动调用并执行的函数。React每个类组件都包含生命周期方法，以便于在运行过程中特定的阶段执行这些方法。、注意：函数组件无生命周期，生命周期只有类组件才拥有。

将 state 与表单项中的 value 值绑定在一起，有 state 的值来控制表单元素的值，称为受控组件。绑定步骤：在state中添加一个状态，作为表单元素的value值给表单元素绑定 change 事件，将表单元素的值设置为 state 的值。

children 属性，表示组件标签的子节点，当组件标签有子节点时，props 就会有该属性，与普通的 props 一样，其值可以是任意类型。单标签和双标签中没有数据就没有此属性。

修改 state 中的 num 属性数据的同时，让视图更新，用到专门用来修改 state 中数据的方法 setState。

在原生 Dom 事件( html 中)，假如我们给 button 按钮绑定点击事件，是绑定在 button 上去的。而这种情况在 React 中，不会在 button 上绑定事件，React 会将 Dom 中的事件进行收集，然后将事件委托到容器中（id=root，即挂载点）。在 React16 及之前，React 将所有的事件都委托到 document 当中去，而在 React17 及之后，React 将所有的事件都委托到挂载点中去了。

组件允许你将 UI 拆分为独立可复用的代码片段，并对每个片段进行独立构思。从概念上类似于 JavaScript 类或函数。它接受任意的形参( props )，并返回用于描述页面展示内容的 React元素( jsx )。 定义好的组件一定要有返回值。react中定义组件的2种方式注意点：使用：注意点：使用：组件间传值，在React中是通过只读属性 props 来完成数据传递的。props：接受任意的形参，并返回用于描述页面展示内容的 React 元素。props中的数据是不能被修改的，只能读取。props

由于通过 React.createElement() 方法创建的 React 元素有一些问题，代码比较繁琐，结构不直观，无法一眼看出描述的结构，不优雅，开发时写代码很不友好。React使用 JSX 来替代常规的 JavaScript，JSX 可以理解为的 JavaScript 语法扩展（超集），它里面的标签申明要符合 XML 规范要求。jsx浏览器认识吗？答：浏览器只能识别 js，对于jsx不能识别。浏览如何来识别jsx呢？babel(库)