1.说说对react的理解

1️⃣是什么
React是用于构建用户界面的 JavaScript 库,遵循组件设计模式、声明式编程范式和函数式编程概念，更高效使用虚拟 DOM 来有效地操作 DOM ，遵循从高阶组件到低阶组件的单向数据流。
react 类组件使用一个名为 render() 的方法或者函数组件 return ，接收输入的数据并返回需要展示的内容。形式就是JSX，最终会babel被编译为合法的 JS语句调用，被传入的数据可在组件中通过this.props 在render() 访问。
2️⃣特性
JSX 语法
单向数据绑定
虚拟 DOM
声明式编程
Component
3️⃣优势
高效灵活
声明式的设计，简单使用
组件式开发，提高代码复用率单向响应的数据流会比双向绑定的更安全，速度更快

2.state和props区别

1️⃣state
一个组件的显示形态可以由数据状态和外部参数所决定，而数据状态就是 state ,一般在 constructor 中初始化，当需要修改里面的值的状态需要通过调用 setState 来改变。
setState 还可以接受第二个参数,它是一个函数,会在 setState 调用完成并且组件开始重新演染时被调用，可以用来监听渲染是否完成
2️⃣props
props理解为从外部传入组件内部的数据，react 具有单向数据流的特性,所以他的主要作用是从父组件向子组件中传递数据。props 可以传字符串,数字，传递对象，数组，回调函数。
props 在内部不可变的,如果想要改变它看,只能通过外部组件传入新的 props 来重新渲染子组件，否则子组件的 props 和展示形式不会改变
3️⃣区别
相同点:
两者都是 JavaScript 对象
两者都是用于保存信息
props 和state 都能触发渲染更新
区别:
props 是外部传递给组件的,而 state 是在组件内被组件自己管理的,一般在 constructor 中初始化
props 在组件内部是不可修改的,但state 在组件内部可以进行修改，state 是多变的、可以修改

3.super()和super(props)区别

在React 中,类组件基于ES6,所以在 constructor 中必须使用 super在调用 super 过程，无论是否传入 props,React 内部都会将 props赋值给组件实例props 属性中如果只调用了 super(),那么 this.props 在super() 和构造函数结束之间仍是undefined

4.说说对react中类组件和函数组件的理解？

1️⃣类组件
通过使用 ES6 类的编写形式来编写组件,该类必须继承 React.Component
如果想要访问父组件传递过来的参数，可通过this.props 的方式去访问,在组件中必须实现render 方法,在return 中返回 React 对象
2️⃣函数组件
通过函数编写的形式去实现一个 React 组件。
函数第一个参数为props用于接收父组件传递过来的参数
3️⃣区别
1.编写形式：一个function，一个class
2.状态管理：
类组件中调用setState，在 hooks 情况下,函数组件调用 state ，则需要创建一个类组件或者 state 提升到父组件中，然后通过props 对象传递到子组件
3.生命周期：
在函数组件中不存在生命周期，生命周期钩子来自于继承的react.Component,函数组件useEffect来对应类组件中的componentDidMount生命周期。useEffect回调函数中return一个函数，则return函数会在组件卸载的时候执行，正如componentWillUnmount
4.调用方式：
函数组件调用则是执行函数
类组件则需要将组件进行实例化，然后调用实例对象的render方法
5.获取渲染值：
类组件中输出this.props.user,this总是可变的，而函数组件本身不存在this
4️⃣总结
两种组件都有各自的优缺点
函数组件语法更短，更简单，而类组件会因大量使用this而让人感到困惑

5.说说对受控组件和非受控组件的理解？应用场景？

受控组件：就是受我们控制的组件，组件的状态全程响应外部数据，受控组件需要初始状态和状态更新事件函数。
非受控组件：初始化接受外部数据，自己在内部存储其自身状态，通过ref查询DOM并查找其当前值。
应用场景：
大部分时候推荐使用受控组件来实现表单

6.说说react的事件机制？

