乐意-李
乐意-李

面试题-react，自己整理，有问题的希望指出

文章目录

      • 请简述你对react的理解
      • 请简述虚拟dom与diff算法
      • 为什么虚拟 dom 会提高性能?
      • 什么是jsx
      • 怎样理解“在React中，一切都是组件”这句话
      • 函数组件与类组件
      • react组件的生命周期函数
      • 事件
      • refs
      • State与props区别
      • 什么是props？
      • react中的状态是什么，如何使用
      • 调用 setState 之后发生了什么？
      • react中keys的作用是什么？
      • 何为受控组件
      • 脚手架模式下所有节点的子节点
      • 组件之间的数据传递
      • 高阶组件（HOC）
      • react的路由
      • redux
      • react-redux
      • react中的ajax
      • 调用 super(props) 的目的是什么
      • HOOK
      • react中的StrictMode(严格模式)是什么
      • 为什么类方法需要绑定
      • shouldComponentUpdate 是做什么的，
      • react中创建组件的方式有几种
      • Vue与react区别
      • 想解析一个字符串类型的标签怎么办？
      • react怎么使用图片
      • 什么是prop drilling
      • props验证
      • 如何避免组件的重新渲染
    • 在React项目中遇到了什么问题。
    • react中的调试工具
    • 强制刷新和配置别名
    • 怎样知道项目是如何启动的
    • 在react项目中使用confirm会报错？
    • react中的调试工具
    • 强制刷新和配置别名
    • 怎样知道项目是如何启动的
    • 在react项目中使用confirm会报错？

请简述你对react的理解

首先，我们要知道他是2011年Facebook所开发的一个用于构建用户界面的javascript库

具有以下的特点

  • 高效–>通过对dom的操作，最大程度的减少了dom的交互
  • 灵活–>可以很多第三方库进行良好的配合
  • 组件–>可以将页面划分为一个一个的小组件
  • 单向数据流–>数据主要是从父节点传递到子节点的
  • 声明式设计 −>React采用声明范式，可以轻松描述应用

请简述虚拟dom与diff算法

虚拟dom：

就是当页面的数据变化的时候，react都会重新构建整个dom树（减少了页面的更新次数），然后将重新构建的dom树和上一次的dom树进行比对，得到dom结构，然后只将需要变化的部分在浏览器上进行dom更新

简而言之，就是减少更新次数，最小化渲染区域

diff算法：

diff算法，就是虚拟dom到真实dom转换过程中的最小操作过程叫做调和，调和正是diff算法的具体表现

diff算法的原理：

  • 先将树形结构按照层级进行划分，比较同级元素
  • 将划分的元素进行标记，添加唯一的key值
  • 将同类组件进行合并
  • 调用setState的时候，会将已经标记的进行重新渲染
  • 使用shouldComponentUpdate对子组件进行选择性的渲染，提高性能

为什么虚拟 dom 会提高性能?

  • 虚拟dom就相当于在js和真实的dom之间加了一个缓存
  • react对dom进行操作，都是通过操作虚拟dom进行的，减少了没有必要的DOM操作，性能提高
  • 要是元素进行更新，虚拟 dom 不会和真实dom一样创建新的dom树的，他会更新jsx，
  • diff算法计算出虚拟DOM中真正变化的部分，并只针对该部分进行原生DOM操作，而非重新渲染整个页面。

什么是jsx

Javascript和XML结合的一种格式，是JavaScript 的语法扩展，在 React 中使用 JSX 来描述用户界面,提高代码的可读性，能使应用非常可靠，并能够提高其性能

在jsx中，遇到<>就会被当作HTML解析，遇到{}里的内容就会被当作js解析

但是在使用jsx需要注意的是：

  • 多行文本必须使用一个根节点对其进行包裹，否则报错

  • 使用的HTML标签必须严格按照W3C定义的标准书写，否则报错

  • jsx中的注释是{/* */},其他的注释会报错

  • html的value属性要写成defaultValue

  • html的checked属性要写成：defaultChecked

  • 引用外部样式时, 不要使用class作为属性名，class 写className,因为class是关键字

【注意】：在浏览器是无法读取jsx的

浏览器处理的对象只有三种，html，css，javascript，所以为了是浏览器能够识别并且解析jsx，首先我们需要Babel这样的转换插件，可以将jsx语言转换为js对象，在渲染到浏览器上

jsx的优点：

1.允许使用熟悉的语法来定义 HTML 元素树；

2.JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。

3.程序结构更容易被直观化；

4.它是类型安全的，在编译过程中就能发现错误。

5.使用 JSX 编写模板更加简单快速。；

怎样理解“在React中，一切都是组件”这句话

组件是react应用ui的构建块，这些组件将整个ui划分为细化的模块，对于相似的模块进行重复使用，但是每一个组件之间都是相互独立的，一个是改变不会影响到其他的模块

函数组件与类组件

【定义组件名必须是大写,组件的返回值必须是一个根元素】

分为两种

  • 函数组件（又被称为无状态组件）

    当组件仅是接收 props，并将组件自身渲染到页面时就叫做函数组件

    不会产生组件对象，没有自身的状态和生命周期的钩子

  • 类组件

    会产生组件对象，可以有自身的状态和生命周期的钩子

【函数组件和类组件之间的区别】:

函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件。

函数组件没有state，没有this，没有生命周期

react组件的生命周期函数

