m0_47999208的博客

React 面试题: 不一定最全但绝对值得收藏！！(11 ~ 20)（万字总结） - 掘金

正版盗版。

https://mp.weixin.qq.com/mp/appmsgalbum?__biz=Mzg3OTYzMDkzMg==&action=getalbum&album_id=2150429217522614274&scene=173&from_msgid=2247499054&from_itemidx=1&count=3&nolastread=1#wechat_redirect

它用于将 Redux 的 store 提供给整个 React 应用。一般在应用的根组件处使用，这样应用内的所有组件都可以访问到 store。这是一个 React Hook，用于从 Redux store 中选择并获取数据。在函数式组件里使用它可以获取 store 中的状态。中是非常常用的，能帮助你更好地将 React 组件和 Redux 状态管理结合起来。函数把 React 组件和 Redux store 连接起来。这也是一个 React Hook，用于获取 Redux store 的。

4.使用虚拟化:对于大型列表或表格等组件，可以使用虚拟化技术(如react-window 或 reactvirtualized)来仅渲染可见区域内的元素，从而提高性能。这对于纯函数组件和大型组件特别有用。避免不必要的渲染:在函数组件中，可以使用 useCallback和 useMemo来避免不必要的函数创建和计算,使用 useRef 保持函数应用的唯一性。8.使用 React.StrictMode:在开发环境中，可以使用 React.StrictMode 组件来检测潜在的问题和不安全的使用。

在 React 的渲染流程中，Reconciler（协调器）阶段和 Commit（提交）阶段是两个关键的步骤，下面为你详细介绍这两个阶段的具体工作内容。

npm run dev 运行， npm run build打包 打包后会生成.next文件夹，npx create-next-app@latest创建一个next项目。npm start会本地运行打包后的包。

useEffect中写async 多个await。

memo接受两个参数，一个是需要缓存的组件，第二个是函数（必须是函数，不能直接写ture(缓存)、false(不缓存)，即使函数的返回值是boolean）

【代码】antd中的锚点跳转。

Fiber 节点是 React 内部的数据结构，用于表示虚拟 DOM 树中的节点。它们包含了丰富的属性，帮助 React 进行高效的协调和更新。Fiber 节点在渲染过程中动态创建，并通过双缓冲机制来优化性能。尽管我们不能直接操作这些节点，但了解它们的工作原理有助于更好地理解 React 的内部机制。深度搜索。

可中断的工作单元：将渲染工作分解成小任务，可以被中断和恢复。优先级调度：根据任务的优先级来决定执行顺序。增量渲染：逐步更新 DOM，避免长时间阻塞主线程。并发模式：支持并发更新和 Suspense 特性。协作式多任务：采用协作式的多任务调度机制。双缓冲技术：维护两个虚拟 DOM 树以优化渲染过程。通过这些机制，React Fiber 提高了应用的响应性和性能，提供了更好的用户体验。深度搜索。

使用useEffect：通过useEffect钩子监听状态变化，并在状态更新后执行一些操作。在回调函数中访问新状态：在setXXX的回调函数中直接处理新的状态值。这两种方法都可以帮助你在状态更新后正确地访问到最新的状态值。选择哪种方法取决于你的具体需求和代码结构。对于大多数情况，使用useEffect是更常见和推荐的做法。

同一个窗口打开官网地址能获取到的人家的Json数据的。控制台可见：右击 Copy object就复制了。解决办法2：在示例代码中添加如下代码。2.然后实现下这个案例。

React 的闭包陷阱是指在使用 React Hooks 时，由于闭包特性导致在某些函数或异步操作中无法正确访问到更新后状态或 prop 的值，而仍旧使用了旧值。

Redux Toolkit（RTK） – 李立超 | lilichao.comRedux | Redux 中文文档

React 19 发布在即，抢先学习新特性

当你使用第三方UI库的组件时，可能想要直接访问这些组件内部的DOM元素或方法，而不是通过props进行传递。通过使用forwardRef，你可以将ref传递给封装的第三方组件，以便直接操作其内部的DOM或方法。：有时，父组件需要访问子组件的实例或其内部的DOM元素。通过使用forwardRef，你可以在子组件中封装并暴露ref，使得父组件能够直接引用子组件实例或DOM元素。通过使用forwardRef，你可以方便地访问子组件内部的DOM元素或实例，并实现更灵活和可复用的组件逻辑。可以通过将ref传递给。

React原理：通俗易懂的 Fiber - 掘金

在Fiber架构下，React不再是单一连续的操作流，而是将渲染任务拆分为多个细粒度的单元（Fiber节点），这些节点可以被逐个处理，也可以根据需要被挂起、恢复和重新排序，从而实现异步渲染和优先级调度。这样就可以确保动画不卡顿，用户体验更好。如果在Fiber中遇到一个可能耗时较长的任务，Fiber调度器会在遍历过程中检查剩余时间，并在时间不足的情况下主动放弃当前任务的执行，转而去处理更高优先级的任务或者暂时把控制权交还给浏览器，等待下一个合适的时机（如空闲回调或下一帧动画帧）再继续未完成的更新。

【代码】useReducer。

