React有什么特点?
它使用虚拟DOM而不是真正的DOM 它可以用服务器端渲染 它遵循单向数据流或数据绑定 (其实要说特点的话,作为原先的三大框架,我只熟识Vue 和 React 俩个框架。 其实写代码没差的,要是说学习曲线的话react更加的陡峭一些,但是就开发习惯而言,react更偏向于国外开发者,vue具有成型快,定义方法和上手难度相对要简单一些。至于单向数据流基本上来说现有框架都属于这种,数据驱动视图,数据依次从父组件往下放。至于服务端渲染都是有各自的指定框架,三大框架其实各有优劣。)
React的主要优点?
它提高了应用的性能 可以方便地在客户端和服务器端使用 由于 JSX,代码的可读性很好 React 很容易与 Meteor,Angular 等其他框架集成 使用React,编写UI测试用例变得非常容易(其实框架首先的一大优势就是提升的项目的开发速度,它替开发者操心了视图的更新速度优化,完成了视图于数据的快速绑定,其实单论真正的响应速度还是JS最快,框架只是好用而优化的相对而言的快,不影响用户使用,用户使用流畅那就基本ok,其实react 对比起来还是 插件够多,npm 包够多,代码拆分分层灵活,可操作性高。)
React有哪些限制?
React 只是一个库,而不是一个完整的框架 它的库非常庞大,需要时间来理解 新手程序员可能很难理解 编码变得复杂,因为它使用内联模板和 JSX(其实vue也是一个库,不能说它不完整,是一个框架来说的话它要尽量维持精简,至于插件和包是根据的你需求,你选择安装或者不安装,简洁小快,可以定制化才是框架追求的,学习曲线相对来说要陡峭一些。)
Virtual DOM 的工作原理?
Virtual DOM 是一个轻量级的 JavaScript 对象,它最初只是 real DOM 的副本。它是一个节点树,它将元素、它们的属性和内容作为对象及其属性。 React 的渲染函数从 React 组件中创建一个节点树。然后它响应数据模型中的变化来更新该树,该变化是由用户或系统完成的各种动作引起的。
Virtual DOM 工作过程有三个简单的步骤。
每当底层数据发生改变时,整个 UI 都将在 Virtual DOM 描述中重新渲染。 然后计算之前 DOM 表示与新表示的之间的差异。 完成计算后,将只用实际更改的内容更新 real DOM。
react diff 原理
把树形结构按照层级分解,只比较同级元素。 给列表结构的每个单元添加唯一的 key 属性,方便比较。 React 只会匹配相同 class 的 component(这里面的 class 指的是组件的名字) 合并操作,调用 component 的 setState 方法的时候, React 将其标记为 dirty.到每一个事件循环结束, React 检查所有标记 dirty 的 component 重新绘制. 选择性子树渲染。开发人员可以重写 shouldComponentUpdate 提高 diff 的性能。
React 项目用过什么脚手架
creat-react-app, Yeoman, umi 等
如果进行三次setState会发生什么,循环执行setState组件会一直重新渲染吗?
setState这个方法是用来告诉react组件数据有更新,有可能需要重新渲染。它是异步的,react通常会集齐一批需要更新的组件,然后一次性更新来保证渲染的性能,所以进行三次只有一次的效果,并不会导致多次渲染. 此外再使用setState改变状态之后,立刻使用this.state去拿最新的状态往往是拿不到的,如果需要最新的state做业务的话,可以在componentDidUpdate或者setState的回调函数里获取。
调用 setState 之后发生了什么?
在代码中调用setState函数之后,React 会将传入的参数对象与组件当前的状态合并,然后触发所谓的调和过程(Reconciliation)。经过调和过程,React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个UI界面。在 React 得到元素树之后,React 会自动计算出新的树与老树的节点差异,然后根据差异对界面进行最小化重渲染。在差异计算算法中,React 能够相对精确地知道哪些位置发生了改变以及应该如何改变,这就保证了按需更新,而不是全部重新渲染。
什么是JSX?
JSX 是JavaScript XML 的简写。是 React 使用的一种文件,它利用 JavaScript 的表现力和类似 HTML 的模板语法。这使得 HTML 文件非常容易理解。此文件能使应用非常可靠,并能够提高其性能。
浏览器是否可以直接读取读取JSX?
浏览器只能处理 JavaScript 对象,而不能读取常规 JavaScript 对象中的 JSX。所以为了使浏览器能够读取 JSX,首先,需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象,然后再将其传给浏览器。
vue和react适用的场景
vue适合webapp,适合做用户交互多,各种动态效果变化丰富的应用。特别是PC、手机的网页版,商城等页面。因为vue实现逻辑复杂的功能比较简单。 react适合oa系统,适合大批量的数据展示、适合做大型应用。特别适合公司的后台管理系统。 因为react对那种比较复杂的交互,实现起来比较麻烦,没有vue方便。同时react的渲染原理是渲染整个组件树,所以,一方面是费性能,而且代码写起来逻辑复杂。但是react对批量数据操作很厉害。 总而言之,项目要求比较高的适合使用react,因为react的社区更活跃一些,尤其是各种UI框架比较稳定、系统,可以信赖。Vue的社区也很活跃,但相对而言各种组件五花八门,大多数不够完善,缺乏系统性和迭代性,对于项目的后期维护和新手入手都不太友好。 从应用上来看,react打出来的包会大一些,相对来说,vue的包小一些,如果项目场景对加载速度由要求,建议使用vue。 (其实就一个公司角度来说,它绝对不在意这个项目它本身的一个内置代码是什么,真正应该关注的点是在于开发团队对于框架的熟悉程度,还有就是这个项目你能够拿到多少工期,就成型速度来说vue肯定是要快一些,其实就代码灵活程度来说,vue也不差。最新一版的灵活的程度很高。)
React 组件
为什么说在React中,一切都是组件 组件是 React 应用 UI 的构建块。这些组件将整个 UI 分成小的独立并可重用的部分。每个组件彼此独立,而不会影响 UI 的其余部分。
React 中 render() 的目的
每个React组件强制要求必须有一个 render()。它返回一个 React 元素,是原生 DOM 组件的表示。如果需要渲染多个 HTML 元素,则必须将它们组合在一个封闭标记内,例如 <form>、<group>、<div> 等。此函数必须保持纯净,即必须每次调用时都返回相同的结果。(所以这个函数有纯函数一说,它的里面不需要穿插逻辑,所有的逻辑计算在其函数的外部)
React组件生命周期的阶段是什么?
React 组件的生命周期有三个不同的阶段: 初始渲染阶段:这是组件即将开始其生命之旅并进入 DOM 的阶段。 更新阶段:一旦组件被添加到 DOM,它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段。 卸载阶段:这是组件生命周期的最后阶段,组件被销毁并从 DOM 中删除。 (其实Vue的生命周期也大差不差也是如此,主要注意一些方法状态在 mounted 可以拿到, 有些东西在create的时候是拿不到的)
react 生命周期函数