react基于浏览器的事件机制自身实现了一套事件机制，包括事件注册，事件合成，事件冒泡，事件派发等，在react中这套事件机制被称为合成事件。
react事件机制总结：
React 上注册的事件最终会绑定在document这个 DOM 上，而不是 React 组件对应的 DOM(减少
内存开销就是因为所有的事件都绑定在 document 上,其他节点没有绑定事件)
React 自身实现了一套事件冒泡机制，所以这也就是为什么我们event.stopPropagation()无效的原因。
React 通过队列的形式，从触发的组件向父组件回溯,然后调用他们 JSX 中定义的 callbackReact 有一套自己的合成事件SyntheticEvent

7.react事件绑定的方式有哪些？区别？

绑定方式：
render方法中使用bind
render方法中使用箭头函数
constructor中bind
定义阶段使用箭头函数绑定

区别：
编写方面:方式一、方式二写法简单,方式三的编写过于冗杂；
性能方面:方式一和方式二在每次组件render的时候都会生成新的方法实例，性能问题欠缺。若该函数作为属性值传给子组件的时候，都会导致额外的渲染。而方式三、方式四只会生成一个方法实例；
综合上述，方式四是最优的事件绑定方式。

8.react构建组件的方式有哪些？区别？

构建方式：
函数式创建
通过React.createClass 方法创建
继承 React.Component 创建
区别：
由于React.createclass创建的方式过于冗杂，并不建议使用而像函数式创建和类组件创建的区别主要在于需要创建的组件是否需要为有状态组件:·
对于一些无状态的组件创建,建议使用函数式创建的方式
由于react hooks 的出现,函数式组件创建的组件通过使用 hooks 方法也能使之成为有状态组件,再加上目前推崇函数式编程,所以这里建议都使用函数式的方式来创建组件在考虑组件的选择原则上，能用无状态组件则用无状态组件

9.说说react中引入css的方式有哪几种？区别？

方式：
在组件内直接使用
组件中引入.css 文件
.module.css 文件
css in Js
区别：
在组件内直接使用css该方式编写方便,容易能够根据状态修改样式属性，但是大量的演示编写
在组件内直接使用容易导致代码混乱；
组件中引入.css 文件符合我们日常的编写习惯,但是作用域是全局的，样式之间会层叠引；
引入.module.css 文件能够解决局部作用域问题，但是不方便动态修改样式，需要使用内联的方式进行样式的编写；
通过cssin s 这种方法,可以满足大部分场景的应用,可以类似于预处理器一样样式嵌套、定义修改状态等；
至于使用 react 用哪种方案引入 css ,并没有一个绝对的答案,可以根据各自情况选择合适的方案

10.说说react生命周期有哪些不同阶段？每个阶段对应的方法是？

三个阶段：
创建阶段
constructor
getDerivedStateFromProps
render
componentDidMount
更新阶段
getDerivedStateFromProps
shouldComponentUpdate
render
getSnapshotBeforeUpdate
componentDidUpdate
卸载阶段
componentWillUnmount

11.react中组件之间如何通信？

父组件向子组件传递：
由于react的数据流动为单向的，父组件向子组件传递是最常见的方式，父组件在调用子组件的时候，只需要在子组件标签哪传递参数，子组件通过props属性就能接收父组件传递过来的参数

子组件向父组件传递：
父组件向子组件传一个函数，然后通过这函数的回调，拿到子组件传过来的值

兄弟组件之间的通信：
父组件作为中间层来实现数据的互通，通过使用父组件传递

父组件向后代组件传递：
通过使用react.createContext创建一个context，创建成功后，存在provider组件通过value属性用于给后代组件传递数据，通过consumer组件或者使用contextType属性接收

非关系组件传递：
通过使用redux

总结：
由于 React 是单向数据流,主要思想是组件不会改变接收的数据,只会监听数据的变化，当数据发生变化时它们会使用接收到的新值,而不是去修改已有的值因此，可以看到通信过程中，数据的存储位置都是存放在上级位置中

12.说说对高阶组件的理解？

