记录每日学习的知识&技术

类组件可以维护自身的状态变量，即组件的 state ，类组件还有不同的生命周期方法，可以让开发者能够在组件的不同阶段（挂载、更新、卸载），对组件做更多的控制。组件内部状态且与外部无关的组件，可以考虑用状态组件，这样状态树就不会过于复杂，易于理解和管理。● 组件内部不维护 state ，只根据外部组件传入的 props 进行渲染的组件，当 props 改变时，组件重新渲染。● 内部使用 state，维护自身状态的变化，有状态组件根据外部组件传入的 props 和自身的 state进行渲染。

这些是常用的 React Hooks，每个 Hook 都有特定的作用，能够方便地处理组件的状态管理、副作用操作、上下文等功能。它返回当前状态和一个 dispatch 函数，用于派发状态更新的动作。它接收一个值和一个格式化函数，用于显示在工具中的自定义标签。它接收一个回调函数和依赖数组，并在每次渲染后执行回调函数。它接收一个回调函数和依赖数组，并返回一个记忆化的版本，只在依赖数组变化时才会重新创建。它接收一个 ref 对象和一个工厂函数，在父组件中可以通过 ref 访问工厂函数返回的值。

需要在路由配置文件中定义 param，路由对应的组件可以通过。属性传递参数，state 参数传递：使用。属性传递参数，路由对应的组件可以通过。2.params 参数传递：使用。组件进行路由跳转时，也可以通过。组件进行路由跳转时，还可以通过。组件进行路由跳转时，还可以通过。1.query 参数传递：使用。组件进行路由跳转时，可以通过。3.state 参数传递：使用。

需要在路由配置文件中定义 param，路由对应的组件可以通过。属性传递参数，state 参数传递：使用。属性传递参数，路由对应的组件可以通过。组件进行路由跳转时，也可以通过。组件进行路由跳转时，还可以通过。组件进行路由跳转时，还可以通过。组件进行路由跳转时，可以通过。

useReducer：用于在函数组件中管理复杂的状态逻辑。它接收一个 reducer 函数和初始状态，并返回当前状态和 dispatch 函数，用于派发状态更新的操作。它返回一个数组，第一个元素是当前状态的值，第二个元素是更新状态的函数。它接收一个函数和一个依赖数组，并返回函数的计算结果。useRef：用于在函数组件中创建可变的引用。useRef：用于在函数组件中创建可变的引用。useCallback：用于在函数组件中创建记忆化的回调函数。它接收一个回调函数和一个依赖数组，并返回一个记忆化的回调函数。

React的合成事件系统能够提高性能，因为它使用事件委托，将事件监听器挂载在顶层容器上，而不是每个DOM元素上。：在渲染列表时，使用唯一的键来标识每个列表项，以帮助React识别添加、删除或重新排序的操作。有助于避免不必要的属性传递，提高了代码的可维护性。：React使用虚拟DOM来比较前后两个状态树，从而最小化对实际DOM的操作。这允许你避免不必要的重新渲染，只有在状态或属性发生实际变化时才重新渲染组件。：在生产环境中，确保使用React的生产模式版本，以去除开发模式下的额外检查和警告，提高性能。

我使用的是高德地图的开放平台实现的。

React引入了合成事件的概念，它是一种React自己实现的事件系统，用于封装原生浏览器事件。合成事件提供了一致性的接口，无论在不同浏览器中事件如何实际触发，React都可以提供相同的事件对象。：React将事件处理程序注册在组件的顶层，然后使用事件代理来处理实际的DOM事件。：事件处理程序是普通的JavaScript函数，它们接收一个合成事件对象作为参数，可以访问事件的信息，如类型、目标、位置等。：React事件系统也支持事件冒泡和捕获阶段，开发者可以选择在事件的不同阶段处理事件。

React的这个过程是高度优化的，通过使用虚拟DOM和差异计算，React可以最小化实际DOM的操作，从而提高性能。：React会将生成的DOM操作应用到实际的浏览器DOM中，使界面与虚拟DOM保持一致。：React会将新的虚拟DOM与之前的虚拟DOM进行比较，找出差异（所谓的差异补丁或diff算法），确定需要进行的实际DOM操作。：一旦虚拟DOM与实际DOM保持一致，渲染过程完成，界面更新完成。：React根据差异计算出需要更新的实际DOM操作，并将这些操作转化为真实的浏览器DOM元素。

