Q: [高频面试题] React Hooks 为什么会被引入, 其想要解决什么问题
A:
React Hook 在 16.8 版本被引入, 它可以让你在不使用 class 的情况下使用 state 和其他 React 特性
1. 组件之间难以复用状态逻辑. 此前解决该问题的方法是 render props 个 高阶组件. 这类方式都需要重新的去组织组件结构, 如果你用 React DevTools 看一下应用, 你会发现有很多 provider, consumer, render props 和 高阶组件, 形成了嵌套地域. React Hooks 可以让你在不改变组件结构的情况下复用状态逻辑.
2. 复杂组件变得难以理解. 你可能会在 componentDidMount 和 componentDidUpdate 中发起请求来获取数据. 你可能会在 componentDidMount 中绑定事件, 然后在 componentWillUnmount 取消事件监听. 看到了吗? 绑定事件和取消绑定事件这对本来需要同步去做的事情, 被拆分到了不同的函数中, 并且绑定事件和发起请求这两个不相关的行为被放到了同一个函数里面. React Hooks 将组件中相互关联的部分拆分成更小的函数, 而非按照生命周期进行拆分.
3. class 难以理解, 你必须去理解 this 在 JavaScript 中的运作方式, 这与其他语言有着巨大差异. 没有稳定的语法提案, 这些代码非常冗余. React Hooks 使你在不使用 class 的情况下可以使用更多的 React 特性.
Note: 其实第三点我感触不深, 我对于其他语言没有太多的了解. 至于说稳定的语法提案, 有了 babel, 对于平时的使用也不会有太大的影响.
A:
React Hook 在 16.8 版本被引入, 它可以让你在不使用 class 的情况下使用 state 和其他 React 特性
1. 组件之间难以复用状态逻辑. 此前解决该问题的方法是 render props 个 高阶组件. 这类方式都需要重新的去组织组件结构, 如果你用 React DevTools 看一下应用, 你会发现有很多 provider, consumer, render props 和 高阶组件, 形成了嵌套地域. React Hooks 可以让你在不改变组件结构的情况下复用状态逻辑.
2. 复杂组件变得难以理解. 你可能会在 componentDidMount 和 componentDidUpdate 中发起请求来获取数据. 你可能会在 componentDidMount 中绑定事件, 然后在 componentWillUnmount 取消事件监听. 看到了吗? 绑定事件和取消绑定事件这对本来需要同步去做的事情, 被拆分到了不同的函数中, 并且绑定事件和发起请求这两个不相关的行为被放到了同一个函数里面. React Hooks 将组件中相互关联的部分拆分成更小的函数, 而非按照生命周期进行拆分.
3. class 难以理解, 你必须去理解 this 在 JavaScript 中的运作方式, 这与其他语言有着巨大差异. 没有稳定的语法提案, 这些代码非常冗余. React Hooks 使你在不使用 class 的情况下可以使用更多的 React 特性.
Note: 其实第三点我感触不深, 我对于其他语言没有太多的了解. 至于说稳定的语法提案, 有了 babel, 对于平时的使用也不会有太大的影响.
展开
3
17