在react中，高阶组件即接受一个或多个组件作为参数并且返回一个组件，本质就是一个函数，并不是一个组件。
通过对传入的原始组件做一些你想要的操作(比如操作 props,提取 state,给原始组件包裹其他元素等)，从而加工出想要的组件把通用的逻辑放在高阶组件中，对组件实现一致的处理，从而实现代码的复用所以，高阶组件的主要功能是封装并分离组件的通用逻辑,让通用逻辑在组件间更好地被复用

使用高阶组件的同时，一般遵循一些约定，如下:
props 保持一致
不能在函数式组件上使用 ref 属性，因为没有实例
不要再render()方法中使用高阶组件
使用 compose 组合高阶组件

应用场景
高阶组件能够提高代码的复用性和灵活性，在实际应用中，常常用于与核心业务无关但又在多个模块使用的功能,如权限控制、日志记录、数据校验、异常处理、统计上报等

13.在react中组件间过渡动画如何实现？

在react 中实现过渡动画效果如：
react-transition-group
react-motion
Animated
原生的CSS

14.说说你在react项目中如何捕获错误的？

错误边界在渲染期间、生命周期方法和整个组件树的构造函数中捕获错误形成错误边界组件的两个条件:
使用了 static getDerivedStateFromError().
使用了 componentDidCatch()

下面这些情况无法捕获到异常:
事件处理
异步代码
服务端渲染
自身抛出来的错误
对于错误边界无法捕获的异常,如事件处理过程中发生问题并不会捕获到，是因为其不会在渲染期间触发，并不会导致渲染时候问题
这种情况可以使用js 的try…catch…语法

15.说说对react里的refs的理解？应用场景？

React 中的Refs 提供了一种方式，允许我们访问DOM 节点或在 render方法中创建的React元素本质为 ReactDOM.render() 返回的组件实例,如果是渲染组件则返回的是组件实例，如果渲染dom 则返回的是具体的dom 节点

使用：
创建ref 的形式有三种:
传入字符串，使用时通过 this.refs传入的字符串的格式获取对应的元素
传入对象，对象是通过 React.createRef()方式创建出来，使用时获取到创建的对象中存在current 属性就是对应的元素
传入函数，该函数会在 DOM 被挂载时进行回调,回调函数参数会传入一个 元素对象,然后通过实例将对象进行保存
传入hook,hook是通过useRef() 方式创建，使用时通过生成hook对象的 current 属性就是对应的元素

应用场景：
对Dom元素的焦点控制、内容选择、控制
对Dom元素的内容设置及媒体播放对Dom元素的操作和对组件实例的操作
集成第三方 DOM 库

16.说说react中的setState执行机制？

react修改数据状态state需要通过调用setState来改变，从而达到更新组件内部数据作用。setState第一个参数可以是一个对象或者一个函数，而第二个参数是一个回调函数，用于可以实时的获取到更新之后的数据。在组件生命周期或react合成事件中，setState是异步，在setTimeout或者原声dom事件中，setState是同步。

17.说说react render方法的原理？在什么时候会被触发？

render 函数里面可以编写 JSX ，转化成 createElement 这种形式，用于生成虚拟DOM，最终转化成真实 DOM；
在React 中，类组件只要执行了 setState 方法，就一定会触发render 函数执行，函数组件使用useState更改状态不一定导致重新render组件的 props 改变了，不一定触发 render 函数的执行，但是如果 props 的值来自于父组件或者祖先组件的state；
在这种情况下，父组件或者祖先组件的 state 发生了改变，就会导致子组件的重新渲染所以,一旦执行了setState 就会执行 render 方法, useState 会判断当前值有无发生改变确定是否执行 render 方法，一旦父组件发生渲染，子组件也会渲染

18.说说real DOM和virtual DOM区别？优缺点？

两者的区别如下:
虚拟 DOM 不会进行排版与重绘操作,而真实 DOM 会频繁重排与重绘
虚拟 DOM 避免大量的无谓计算

真实 DOM 的优势:易用
缺点:
效率低，解析速度慢,内存占用量过高
性能差:频繁操作真实 DOM易于导致重绘与回流。

