MichelleZhai的博客

背景：今天是2022年1月22日星期六，此刻我拖着同事坐在办公室里加班，需求页面中某一表格因产品业务逻辑不清晰，反复更改交互，写到一半发现业务流程走不下去，原稿的UED也被改的面目全非，导致表格所依赖的第三方组件EditableProTable高级组件，彻底 被 玩 坏 了产品要求1月24日上线，而此刻清单里还躺着10几个组件的bug分析：痛定思痛，还是重新梳理一下这边的业务逻辑吧这是最初的UED，2021.12.25-2022.1.22历经修复了60几个业务变更的bug之后，最后确认的最终

react面试整理React 的 diff 算法工作过程React 中的 setState 是同步还是异步React、Vue Next Umi 的区别?React 中各种组件复用的优劣势（mixin、render props、hoc、hook）React 的 Fiber 架构React 性能优化React hooks 相关问题React新的生命周期，为什么 getDrivedStatefromProps 是静态的？React 的 diff 算法工作过程React 中的 setState 是同步还是异步

React Hooks面试题整理React 加入 Hooks 的意义是什么？为什么 React 要加入Hooks 这一特性？常用的Hooks有哪些？React Hooks api的原理：React Hooks如何模拟组件生命周期？模拟的生命周期和class中的生命周期有什么区别吗？Hooks相比HOC和Render Prop有哪些优点？Function Component与Class Component区别useEffect和useLayoutEffect区别？useState和setState区别？用u

React优点1、React运用一个虚拟的DOM实现了一个非常强大的渲染系统，在React中对DOM只更新不读取；2、一切都是component，代码更加模块化，重用代码更容易，可维护性高3、单向数据流4、同构和服务端渲染可以更好的SEO和解决白屏问题缺点1、 它不是一个框架，它只是MVC（模型 - 视图 - 控制器）中的view2、 jsx的一个问题是，渲染函数常常包含大量逻辑，...

react渲染过程1、React整个的渲染机制就是React会调用render()函数构建一棵Dom树，2、在state/props发生改变的时候，render()函数会被再次调用渲染出另外一棵树，重新渲染所有的节点，构造出新的虚拟Dom tree跟原来的Dom tree用Diff算法进行比较，找到需要更新的地方批量改动，在渲染到真是的DOM上，由于这样做就减少了对Dom的频繁操作，从而提升的...

为什么需要服务端渲染？1、更好的SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面。（原因很简单，因为客户端渲染全部依赖于虚拟DOM，而搜索引擎爬不到虚拟DOM（主要是国内搜索引擎）2、解决首屏白屏问题react服务端渲染的条件React 之所以可以做到服务端渲染 是因为ReactDOM提供了服务端渲染的APIrenderToString 把一个react 元素转换成带reac...

点击查看React整理

一、setState(updater, [callback]) React 通过setState方法来更新组件的内部状态，当setState方法被调用时，React 会根据新的state来重新渲染组件（并不是每次setState都会触发render，React可能会合并操作，再一次性 render）。React将setState设置为批次更新，从而避免了频繁地重新渲染组件，即setState...

一、先来一个简洁版的理解大纲 生命周期共提供了10个不同的API。 1.getDefaultProps 作用于组件类，只调用一次，返回对象用于设置默认的props，对于引用值，会在实例中共享。2.getInitialState 作用于组件的实例，在实例创建时调用一次，用于初始化每个实例的state，此时可以访问this.props。3.componentWillMount 在完成...

参考链接：https://github.com/brickspert/blog/issues/2 高阶组件：高阶组件就是一个函数，且该函数接受一个组件作为参数，并返回一个新的组件。一、函数模拟高阶组件 我们通过普通函数来理解什么是高阶组件哦~ 1、最普通的方法，一个welcome，一个goodbye。两个函数先从localStorage读取了username，然后对username做了一...

一、React.createClass与React.Component区别 1、函数this绑定： React.createClass 创建的组件自动绑定thisconst Contacts = React.createClass({ handleClick() { console.log(this); // React Component instance...