React 组件的生命周期有三个不同的阶段：

  1. *初始渲染阶段：*这是组件即将开始其生命之旅并进入 DOM 的阶段。

    constructor(): react数据的初始化方法

componentWillMount：一般用的比较少，但是还未渲染DOM时。


render:组件在这里生成虚拟的DOM节点

//这是AJAX请求和DOM或状态更新应该发生的地方
componentDidMount:组件真正在被装载之后

  2. *更新阶段：*一旦组件被添加到 DOM，它只有在 prop 或状态发生变化时才可能更新和重新渲染。这些只发生在这个阶段(this.setState({}))。

    componentWillUpdate:组件即将更新不能修改属性和状态

render:组件重新描绘

componentDidUpdate:组件已经更新

componentWillReceiveProps:组件将要接收到属性的时候调用，初始化不触发

shouldComponentUpdate:组件接受到新属性或者新状态的时候（可以返回false，接收数据后不更新，阻止render调用重绘）

  3. *卸载阶段：*这是组件生命周期的最后阶段，组件被销毁并从 DOM 中删除。

    componentWillUnmount:组件即将销毁

事件

在 React 中，事件是对鼠标悬停、鼠标单击、按键等特定操作的触发反应。处理这些事件类似于处理 DOM 元素中的事件

绑定函数的过程中不加() 否则函数会立即执行

和原生的事件的区别在于:

  1. 用驼峰命名法对事件命名而不是仅使用小写字母。
  2. 事件作为函数而不是字符串传递

react中的事件绑定有四种方法：

  • 箭头函数

    funa=（）=>{}
<button onClick={this.funa}>点击我修改</button>

  • 事件调用为箭头函数【可传参】

    funa=function（a,b）{}
onClick={()=>{this.funa(参数1，参数2)}}

  • bind方法【可传参】

    funa=function（）{}
onClick={this.funa.bind(this，参数一，参数2)}

  • constructor提前绑定

    class MyCom extends React.Component{
       constructor(props){
        super(props)
   //提前对事件进行绑定        
 this.fund=this.fund.bind(this)
       }   
 fund=function(){}
onClick={this.fund}

refs

ref是用来标识组件内部的元素的（也可以说是用来操作dom元素的）

【切记:ref用在类组件上，因为函数组建没有实例】

ref三种使用方法：

  • 字符串

    ref=“xxx”；

    使用：this.refs.xxx.样式

     funa = () => {
      this.refs.demona.style.color="red"
	}  
<h1 ref="demona" onClick={this.funa}>1</h1>

  • 使用回调函数（推荐）

    使用ref={(xiaoming)=>{this.xianghong=xiaoming}}绑定dom

    使用 this.xianghong.XXX 修改dom元素样式

     funb = () => {
            this.b.style.backgroundColor="yellow"  
        }
<h1 ref={(a)=>{this.b=a}} onClick={this.funb}></h1>

  • React.createRef()

    使用ref={this.自定义名字}绑定dom

    在constructor里使用this.自定义名字=React.createRef()进行定义

    使用his.自定义名字.current.XXX 修改dom元素样式

      constructor(props) {
            super(props)  
            this.demonref=React.createRef()
        }
      func = () => {
           this.demonref.current.style.backgroundColor="yellow" 
        }
<h1 ref={this.demonref} onClick={this.func}></h1>

State与props区别

props：是react中不可变的属性，是整个应用中父组件给子组件传值的一种方式，一般用来展示动态生成的数据

state：是react中状态，是数据的来源，而且state是可变的

两者之间的区别

Props State
组件对外的 组件对内的接口
不能在自己所在组件修改值 可以在所在组件修改值
一般用来传递参数 一般用来更新渲染
具有可读性和不变性 不可通过外部访问和修改
是组件的一个属性 是一种数据结构

什么是props？

Props 是 React 中属性的简写。它们是只读组件，必须保持纯，即不可变。它们总是在整个应用中从父组件传递到子组件。子组件永远不能将 prop 送回父组件。这有助于维护单向数据流，通常用于呈现动态生成的数据。

react中的状态是什么，如何使用

状态是 React 组件的核心，是数据的来源，在react中使用state进行表示

基本上状态是确定组件呈现和行为的对象。与props 不同，它们是可变的，并创建动态和交互式组件。可以通过 this.state() 访问它们。

【注意】：在函数组件中不能使用state，因为它没有实例

使用：

//定义：
this.state={
   名值对
}
//使用：
this.state.xxx

//修改
this.setState({
    名值对
})

调用 setState 之后发生了什么？

在调用setState 之后，react会将传进来的参数对象与当前组件的状态进行合并，然后触发调和的过程，经过调和的过程以后，React 会以相对高效的方式根据新的状态构建 React 元素树并且着手重新渲染整个 UI 界面

在 React 得到元素树之后，React 会自动计算出新的树与老树的节点差异，然后根据差异对界面进行最小化重渲染

首先，了解setState是异步操作，其次明白会自动重新触发render（）

// 修改state
this.setState({
    text:"你好么么哒"
  },()=>{
    //修改以后的数据
    console.log("回调中的打印"+this.state.text)
 })
//原始数据，没有被修改
 console.log(this.state.text)

react中keys的作用是什么？

Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。

在开发过程中，我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。

此外，React 还需要借助 Key 值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中 Key 的重要性。

何为受控组件

react中用来负责渲染表单的组件

同时仍然控制用户后续输入时的变化，值是来自于state控制的

在HTML当中，像  ,