weixin_43867229的博客

你可以使用React.lazy和Suspense来实现动态导入，这样可以将代码分割成多个小的bundle，而不是一个大的bundle。这将启用Webpack的生产模式，进行更多的优化，如压缩代码和去除开发时的警告。7.使用Webpack的SplitChunksPlugin：这可以将公共的依赖模块提取到一个单独的chunk中，这样可以避免重复的代码。4.优化图片和其他静态资源：使用适当的loader，如url-loader和file-loader，可以优化图片和其他静态资源的加载。

3.然后将项目中的引用路由时候的BrowserRouter改为HashRouter,所有用到的地方都要改。2.在package.json文件中添加 “homepage”: “./” 如下。这样在你点击index.html时候路径没有问题不会报错,但是页面可能还是空白的。1.浏览器F12查看报错原因。

router6的时候反而不适用了于是用下文。

10.运行验证： 现在你可以访问 http://localhost:3000/home 查看效果了。

在类组件中，副作用（如数据获取、订阅事件等）通常需要在生命周期方法（如componentDidMount、componentDidUpdate和componentWillUnmount）中进行管理，这可能导致代码逻辑分散。：在类组件中，特别是当组件包含多个生命周期方法时，代码逻辑可能会分散在各个生命周期方法中，导致同一块功能的代码被拆分到了不同的地方。总之，React Hooks通过提供新的函数组件特性和解决类组件中的一些问题，使得React组件的开发更加简单、灵活和可维护。

React ref的理解：ref只能用于Class组件和部分原生DOM元素（如、等）。无状态函数组件不能使用ref。不过，对于函数式组件，你可以使用React.forwardRef来实现对ref的支持。：对于DOM元素，ref提供了一个current属性，你可以通过这个属性访问和修改DOM元素。对于组件实例，ref同样提供current属性，你可以通过这个属性访问组件实例的方法和属性。

React中的高阶函数是一个非常重要的概念，尤其在，高阶函数的使用变得更加广泛。，或者返回一个函数的函数。在React中，高阶函数通常用于创建可重用的组件逻辑，增强组件的功能，或者实现一些高级的功能，如渲染条件、属性代理等。。高阶组件是一个纯函数，它接受一个组件并返回一个新的组件。这个新的组件可以具有更多的功能或更强大的行为。高阶组件在React社区中非常受欢迎，因为它们提供了一种强大的方式来复用组件逻辑，而无需使用继承或者修改组件的源代码。：高阶函数可以用于创建可重用的组件逻辑。

React的生命周期（Lifecycle）是组件在其生命周期内经历的一系列阶段和方法。了解并正确使用这些生命周期方法可以帮助你更好地管理组件的状态和副作用，以及在不同阶段执行相应的逻辑。React的生命周期主要分为三个阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。以下是每个阶段对应的生命周期方法及其描述：这个阶段对应于组件首次被渲染到页面上的过程。以下是挂载阶段中的生命周期方法：在组件实例化时调用，用于初始化组件的状态和绑定事件处理函数。在组件即将被挂载到页面之

使用Webpack等构建工具将CSS文件转换为JavaScript模块，从而实现样式的局部作用域和模块化。缺点：需要在HTML文件中手动引入CSS文件，与React组件的耦合度较高。优点：实现了样式的局部作用域，避免了全局样式冲突，同时便于样式复用。通过在HTML文件中引入外部CSS文件来为React应用提供样式。缺点：样式复用性较差，且当样式复杂时，代码结构可能变得混乱。缺点：不便于样式复用，且当样式复杂时，代码可读性较差。优点：样式复用性好，便于管理和维护大型项目的样式。例如：在React组件中通过。

每种方式都有其独特的特点和适用场景。

通过在render方法中使用bind方法，将事件处理函数作为实例方法绑定到组件实例上。然而，这种方式的缺点是每次组件渲染时都会创建一个新的事件处理函数实例，可能会影响性能。因此，可以在render方法中使用箭头函数来绑定事件处理函数。这种方式不会创建新的事件处理函数实例，因此性能更好。箭头函数是React推荐的方式来绑定事件处理函数。：使用bind方法在每次组件渲染时都会创建新的事件处理函数实例，可能会导致性能问题。而使用箭头函数则不会创建新的实例，性能更好。：箭头函数的语法更简洁，可读性更强。