虚拟 DOM 的优势:
性能方面: 使用 Virtual DOM,能够有效避免真实 DOM 数频繁更新,减少多次引起重绘与回流提高性能
跨平台:React 借助虚拟 DOM,带来了跨平台的能力，一套代码多端运行
缺点:
在一些性能要求极高的应用中虚拟 DOM 无法进行针对性的极致优化
首次染大量 DOM 时，由于多了一层虚拟 DOM 的计算，速度比正常稍慢

19.说说react jsx转换成真实dom过程？

使用React.createElement或JSX编写React组件,JSX 代码最后都会通过babel转换成React.createElement
createElement函数对key和ref等特殊的props进行处理并获取defaultProps对默认props进行赋值，并且对传入的孩子节点进行处理，最终构造成一个虚拟DOM对象
ReactDOM.render将生成好的虚拟DOM渲染到指定容器上，其中采用了批处理、事务等机制并且对特定浏览器进行了性能优化，最终转换为真实DOM

20.说说对fiber架构的理解？解决什么问题？

在react中，主要做了以下的操作:
增加了优先级,优先级高的任务可以中断低优先级的任务。然后再重新,注意是重新执行优先级低的任务
增加了异步任务，调用requestidleCallback api,浏览器空闲的时候执行.
dom diff树变成了链表,一个dom对应两个fiber，对应两个队列，为找到被中断的任务，重新执行
从架构角度来看,Fiber 是对 React 核心算法重写从编码角度来看,Fiber 是 React 内部所定义的一种数据结构,它是 Fiber 树结构的节点单位，也就是React 16 新架构下的虚拟 DOM，一个 fiber 就是一个 JavaScript 对象,包含了元素的信息、该元素的更新操作队列、类型。

21.react中的key有什么作用？

跟 Vue 一样, React 也存在 Diff 算法,而元素 key 属性的作用是用于判断元素是新创建的还是被移动的元素，从而减少不必要的元素渲染

22.说说react diff的原理是什么？

1️⃣tree层级
DOM节点跨层级的操作不做优化，只会对相同层级的节点进行比较
2️⃣conponent层级
如果是同一个类的组件，则会继续往下diff运算，如果不是一个类的组件，那么直接删除这个组件下的所有子节点，创建新的
3️⃣element层级
比较同一层级的节点，每个节点对应的层级用唯一的key作为标识

23.说说对react hooks的理解？解决了什么问题？

常见的hooks
1️⃣useState
在函数组件中通过useState 实现函数内部维护 state ,参数为 state 默认的值，返回值是一个数组，第一个值为当前的state ,第二个值为更新state 的函数
2️⃣useEffect
useEffect第一个参数接受一个回调数，默认情况下useEffect会在第一次渲染和更新之后都会执行,相当于在componentDidMount 和componentDidUpdate 两个生命周期函数中执行回调
3️⃣ useRef
4️⃣useReducer
管理多个相对关联的状态数据，定义一个reducer函数根据不同的action返回不同的新状态，在组件中调用useReducer,并传入reducer函数和状态的初始值，事件发生时,通过dispatch函数分派一个action对象
5️⃣useCallback
作用:在组件多次重新渲染的时候缓存函数
6️⃣ useMemo
作用:允许组件在Props没有改变的情况下跳过渲染

解决：hooks 能够更容易解决状态相关的重用的问题，每调用useHook一次都会生成一份独立的状态，通过自定义hook能够更好的封装我们的功能编写 hooks 为函数式编程，每个功能都包裹在函数中，使函数组件的功能得到了扩充，拥有了类组件相似的功能，拥有代码复用机制

24.如何提高组件的渲染效率？在react中如何避免不必要的render？

render 的触发时机就是类组件通过调用 setState 方法就会导致 render ，父组件一旦发生 render 渲染,子组件一定也会执行 render 渲染父组件渲染导致子组件渲染,子组件并没有发生任何改变，就会导致无谓的渲染。
解决方法如下:
1️⃣shouldComponentUpdate
通过shouldComponentUpdate生命周期函数来比对 state 和props，确定是否要重新渲染默认情况下返回 true 表示重新渲染,如果不希望组件重新渲染,返回 false 即可
2️⃣React.memo
React.memo 用来缓存组件的渲染,避免不必要的更新

