React Hooks面试题整理
- React 加入 Hooks 的意义是什么?为什么 React 要加入Hooks 这一特性?
- 常用的Hooks有哪些?
- React Hooks api的原理:
- React Hooks如何模拟组件生命周期?
- Hooks相比HOC和Render Prop有哪些优点?
- Function Component与Class Component区别
- useEffect和useLayoutEffect区别?
- useState和setState区别?
- useReducer和redux区别?
- 如何自定义HOOK
- Hooks性能优化
- 怎么在高阶组件里面访问组件实例?
React 加入 Hooks 的意义是什么?为什么 React 要加入Hooks 这一特性?
为了解决一些component问题:
- 组件之间的逻辑状态难以复用
- 大型复杂的组件很难拆分
- Class语法的使用不友好
比如说:
- 类组件可以访问生命周期,函数组件不能
- 类组件可以定义维护state(状态),函数组件不可以
- 类组件中可以获取到实例化后的this,并基于这个this做一些操作,而函数组件不可以
- mixins:变量作用于来源不清、属性重名、Mixins引入过多会导致顺序冲突
- HOC和Render props:组件嵌套过多,不易渲染调试、会劫持props,会有漏洞
有了Hooks:
- Hooks 就是让你不必写class组件就可以用state和其他的React特性;
- 也可以编写自己的hooks在不同的组件之间复用
Hooks优点:
- 没有破坏性改动:完全可选的。 你无需重写任何已有代码就可以在一些组件中尝试 Hook。100% 向后兼容的。 Hook 不包含任何破坏性改动。
- 更容易复用代码:它通过自定义hooks来复用状态,从而解决了类组件逻辑难以复用的问题
- 函数式编程风格:函数式组件、状态保存在运行环境、每个功能都包裹在函数中,整体风格更清爽、优雅
- 代码量少,复用性高
- 更容易拆分
Hooks缺点(Hoosk有哪些坑):
- h