合成事件是React模拟DOM原生事件的一个事件对象，具有与原生事件相同的方法和属性。这样做的好处是，无论在不同的浏览器中事件如何实际触发，React都可以提供相同的事件对象，从而保证了跨浏览器的兼容性。：在React中，事件并不是直接绑定到真实的DOM元素上，而是绑定在组件的顶层（通常是document对象）。事件冒泡是指事件从触发元素开始，由内向外传播到整个DOM树的过程；：事件处理函数是普通的JavaScript函数，它们接收一个合成事件对象作为参数，可以访问事件的信息，如类型、目标、位置等。

受控组件的值是由React的状态（state）控制的，当状态改变时，组件的值也会随之更新。而非受控组件的值则不由React的状态控制，通常是由DOM元素自身控制，例如原生的HTML表单元素。：受控组件的行为通常与状态紧密相关，当状态改变时，组件的显示内容或行为也会随之变化。而非受控组件的行为则更多地依赖于DOM事件或其他外部因素，它们的行为不受React状态的控制。而非受控组件则通常用于不需要精确控制组件值的情况，例如文本区域、文件上传等。

类组件具有生命周期方法，如componentDidMount、shouldComponentUpdate等，用于在组件的不同生命周期阶段执行特定的操作。而函数式组件没有内置的生命周期方法，但它们可以通过使用React的Hooks（如useEffect）来模拟生命周期的行为。：类组件可以通过高阶组件（HOC）和渲染属性（render props）来实现组件的逻辑复用和功能的拓展。：类组件是基于类的语法，使用面向对象编程思想，而函数式组件则采用函数式编程思想。

super()：调用父类的默认构造函数，当父类不需要特定的初始化参数时使用。super(props)：在React组件中，将 props 从子类构造函数传递给父类构造函数，这允许父类在初始化时使用这些 props。如果你正在编写一个React组件，并且这个组件继承自另一个React组件，那么通常你会使用 super(props) 来确保父组件可以访问其 props。如果你没有继承任何特定的React组件，而是从React.Component或其他基础类继承，那么你可能只需要简单地调用 super()。

与props不同，state是组件私有的，并且可以被组件自己修改。state在组件的constructor方法中初始化，并在组件的生命周期内可以被修改。props（属性）是从父组件传递给子组件的值。如果父组件的props发生变化，子组件将会重新渲染。当父组件的props更新时，子组件的props也会更新。这种传递是单向的，即父组件可以向子组件发送数据，但子组件不能直接修改这些数据。也就是说，任何子组件都可以访问和使用父组件传递过来的props。当组件的状态发生变化时，它会触发组件的重新渲染。

此外，React在设计时也带有函数式编程的基因，因为React组件本身就是纯函数，这使得代码更加简洁、可预测和可测试。虚拟DOM是在内存中创建并操作的一个轻量级的DOM树，当数据发生变化时，React会通过比较虚拟DOM和实际DOM的差异，然后只更新实际DOM中变化的部分，从而减少不必要的DOM操作，提高性能。声明式编程和响应式框架：React是一个声明式编程和响应式框架，开发者只需要定义数据和DOM的对应关系，当数据发生变化时，DOM会自动更新。这种编程方式使得代码更加简洁易读，同时也提高了应用的性能。

React Hooks 是 React 16.8 版本引入的新特性，它允许你在不编写 class 的情况下使用 state 以及其他的 React 特性。以上就是 React 提供的一些内置 Hooks，你也可以通过组合这些内置 Hooks 来创建自定义 Hooks。：可以用来在 React DevTools 中显示自定义 hook 的标签。：这个 Hook 可以让你在函数组件中使用 reducer 函数。：这个 Hook 可以让你在函数组件中执行副作用操作。：返回一个记忆的版本的回调函数。

Store 保存了应用程序的整个 state 树。当一个新的 state 被 reducer 返回后，store 会更新，然后新的 state 会被传递给 UI。：当用户与应用程序交互时（例如点击按钮），会触发一个 Action。Action 是一个描述了发生了什么的普通 JavaScript 对象。：Reducer 是一个纯函数，它接收当前的 state 和一个 action，然后返回一个新的 state。Redux 是一个用于管理 JavaScript 应用程序状态的。