react 事件机制 React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件， 当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。 这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。 ...
转载
2021-09-27 12:01:00
244阅读
2评论
对 React 的理解、特性
React 是靠数据驱动视图改变的一种框架，它的核心驱动方法就是用其提供的 setState 方法设置 state 中的数据从而驱动存放在内存中的虚拟 DOM 树的更新
更新方法就是通过 React 的 Diff 算法比较旧虚拟 DOM 树和新虚拟 DOM 树之间的 Change ，然后批处理这些改变。
遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应
模拟dom，状态发生变化时，先在js对象上计算和比较，找出最小差异，然后将这些差异批量更新到真实dom。数据请求，事件监听，避免阻塞渲染，提升用户体验。初始渲染，更新成本。
React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。 React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。 在具有许多组件的应用程序中，在销毁时释放组件所
原创
2021-08-05 16:03:12
592阅读
React安装 React的网址是https://facebook.github.io/react/, 里面介绍了使用create-react-app来创建react应用，虽然很方便，但是一个简单的程序都有一大堆各种各样的东西，初看起来不知所以然，所以我打算先使用直接在html里面嵌入script标签这种基本方法。基于这个原因，安装也就是直接下载并解压缩。从https://github.com/f
转载
2024-01-05 22:58:15
36阅读
React面试题总结内容主要包括基础知识，React 组件，React Redux，React 路由。 基本知识 1. 区分Real DOM和Virtual DOM Real DOM Virtual DOM 更新缓慢。 更新更快。 可以直接更新 HTML。 无法直接更新 HTML。 如果元素更新，则 ...
转载
2021-07-21 16:12:00
224阅读
2评论
参考：https://www.kancloud.cn/freya001/interview/1228068 001.React 中 setState 什么时候是同步的，什么时候是异步的？
转载
2021-06-28 14:09:52
154阅读
React上注册的事件最终会绑定在document这个DOM上，而不是React组件对应的DOM（减少内存开销就是因为所有的事heticEventrender(){return (
原创
2024-07-02 13:50:11
63阅读
React 性能优化的手段
React 中进行性能优化的手段可以从多个维度进行分类，以下是一些关键类别及其对应的优化策略：
组件优化
使用PureComponent或React.memo：对于仅根据props和state改变才重新渲染的组件，使用React.PureComponent或者对其包装一层React.memo，它们都能通过浅比较props来避免不必要的重新渲染。
shouldComp
diff的原理
React中的diff算法是其核心优化策略之一，用于比较新旧两个虚拟DOM树之间的差异，并找出最小化的DOM操作集以更新真实DOM。以下是React中diff算法的大致步骤概述：
树结构比较:
React并不会简单地递归遍历整颗新旧虚拟DOM树进行全量比较，而是采用分层比较的思想，仅比较同层级的节点。
它首先会比较树的根节点，如果根节点不同，则直接替换整个根节点对应的真实DOM元素
对React Hooks的理解
hooks的出现，使函数组件的功能得到了扩充，拥有了类组件相似的功能，在我们日常使用中，使用hooks能够解决大多数问题，并且还拥有代码复用机制，因此优先考虑hooks
解决老的函数式组件在React Hook出现之前，函数式组件（也称为无状态组件）的主要特点与优缺点如下：
早期函数式组件优点：
简洁性：函数式组件代码结构简单，易于阅读和理解，因为它仅负责接收pro
高阶组件
React 中的高阶组件（Higher-Order Component，简称 HOC）是一种高级的React组件抽象概念，它本质上是一个函数，此函数接受一个React组件作为参数，并返回一个新的封装过的React组件。高阶组件主要用于代码复用、逻辑抽象和交叉关注点的处理，比如权限控制、数据预取、主题样式切换等场景。
什么是高阶组件：
在函数式编程的概念中，高阶函数是指接受函数作为输入或者
性能优化在哪个生命周期？原理？
React 中进行性能优化的关键生命周期方法是 shouldComponentUpdate(nextProps, nextState)，这是在类组件中可用的一个生命周期方法。另外，在函数组件中，可以通过 React.memo 或者 useMemo、useCallback Hooks 来实现相似的效果。
shouldComponentUpdate(nextProps,
1. React-Router的实现原理是什么
基于 hash 的路由：通过监听hashchange事件，感知 hash 的变化
改变 hash 可以直接通过 location.hash=xxx
基于 H5 history 路由：
改变 url 可以通过 history.pushState 和 resplaceState 等，会将URL压入堆栈，同时能够应用 history.go() 等 API
react-router 里的 Link 标签和 a 标签的区别
HTML <a> 标签：
原生HTML元素，点击后会触发浏览器的默认行为，即发送一个新的HTTP请求到指定的URL，页面会发生整页刷新。
通过 href 属性指定目标URL。
React Router <Link> 标签：
是
React Router提供的一个组件，专为SPA（Single Page Appl
useEffect 与 useLayoutEffect 的区别
useEffect 和 useLayoutEffect 都是 React 中的 Hook，用于处理副作用，例如订阅事件、执行异步操作、更新DOM属性等。它们的主要区别在于执行时机和浏览器渲染流水线的影响：
执行时机：
useEffect：在所有的 DOM 变更已经完成并同步到浏览器界面之后，浏览器的事件循环下一次迭代中异步执行。这意味
useState实现原理
以下是useState在React中的底层实现原理的大致步骤概述：
注册状态：
当React在渲染函数组件的过程中遇到useState(initialState)时，它会在组件实例的内部创建一个新的状态槽（slot），并将initialState作为初始值存入该槽位。由于函数组件没有实例的概念，React通过Fiber节点来模拟实例行为，所以实际上是给对应的Fiber节点
tsx转换成真实DOM过程
TypeScript 编译阶段：
.tsx 文件包含了 TypeScript 类型注解和 JSX 语法，首先通过 TypeScript 编译器（如tsc或者配合Babel的@babel/preset-typescript插件）进行编译。
TypeScript 编译器负责检查类型注解的正确性，并且把包含类型信息的 TypeScript+JSX 代码转换为普通的 JavaS
React refs 的理解
React 中的 ref 是一种在组件之间直接访问 DOM 节点或在函数组件中访问类组件实例的能力。React 的 ref 底层原理涉及以下几个关键点：
创建和分配 Refs：
React 提供了几种创建 ref 的方式，如 React.createRef()（适用于类组件）、useRef() Hook（适用于函数组件）以及 forwardRef()（用于在函数组件之
组件之间如何通信
父组件向子组件通信：父组件通过 props 向子组件传递需要的信息。
子组件向父组件通信：: props+回调的方式。
跨级组件的通信方式？
Context API：
React的Context API提供了一种在组件树中共享数据的方法，而无需手动通过每个级别的props传递。你可以创建一个Context对象，并使用<MyContext.Provider>在组件树中的