在 React 中，当组件的 Props 或 State 发生变化时，React 会根据最新的数据重新生成一棵虚拟 DOM 树，并与之前的虚拟 DOM 树进行对比。在对比的过程中，React 会找到两棵树中不同的节点，并将它们对应的真实 DOM 节点进行修改、删除或添加，最终将更新后的 DOM 渲染到页面上。虚拟 DOM（Virtual DOM）是 React 中的一种机制，通过在内存中构建一棵轻量级的虚拟 DOM 树来代替操作浏览器 DOM，从而提高组件的渲染性能和用户体验。

是React应用程序中与Redux集成的库，它提供了React组件和Redux store之间的连接机制，允许你将Redux store中的状态传递给React组件，以及将Redux action派发给Redux store。是一个Redux官方推荐的工具集，它的主要目的是简化和加速Redux开发流程，提供了一组工具和约定，以减少样板代码和提高开发效率。是Redux的辅助工具集，用于简化和加速Redux开发，但它仍然是Redux的一部分。通常用于简化Redux的配置和开发过程，而。与Redux本身更相关。

【代码】使用react实现一个简易的小球动画。

2)replaceState(newState)：replaceState()方法也用于更新组件状态，但它不会自动合并新旧状态。相反，它会完全替换掉当前状 态，使用提供的新状态对象来更新组件。相反，推荐使用函数形式的 setState(),可以更好地处理并发更新的情况，并且可以确保基于最新状态计算的正确结果。1)setState(newState)：setState() 方法用于更新组件的状态。在 React 中，setState()和 replaceState()是用于更新组件状态的两个方法。

当在组件内部定义一个函数，并在该函数中引用了组件作用域中的变量时，闭包会创建一个对该变量的引用，而不是复制变量的值。例如，使用setState((prevState) => ...)而不是setState({...})来更新状态，确保获取到的是最新的状态值。react闭包陷阱产生的原因是由于在React组件中使用了异步操作（如定时器、事件监听等）时，闭包会保留对旧状态的引用，导致更新后的状态无法正确地被获取或使用。通过以上方法，可以避免React闭包陷阱产生的问题，确保正确地获取和使用最新的状态值。

组件化实现方式不同：React 使用 JSX 语法编写组件，将 HTML 和 JavaScript 在代码层面融合在一起，组件之间的通信通过 props 和回调函数实现。数据驱动方式不同：React 的数据驱动是单向的，即从父组件向子组件传递数据，子组件不能直接修改父组件的数据。Vue 的数据驱动则是双向的，即可以从父组件向子组件传递数据，也可以从子组件向父组件传递数据。这些是 React 和 Vue 在技术层面上的一些主要区别，但两者都是优秀的前端框架，都有自己的优点和适用场景。

需要注意的是，在使用具体的依赖项数组时，应确保其中包含所有在副作用函数中所使用的依赖项。如果某个依赖项被遗漏，可能会导致副作用函数中使用的数据不是最新的。作为依赖项，主要适用于希望在组件渲染之后执行一些只需执行一次的副作用操作，例如发送网络请求、订阅事件等。在特定的依赖项发生变化时进行调用，常用于处理需要根据依赖项更新的副作用操作。在组件初始化渲染完成后执行一次，并在每次指定的依赖项发生变化时再次执行。钩子函数中，第二个参数用于指定依赖项数组。不依赖于任何值，仅在初始化时运行一次，不会进行后续的更新。

创建 reducer：reducer 是纯函数，它接收旧的 state 和 action，返回新的 state。Reducer 的主要作用是根据 action 的类型来更新 state，同时保证 state 的不可变性。订阅 state 的变化：可以通过 store.subscribe() 方法监听 state 的变化，在 state 更新时执行相应的操作。更新 state：reducer 根据接收的 action 类型更新 store 中的 state，同时返回一个新的 state。