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

41次阅读

共计 2645 个字符，预计需要花费 7 分钟才能阅读完成。

最近看到一个对于 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 的形式思考”前，须要做一些思维上的转变。

正文完