React

最新推荐文章于 2024-09-19 11:17:39 发布

xiaohuichonga

最新推荐文章于 2024-09-19 11:17:39 发布

阅读量123

点赞数

本文链接：https://blog.csdn.net/xiaohuichonga/article/details/131962226

版权

1.说说对 React 的理解? 有哪些特性

React 是用于构建用户界面的 JavaScript 库,提供了 UI 层面的解决方案,遵循组件设计模式/生命式编程和函数式编程概念,以使前端应用程序更高效,使用虚拟DOM来有效操作DOM,遵循从高阶组件到低阶组件的单向数据流,帮助我们将界面成了各个独立的一个组件,这些组件之间可以组合/嵌套/构成整体页面

特性:

JSX语法
单向数据绑定
虚拟DOM
声明式编程
组件化 Component

优势:

高效灵活
声明式设计,简单使用
组件式开发,提高代码复用率
单向响应的数据流会比双向绑定更安全,速度快

2.区分Real DOM 和 Virtual DOM

Real DOM

Real DOM,真实的DOM,文档对象模型,是一个结构化文本的抽象,在页面渲染出的每一个节点都是一个真实的DOM结构
更新缓慢
可以直接更新 HTML
如果元素更新,则创建新DOM
DOM 操作代价更高
消耗的内存较多

Virtual DOM

Virtual DOM 本质上是以 JavaScript 对象形式存在的对 DOM 的描述,虚拟DOM操作真实DOM
更新更快
无法直接更新 HTML
如果元素更新,则更新 JSX
Dom操作更简单
内存消耗少

3.什么 JSX , JSX 的特性

JSX 是JavaScript XML的缩写,基于ECMAScript的一种新特性，一种定义带属性树结构的语法

特性:

自定义组件名首字母大写
嵌套, 在 render 函数中 return返回的只能包含一个顶层标签
求值表达式, JSX基本语法规则, html 标签使用 HTML 规则解析; 代码块使用 JS 规则解析
驼峰命名法
class => className
JXS 允许直接在模板中插入 JS 变量, 如果变量是数组 => 展开数组
在 JSX 中插入用户输入是安全的ReactDom在渲染前,转义 JSX 中的任意值,渲染前,所有值都会被转化为字符串形式,预防 XSS 攻击

4.类组件与函数式组件的区别

类组件

使用函数/类声明组件,不能修改它自己的 props
所有 React 组件必须是纯函数
React 是单向数据流,父组件更改了属性,子组件视图会更新
属性 props 是外界传递过来的, 状态 state 是自身的, 状态可以修改
组件的属性和状态更改都会更新视图

函数式组件

函数组件接收了一个单一的 props 对象并返回了一个 React 对象
函数组件比类组件性能高, 因为类组件需要实例化,函数式组件直接执行函数取返回结果.

5.Virtual DOM 的工作原理

Virtual DOM 是一个轻量级的 JavaScript 对象，它最初只是 real DOM 的副本。它是一个节点树，它将元素、以及它们的属性和内容作为对象及其属性。 React 的渲染函数从 React 组件中创建一个节点树。然后它响应数据模型中的变化来更新该树，该变化是由用户或系统完成的各种动作引起的。

Virtual DOM 工作过程有三个简单的步骤：

当底层数据发生改变时，整个 UI 都将在 Virtual DOM 描述中重新渲染。
计算之前 DOM 和之后的差异。
完成计算后，将只用实际更改的内容更新 Real DOM。

6.详细解释 React 组件的生命周期方法

componentWillMount() - 在渲染之前执行, 客户端/服务端都会执行
componentDidMount() - 在第一次渲染后在客户端执行
componentWillReceiveProps() - 当从父类接收到 props 并且在调用另一个渲染器之前调用
shouldComponentUpdate() - 根据特定条件返回 true / false false阻止render渲染默认返回true => 更新组件在这个钩子周期中做优化,提高性能
componentWillUpdate() - 在 Dom 渲染之前调用
componentDidUpdate() - 在渲染发生后立即调用
componentWillUnmount() - 从Dom卸载组件后调用,清理空间内存