挂载
当组件实例被创建并插入 DOM 中时,其生命周期调用顺序如下: constructor() getDerivedStateFromProps(): 当从父类接收到 props 并且在调用另一个渲染器之前调用。 render() componentDidMount(): 仅在第一次渲染后在客户端执行。
更新
当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下: getDerivedStateFromProps(): 当从父类接收到 props 并且在调用另一个渲染器之前调用。 shouldComponentUpdate(): 根据特定条件返回 true 或 false。如果你希望更新组件,请返回true 否则返回 false。默认情况下,它返回 false。 render() getSnapshotBeforeUpdate() componentDidUpdate(): 在渲染发生后立即调用
卸载
当组件从 DOM 中移除时会调用如下方法: componentWillUnmount(): 从 DOM 卸载组件后调用。用于清理内存空间。 在生命周期中的哪一步你应该发起 AJAX 请求? 我们应当将AJAX 请求放到 componentDidMount 函数中执行,主要原因有下: React 下一代调和算法 Fiber 会通过开始或停止渲染的方式优化应用性能,其会影响到 componentWillMount 的触发次数。对于 componentWillMount 这个生命周期函数的调用次数会变得不确定,React 可能会多次频繁调用 componentWillMount。 如果我们将 AJAX 请求放到 componentWillMount 函数中,那么显而易见其会被触发多次,自然也就不是好的选择。 (新版本的React,已经拿掉了) 如果我们将 AJAX 请求放置在生命周期的其他函数中,我们并不能保证请求仅在组件挂载完毕后才会要求响应。如果我们的数据请求在组件挂载之前就完成,并且调用了setState函数将数据添加到组件状态中,对于未挂载的组件则会报错。而在 componentDidMount 函数中进行 AJAX 请求则能有效避免这个问题。
展示组件(Presentational component)和容器组件(Container component)之间有何不同?
展示组件关心组件看起来是什么。展示专门通过 props 接受数据和回调,并且几乎不会有自身的状态,但当展示组件拥有自身的状态时,通常也只关心 UI 状态而不是数据的状态。 容器组件则更关心组件是如何运作的。容器组件会为展示组件或者其它容器组件提供数据和行为(behavior),它们会调用 Flux actions,并将其作为回调提供给展示组件。容器组件经常是有状态的,因为它们是(其它组件的)数据源。(其实这个让我想起了木偶组件一说,也就是说,木偶组件不与数据做任何交互,受控于上级组件只做展示。)
文章采用 知识共享署名 4.0 国际许可协议 进行许可,转载时请注明原文链接。