25.react性能优化的手段有哪些？

避免使用内联函数
使用react fragments避免额外标记
使用Immutable
懒加载组件
事件绑定方式
服务端渲染
组件拆分
合理使用hooks
避免不必要的render

26.说说对react router理解？常用的router组件有些哪些？

react-router页面的url发生改变时，页面的显示结果根据url的变化而变化，页面不会刷新，从而实现单页面应用

react-router主要的包:
1️⃣react-router:实现了路由的核心功能
2️⃣react-router-dom: 基于react-router,加入了在浏览器运行环境下的一些功能
3️⃣react-router-native: 基于 react-router,加入了 react-native 运行环境下的一些功能
4️⃣react-router-config: 用于配置静态路由的工具库

27.react router有几种模式？实现原理？

React Router 两种模式 hash 模式和 history 模式对应的组件为:
HashRouter
通过window.addEventListener(‘hashChange’,callback) 监听 hash 值的变化,并传递给其嵌套的组件
然后通过 context 将location 数据往后代组件传递。

BrowserRouter
通过props 传进来的 path 与context 传进来的 pathname进行匹配，然后决定是否执行渲染组件

原理：改变 hash 值并不会导致浏览器向服务器发送请求，浏览器不发出请求,也就不会刷新页面，hash 值改变，触发全局 window 对象上的hashchange事件，hash模式路由就是利用 hashchange 事件监听 URL 的变化,从而进行 DOM 操作来模拟页面跳转。

28.在react中如何使用redux？项目结构是如何划分？

通过redux将整个应用状态存储到 store 中,组件可以派发 dispatch 行为action 给store其他组件通过订阅store中的状态state 来更新自身的视图
使用react-redux分成了两大核心:
1️⃣Provider
在redux 中存在一个store 用于存储 state ,将store 存放在顶层元素中，其他组件都被包裹在顶层元素之上，所有的组件都能够受到redux 的控制，都能够获取到 redux 中的数据

<Provider store = {store}>
<App />
<Provider>

2️⃣connection
connect 方法将 store 上的 getState 和dispatch 包装成组件的 props导入conect

29.说说对redux中间件的理解？常用的中间件有哪些？实现原理？

中间件是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础功能，衔接网络上应用系统的各个部分或不同的应用，达到资源共享、功能共享的目的。如果需要支持异步操作，或者支持错误处理、日志监控，这个过程就可以用上中间件

常用的中间件
redux-thunk：用于异步操作
redux-logger：用于日志记录

原理：所有中间件被放进了个数组然后嵌套执行，最后执行 store.dispatch，中间件内部 可以拿到getState和dispatch这两个方法

30.说说对immutable的理解？如何应用在react项目中？

Immutable不可改变的，在计算机中，即指一旦创建，就不能再被更改的数据，对Immutable对象的任何修改或添加删除操作都会返回一个新的Immutable对象，Immutable 实现的原理是持久化数据结构，用一种数据结构来保存数据当数据被修改时，会返回一个对象,使用旧数据创建新数据时，要保证旧数据同时可用且不变。
react中应用
使用 Immutable 可以给 React 应用带来性能的优化，主要体现在减少渲染的次数。

31.说说react服务端渲染怎么做？原理是什么？

react实现SSR有两种形式
1️⃣手动搭建一个SSR 框架
2️⃣使用成熟的SSR 框架，如 Next.JS

原理：
node server 接收客户端请求,得到当前的请求 ur 路径,然后在已有的路由表内查找到对应的组件，拿到需要请求的数据，将数据作为 props、context或者store 形式传入组件然后基于 react 内置的服务端渲染方法 renderToString() 把组件渲染为 html 字符串在把最终的 html进行输出前需要将数据注入到浏览器端浏览器开始进行渲染和节点对比,然后执行完成组件内事件绑定和一些交互，浏览器重用了服务端输出的 html节点，整个流程结束