对 React 的理解、特性
React 是靠数据驱动视图改变的一种框架，它的核心驱动方法就是用其提供的 setState 方法设置 state 中的数据从而驱动存放在内存中的虚拟 DOM 树的更新
更新方法就是通过 React 的 Diff 算法比较旧虚拟 DOM 树和新虚拟 DOM 树之间的 Change ，然后批处理这些改变。
遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应
react 事件机制 React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件， 当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。 这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。 ...
转载
2021-09-27 12:01:00
244阅读
2评论
模拟dom，状态发生变化时，先在js对象上计算和比较，找出最小差异，然后将这些差异批量更新到真实dom。数据请求，事件监听，避免阻塞渲染，提升用户体验。初始渲染，更新成本。
React 作为前端使用最多的框架，必然是面试的重点。我们接下来主要从 React 的使用方式、源码层面和周边生态（如 redux, react-router 等）等几个方便来进行总结。1. 使用方式上这里主要考察的是，在开发使用过程中，对 React 框架的了解，如 hook 的不同调用方式得到的结果、函数组件中的 useState 和类组件的 state 的区别等等。props 的变动，是否会
原创
精选
2023-03-15 10:38:40
372阅读
一、当你调用setState的时候，发生了什么事？ 将传递给setState的对象合并到组件的当前状态，这将启动一个和解的过程，构建一个新的react元素树，与上一个元素树进行对比（ diff ），从而进行最小化的重渲染。二、在 React 当中 Element 和 Component 有何区别？ React Element 是描述屏幕上所见内容的数据结构，是对于 ...
原创
2022-02-09 13:40:57
115阅读
一、当你调用setState的时候，发生了什么事？ 将传递给setState的对象合并到组件的当前状态，这将启动一个和解的过程，构建一个新的react元素树，与上一个元素树进行对比（ diff ），从而进行最小化的重渲染。
二、在 React 当中 Element 和 Component 有何区别？ React Element 是描述屏幕上所见内容的数据结构，是对于 UI
原创
2021-08-02 14:39:21
240阅读
作者丨_小迷糊前言随着移动互联网科技不断的发展和创新，如今无论是公司还是开发者或设计师个人而言，面试都是一项耗时耗钱的项目，而面对iOS开发者及设计师在面试时可能会遇到的问题进行了筛选与汇总。下面我们一起来一下看看吧。一、如何绘制UIView?绘制一个UIView最灵活的方法就是由它自己完成绘制。实际上你不是绘制一个UIView，而是子类化一个UIView并赋予绘制自己的能力。当一个UIView需
转载
2024-05-15 01:42:19
146阅读
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>在组件树中的
setState 方法在 React 中调用后，直到页面重新渲染之间经历了一系列的步骤。以下是这个过程的详细解释：
状态合并：
当调用 setState 时，React 不会立即改变组件的状态，而是将传入的新状态对象与当前状态进行合并。合并通常是浅层合并，这意味着如果新状态包含深层次的对象属性更改，那么只有第一层属性会合并，深层对象的更改可能不会生效，除非显式替换整个深层对象。
异步处理：
Rea
React 事件代理原理
事件绑定在顶级容器：React 在组件的最外层容器（比如在ReactDOM.render()方法挂载的DOM节点上）绑定一个单一的事件监听器，而不是为每个子组件分别绑定。
合成事件系统：React 创建了自己的合成事件（SyntheticEvent），它是对浏览器原生事件的一层抽象，无论底层浏览器如何，合成事件的行为都是一致的。当用户交互发生时，相应的原生事件会冒泡到顶层
触发 React 重新渲染
状态变化（State Update）：
当组件内部调用 setState() 方法更新状态时，React会触发该组件及其后代组件的重新渲染流程，除非 shouldComponentUpdate()、getDerivedStateFromProps() 或者 useEffect() Hook 中指定了特殊的优化条件。
Props变化（Props Change）：
当父组件
react 中怎么实现重定向
重定向（Redirect）在Web开发中指的是将用户的请求从一个URL转向另一个URL的行为，通常是当用户访问某个页面时，服务器或前端框架决定将用户引导至另一个页面。
使用<Redirect>组件（适用于React Router v4及更高版本）： 在一个路由配置或组件内部使用<Redirect>组件，当组件渲染时，它会立刻执行重定向。
编程式
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
