0.什么是React
- react.js是一个用于构建用户界面的javascript库，开发者通过组件化开发的方式去描述UI，并将UI的渲染逻辑和业务逻辑分开来。
-
主要特点有：
1.组件化：将界面拆分成多个组件，并且每个组件都有独立的渲染方法
2.单项数据流：数据只能从顶部组件底级组件传递，不允许底部修改顶部的数据
3.虚拟Dom：它在内存中创建一个js对象为基础的虚拟dom，当数据或者视图发生变化时，将新旧Dom进行比较，找出需要改变的部分，进行批量的更新改变。从而提升性能
4. 使用jsx语法，使得代码更加的清晰易读。
1. 什么是虚拟DOM
虚拟 DOM是一种浏览器端 Web 应用程序中的一种技术，它可以在内存中创建一棵以 JavaScript 对象为基础的虚拟 DOM 树，在数据更新或视图发生变化时，通过比较新旧虚拟 DOM 树的差异，批量更新只需要真正改变的部分。这样做可以避免对整个页面进行重排重绘，因此可以提升 Web 应用程序的渲染效率。
2.类组件和函数组件之间的区别是什么？
react 组件分为两种【有状态组件】和【无状态组件】
- 类组件属于
有状态组件，它就是有一个完整的react页面，能够使用react的生命周期函数，并且他有this- 函数组件属于
无状态组件, 只能接收props渲染到页面，没有this，不能使用生命周期钩子.- 正是因为函数组件 不需要实例化，所以函数组件性能要高于类组件，为了提高性能，尽量使用函数组件
注：在 React16.8版本之后，引入了 Hooks 特性，使得我们可以在无状态组件中使用类似于类组件的方式来管理状态数据，通过使用 useState，useEffect 等钩子函数，实现在函数式组件中保存状态、管理副作用等功能。这样就可以实现类似于类组件的功能，实现了有状态组件的特性，因此被称之为 “有状态的函数式组件”或者“ Hook 组件”。
因此，Hook 组件既可以有状态，也可以是无状态组件，具体看我们在使用 Hook 的时候是不是在函数式组件中声明和使用它们。
3.react中refs是什么？
- 在 React 中，ref 是一个用于访问在组件中的 DOM 元素或者类组件实例的特殊属性。它可以用来直接操作 DOM 元素或子组件，或者获取某个组件实例的引用。
- 在类组件中，我们可以通过 React.createRef()来定义ref，通过 this.ref.current 来进行使用
- 在hook有定义好的
useRef来进行定义ref ，通过 ref.current来进行使用
4.state和props区别是什么？
- 相同点：都是普通的js对象，他们包含着影响渲染输出的信息
- 不同点：state是组件自己管理数据，控制自己的状态，可变
props是外部传入的数据参数，不可变
5.在构造函数调用super并将props作为参数传入的作用是啥？
在调用 super() 方法之前，子类构造函数无法使用this引用，
ES6 子类也是如此。将 props 参数传递给 super() 调用的主要原因是在子构造函数中能够通过this.props来获取传入的 props。
6.React生命周期函数
| 钩子函数 | 触发的行为 | 在此阶段可以做的事情 |
|---|---|---|
| componentWillMount | 在渲染之前执行 | 用于根组件中的 App 级配置 |
| componentDidMount | 在第一次渲染之后执行 | 可以在这里做AJAX请求，DOM 的操作或状态更新以及设置事件监听器。 |
| componentWillReceiveProps | 在初始化render的时候不会执行,它会在组件接受到新的状态(Props)时被触发 | 一般用于父组件状态更新时子组件的重新渲染 |
| shouldComponentUpdate | 根据特定条件返回 true 或 false。 | 如果你希望更新组件，请返回true* 否则返回 false。默认情况下，它返回 false。 |
| componentWillUpdate | 在 DOM 中进行渲染之前调用 | -------- |
| componentDidUpdate | 它主要用于更新DOM以响应props或state更改。 | -------- |
| componentWillUnmount | 从 DOM 卸载组件后调用。用于清理内存空间。 | -------- |
注：在hook中没有生命周期，但是可以使用 useState，useEffect 等钩子函数，实现在函数式组件中保存状态、管理副作用等功能
7. 什么是 React Context ?
原因： 传统的react组件，父组件向子组件进行传参，子组件通过props进行接收，再往复循环传递给更深层 次的子组件，这样是比较臃肿和麻烦的，所有有了 React Context
- Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性
- 在类组件中我们需要通过
React.createContext来进行新建一个content ，在父组件中通过Provider(发布者)的value属性进行参数设置 。
在需要用更深次子组件中通过Consumer(消费者)获取到value上的值，从而达到跨组件传参的目的 。 - 在hook组件中也是需要用
React.createContext来进行新建一个content, 在父组件中通过Provider(发布者)的value属性进行参数设置
但是， 可以通过内置的hook方法useContext来进行获取value上的值。
详细地址
8.Redux 是什么?
Redux 是一个用于简化管理应用状态（state）的 JavaScript 库
9.列出 Redux 的组件
- Action – 这是一个用来描述发生了什么事情的对象。
- Reducer – 这是一个确定状态将如何变化的地方。
- Store – 整个程序的状态/对象树保存在Store中。
- View – 只显示 Store 提供的数据。
10.React 和 Jquery 的区别是什么 ？
Reac和Jquery是两种不同的工具，React是一个用来构建用户界面的库，而Jquery是用来操作DOM的库
相比jquery，React的优势有：
- 更高效的虚拟dom机制，可以更快的更新页面，并且避免了直接的操作dom
- 更加的组件化开发，使得代码易维护性更高
- 更好的数据绑定和状态管理，可以使得组件之间的数据传递更加的直白简单
11.我们为什么要避免直接操作DOM元素 ？
- 性能问题：每次直接的操作DOM元素，都会使得浏览器重新的渲染整个页面。
-
容易出错：当DOM元素的结构发生变化或者更复杂的时候，就会容易出错，尤其是增加了代码的
耦合度。 - 不易维护：操作DOM会使业务逻辑显得混乱，从而不易维护。
13.虚拟DOM为什么能减少页面重新的渲染
- 减少真实的DOM操作，虚拟DOM是内存中的js的对象，我们直接对虚拟DOM操作，这样可以减少对真实DOM的操作次数，从而达到减少页面重排、重绘的问题
- 批量操作DOM：虚拟DOM会将需要更新的组件批量处理，然后统一更新到真实DOM上，从而减少对DOM的操作，提高渲染效率。
- Diff算法 虚拟 DOM 在更新组件时，会通过 diff 算法，只更新需要更新的部分，减少了不必要的更新，从而降低了浏览器的计算和渲染时间。
12.axios和fetch的区别？
最根本区别：
Fetch是浏览器原生提供的一种HTTP请求API
Axios需要引入Axios库
Axios是对XMLHttpRequest的封装， Fetch是一种新的获取资源的接口方式，并不是对XMLHttpRequest的封装。
Axios 和Fetch对比：
- axios请求可以直接设置timeout属性来控制响应超时
fetch请求需要使用AbortController属性，使用起来没有axios方便 - Axios也更加灵活和可控，可以对请求和响应进行拦截和处理。
Fetch没有拦截器功能，但是要实现该功能并不难，直接重写全局Fetch方法就可以办到。 - Axios会将返回的数据自动进行JSON转换
Fetch则不同，它需要使用者进行手动转化。 - 浏览器原生支持
Fetch唯一碾压Axios的一点就是现代浏览器的原生支持。
在当前网页打开Chrome的控制台使用Fetch几乎不需要什么配置就可以直接进行请求。
Fetch和Axios到底有什么区别?
13.setInterval 中为什么useState 必须用函数式赋值
- setInterval函数是在组件渲染时启动的，
定时器会持续运行并执行指定的代码块。 - 如果使用非函数式赋值方式，则在组件重新渲染时，
闭包变量取得的状态值可能不再是最新的值(即切断了更新链)，导致状态更新异常或者出现其他问题。 - 而使用函数式赋值，可以保证每次执行的状态更新是基于最新的状态值进行计算的，避免了可能出现的闭包陷阱问题。
- 因此，在setInterval 中使用函数式赋值方式来更新状态，可以确保更新状态时是在最新状态的基础上进行计算，保证了状态更新的准确性和可靠性。
