乐趣区

关于react.js:ReactHooks-面试解答

jiezi

最近看到一个对于 React 的面试题，是京东技术三面的题目，感觉很有意思，一起来看看：

React 退出 Hooks 的意义是什么？或者说一下为什么 React 要退出 Hooks 这一个性？最初举例说一下 Hooks 的根本实现原理；

首先，咱们看一下典型的两个 Hooks 的根本应用，间接看代码，这里就不细说了；

useState 根本应用：

// 引入 useState
import React, {useState} from 'react'

function App() {
  // 应用
  const [count, setCount] = useState(1);
  return (
    <div>
      <h2> useState </h2>
      <p>{count}</p>
      {/* 调用 setCount 办法 */}
      <button onClick={() => setCount(count + 1)}> 加 1 </button>
    </div>
  )
}

export default App

useEffect：

import React, {useState, useEffect} from 'react'
import ReactDom from 'react-dom'

function App() {const [count, setCount] = useState(1)

  // 组件挂载实现之后执行 && 组件数据更新实现之后执行
  // useEffect(() => {//   console.log('666')
  // })


  // 组件挂载实现之后执行
  // useEffect(()=>{//   console.log(678)
  // },[])


  // 组件被卸载之前执行 (引入 react-dom 进行卸载测试)
  useEffect(()=>{return ()=>{console.log('组件被卸载了')
    }
  })


  return (
    <div>
      <h2>useEffect</h2>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}> 加 1 </button>

      {/* 卸载组件 */}
      <button onClick={()=>ReactDom.unmountComponentAtNode(document.getElementById('root'))}> 卸载组件 </button>
    </div>
  )
}

export default App

回到后面的问题，其实这样的问题并没有什么标准答案，然而咱们能够换位思考，站在面试官的角度想一下，为什么会问这样的问题？无非就是想考查咱们对 Hooks 最根本的应用状况以及对 Hooks 设计理念的集体思考；
其实在 React 官网文档中，曾经给出了答案，奈何很多人就是不看文档啊；
Hook 简介 – React (docschina.org)


文档中的“动机”就很好的解释了为什么 React 要退出 Hooks 个性，总结来说就是三个基本要素：
1：组件之间的逻辑状态难以复用；
2：大型简单的组件很难拆分；
3：Class 语法的应用不敌对；

总的来说，实际上就是类组件在多年的利用实际中，发现了很多无奈防止问题而又难以解决，而绝对类组件，函数组件又太过于简陋，比方，类组件能够拜访生命周期办法，函数组件不能；类组件中能够定义并保护 state（状态），而函数组件不能够；类组件中能够获取到实例化后的 this，并基于这个 this 做各种各样的事件，而函数组件不能够；

然而，函数式编程形式在 JS 中的确比 Class 的面向对象形式更加敌对直观，那么只有可能将函数的组件能力补齐，也就解决了下面的问题，而如果间接批改函数组件的能力，势必会造成更大的老本，最好的形式就是凋谢对应接口进行调用，非侵入式引入组件能力，也就是咱们当初看到的 Hooks 了；

明确了与起因，面试中的问题也就迎刃而解了，基本思路就是先论述在没有 Hooks 的时候，类组件有哪些问题，函数组件有哪些有余，而 Hooks 就是解决这些问题呈现的；这也就是 Hooks 呈现的意义了，那么接着，咱们再来解答下一个问题，Hooks 的设计理念是什么呢？
咱们先用代码来模拟一个根本的 Hooks 的实现过程，重写 useState :

import React from 'react'
// 导入 dom, 用于更新组件
import ReactDom from 'react-dom'

let state
function useState(initState) {
  // 判断 state 是否是初始化
  state = state ? state : initState
  function setState(newState) {
    // 更新数据
    state = newState
    // 调用函数，更新组件
    render()}

  return [state, setState]
}

// 从新渲染组件
function render() {ReactDom.render(<App />, document.getElementById('root'))
}

function App() {
  // 应用自定义 useState 
  const [count, setCount] = useState(1);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}> 加 1 </button>
    </div>
  )
}

export default App

Rudi Yardley 在 2018 年的时候写过一篇文章《React hooks: not magic, just arrays》，具体地阐释了它的设计原理，感兴趣的话能够找来看一下，下面案例，其实就是文章中用到的，通过在函数中调用 useState 会返回以后状态与更新状态的函数。count 的初始值是 1，而后，通过 useState 赋值初始值，而后获取以后状态 state 与函数 setState。那么在点击按钮时调用 setCount，批改 count 的值。实质上 state hook 代替了类组件中 setState 的作用。

个别状况下，一段激情的论述之后都是要上价值的，所以，咱也来一段；

React 团队当然分明，新加一个全新的概念，对咱们开发者来说是一个很高的学习老本，因而官网为好奇的读者筹备了 具体的征求意见文档，在文档中用更多细节深刻探讨了 React 推动这件事的动机，也在具体设计决策和相干先进技术上提供了额定的视角。

最重要的是，Hook 和现有代码能够同时工作，你能够渐进式地应用他们。不必急着迁徙到 Hook。咱们倡议防止任何“大规模重写”，尤其是对于现有的、简单的 class 组件。开始“用 Hook 的形式思考”前，须要做一些思维上的转变。

退出移动版