当子组件需要调用父组件的方法时，可以将这个方法作为props从父组件传递给子组件。然后，在子组件内部，通过调用这个props就可以实现与父组件的通信。实际应用中，请根据你的具体需求选择合适的方式进行组件间的通信。这种方法并不常用，因为它破坏了组件之间的封装性，通常只在特殊情况下使用，例如处理DOM操作或者获取组件实例。创建一个引用，并将其作为属性传递给子组件。这样，你就可以通过这个引用访问到子组件的方法。然后，在父组件中，你需要使用。是父组件的一个方法，它被传递给了子组件作为。然后，在子组件中，我们通过。

组件，我们想要创建一个更复杂的自定义按钮组件，该组件除了具有基础按钮的所有功能外，还具有一些额外的功能，如显示模态框等。在这种情况下，我们可以使用扩展运算符将所有传递给我们的props传递给基础按钮组件。）来传递props的作用是将一个对象的所有可枚举属性（包括自身的和继承的）复制到新创建的对象中。当我们在二次封装组件时使用它，可以方便地将所有传递给我们的props传递给基础组件。的组件，它接受任意数量和类型的props。将具有与基础按钮组件完全相同的API，但还可以添加更多的功能或样式。

是React中的两个优化性能的钩子（Hooks）。它们都可以用来缓存计算结果，避免在每次渲染时都重新执行耗时的操作。然而，它们的主要区别在于缓存的内容和使用场景。如果依赖数组中的值没有变化，则直接返回之前缓存的结果。当你有一个需要频繁创建的函数，并且该函数作为props传递给子组件时，你可以使用。它接收两个参数：一个回调函数和一个依赖数组。当依赖数组中的任何一个值发生变化时，同时使用这两个Hook可以提高React应用的性能，减少不必要的计算和组件更新。来确保只有当依赖项改变时才创建新的函数引用。

【代码】react的函数式编程分页的时候还有查询条件，当翻页或者有查询条件的时候去调用接口，查询条件是个对象，如何实现，具体的代码。

在React中，父组件向子组件传递数据是通过props实现的，而子组件向父组件传递数据则需要通过回调函数的方式。对于爷孙组件之间的通信，可以通过在中间组件上设置props和回调函数来传递数据。兄弟组件之间的通信则需要通过共享状态或者通过父组件来进行中转。

是 Redux 的底层 API，更适用于那些需要直接与 Redux store 交互的场景，比如在异步操作、Redux 中间件中，或者在类组件中。是 Redux 中的一个方法。它们的作用是触发 Redux 中的 action，从而更新状态。是为了更好地与 React 集成，提供了在函数组件中使用 dispatch 的便捷方式。是 React Redux 提供的一个 hook，而。在 React 中，

useEffect会执行吗？只有数组里传了count才会执行，没有的话不会执行（但页面中的state还是响应式的，只是不会执行useEffect里面的内容）。useMemo的侧重点在缓存昂贵的计算,这点很像computed用法，如果不指定依赖，就不会执行。useEffect里所执行的大多都是副作用方法，操作dom,监听事件，请求数据等。每次点击=》状态发生改变会执行Example()函数，

没想到hooks中也有state这一说法。1、无state变化不会执行父子函数。2、有state更改执行父子函数。

【代码】hooks实现的高阶组件demo。

最外层的函数在没有return之前是接收不到里层函数的值的。好多高阶组件都是这样的一种结构。它这里的传参是一层一层的，

【代码】高阶组件？？？？？我不理解。

看下面的代码，即使调换useLayoutEffect和useEffect的位置依旧是useLayoutEffect先输出。从下面代码可以看出useLayoutEffect有绝对的优先级。

3、组件名要大写：Father.tsx, export default Father, const Father:FC,........import {Father} from '@/components/setup.tsx' 错误。import Father from '@/components/setup.tsx' 正确。export default useStore默认导出的钩子，组件引入的时候不要用{}包裹。对于函数就写.ts，有dom元素就写.tsx。

setTimeout,setInterval等原生事件都不会进入调度流程（同步）18之后使用creatRoot创建应用，所有的事件都会进行批量处理（异步）同步造成性能的浪费，调用三次setState后只需要渲染最后一次就好。18 之前只要是进入调度流程就是异步,没有就是同步。如果使用render,还是和18之前的机制一样。官方的合成事件都会进入调度流程（异步）异步处理就是批量处理。

38-react之高阶组件_哔哩哔哩_bilibili

2. withRouter: 一个用于将路由信息注入到组件中的高阶组件，它将路由的match、location和history对象作为props传递给包装组件，使得包装组件可以在不是路由组件的情况下访问和修改路由信息。3. connect: 一个用于连接组件和Redux store的高阶组件，它通过将store中的state和dispatch函数作为props传递给包装组件，使得包装组件可以访问和修改store中的数据。2. withRouter：将路由参数注入组件，使组件可以直接获取到路由的相关信息。

项目结构很奇怪啊，没找到.html文件，只在src/app/layout.tsx中找到了个html标签，也没找到page.tsx和layout.tsx的依赖关系，而且在page.tsx中有个main标签。之前是用的creact-react-app来创建的：npx create-react-app my-app。但现在却使用了creact-next-app:npx create-next-app。这里的css使用了tailwind。npm run dev如下。我们把他所有的选项都选上。

今天在看antd-design，发现一个叫chalk的东西。