react面试题

最新推荐文章于 2023-07-27 22:49:39 发布

原创最新推荐文章于 2023-07-27 22:49:39 发布 · 105 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#reactjs

## 什么事react

专注视图层的响应式框架,单项数据流,单项数据绑定

## react,vue,jq对比

react单项数据绑定,专注视图层

vue数据驱动试图双向绑定数据,响应式框架

jq操作dom的类库

## react为什么必须使用setState去修改住状态

单项数据绑定特性,必须使用setState函数修改,才能使用组件进行更新阶段

## setState默认的是异步还是同步?如何成为同步

异步,传入两个回调函数即可

## 组件类型

类组件,函数组件(无状态组件)(hook组件)

## 什么事高阶组件

一个函数接受一个组件,返回一个类组件

## 高阶组件的意义

为了复用类组件里的方法逻辑等.没有hook前,函数组件没有react的很多特性,所以才有了这种模式

## 生命周期

### 挂载阶段

1. constructor

2. render

3. componentDidMount

### 更新阶段

1. static getDerivedStateFromProps 可以对props和state进行再次修改的

2. shouldComponentUpdate 是否要更新

3. render

### 卸载

componentWillUnmount

### hook的useEffet

1. 直接用:普通的更新钩子

2. 空数组:挂载完成钩子

3. 数组里有值:对该值监听,只有该值更新的时候才会触发,第一次监听也会触发

4. 返回一个函数:卸载

## 性能优化

1. shouldComponentUpdate是否阻止组件更新

2. memo

3. useMemo

4. useCallback

5. pureComponent 等价于自动调用shouldComponentUpdate

6. React.lazy 组件的按需加载

## 上下文对象

React.Context穿件一个全局的共享上下文对象

父组件使用context.Provider提供共享数据

子组件context.Consumer接受共享数据且consumer组件里必须用函数接受

const context = React.context()
    <context.Provider value={data}>
        <Son/>    
    </context.Provider>
    
    <context.Consumer>    
    </context.Consumer>

## 懒加载

const Son = React.lazy(()=>import('./son'))

<React.Suspense fallback='1908'>

    <Son/>

</React.Suspense>

## hook

## 受控组件和非受控组价

### 受控组件

行为和交互被react控制的组件叫做受控组件,列:iNput的value被state控制,赋值操作被onChange控制

### 非受控

不被react控制的,由用户自主操作

列:input的type类型是file

### jsx

jsx是类xml的一种格式,底层是js,是React.createElement的语法糖

### 虚拟dom 和 diff 算法

用js通过算法计算出来的dom对象,叫虚拟dom

diff算法的原理:同层对比,发现不一致,就直接用新的虚拟dom替换旧的,且停止向下对比

## protals

让元素显然到节点的任意节点下.

## 插槽

使用Props.children接受上游组件(父组件)传入的子元素或内容

`<Slot>老谢</Slot>`

## 顶级API

React.component,

React.PureComponent,

React.createElement,

React.cloneElement,

React.children,

React.Fragment,

React.createRef,

React.useRef,

React.createContext,

React.lazy,

React.Suspense,

React.forwardRef,

React.useState,

React.Effect,

React.memo,

React.useMemo,

ReactDOM.render,

ReactDOM.createPortals,

React.useCallback