React Hooks面试题

React Hooks面试题整理

• React 加入 Hooks 的意义是什么？为什么 React 要加入Hooks 这一特性？
• • if else条件判断里使用hooks有什么问题
  • hooks闭包的坑有哪些？如何解决
• 常用的Hooks有哪些？
• • useEffect为什么有时候会出现无限重复请求的问题
  • useEffect的依赖项里类数组根据什么来判断有没有值变化
• React Hooks api的原理：
• React Hooks如何模拟组件生命周期？
• • 模拟的生命周期和class中的生命周期有什么区别吗？
• Hooks相比HOC和Render Prop有哪些优点？
• Function Component与Class Component区别
• useEffect和useLayoutEffect区别？
• useState和setState区别？
• • 两者参数对比
  • useState中的第二个参数更新状态和class中的this.setState区别？
  • 用useState实现state和setState功能？
• useReducer和redux区别？
• 如何自定义HOOK
• Hooks性能优化
• 怎么在高阶组件里面访问组件实例?

React 加入 Hooks 的意义是什么？为什么 React 要加入Hooks 这一特性？

为了解决一些component问题：

1. 组件之间的逻辑状态难以复用
2. 大型复杂的组件很难拆分
3. Class语法的使用不友好

比如说：

• 类组件可以访问生命周期，函数组件不能
• 类组件可以定义维护state(状态)，函数组件不可以
• 类组件中可以获取到实例化后的this,并基于这个this做一些操作，而函数组件不可以
• mixins:变量作用于来源不清、属性重名、Mixins引入过多会导致顺序冲突
• HOC和Render props：组件嵌套过多，不易渲染调试、会劫持props,会有漏洞

有了Hooks:

• Hooks 就是让你不必写class组件就可以用state和其他的React特性；
• 也可以编写自己的hooks在不同的组件之间复用

Hooks优点:

• 没有破坏性改动：完全可选的。 你无需重写任何已有代码就可以在一些组件中尝试 Hook。100% 向后兼容的。 Hook 不包含任何破坏性改动。
• 更容易复用代码：它通过自定义hooks来复用状态，从而解决了类组件逻辑难以复用的问题
• 函数式编程风格：函数式组件、状态保存在运行环境、每个功能都包裹在函数中，整体风格更清爽、优雅
• 代码量少，复用性高
• 更容易拆分

Hooks缺点(Hoosk有哪些坑):

• hooks 是 React 16.8 的新增特性、以前版本的就别想了
• 状态不同