react 使用 useState hook 实现 class 类组件中的 setState 方法

最新推荐文章于 2023-01-28 13:11:26 发布

yjwlike

最新推荐文章于 2023-01-28 13:11:26 发布

阅读量725

点赞数 2

分类专栏：面试题 react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/m0_58239318/article/details/124971555

版权

本文探讨了一道面试题，即如何在React中使用useState Hook来实现类组件中的setState方法。作者通过分析思路、遇到的问题及解决方案，最终成功创建了一个自定义hook useStateInClass.js。问题的关键在于理解作用域，通过new Function创建新作用域以更新state。通过这个过程，深化了对React Hooks和作用域原理的理解。

摘要由CSDN通过智能技术生成

前言

很明显, 这是一道面试题, 下图是原题

初探

刚开始看到这个面试题, 心想这不就是一个自定义hook就可以解决的事吗, 于是就开始撸代码

思路

封装一个自定义hook 名为useStateInClass.js
useStateInClass 返回一个 state 和 setState
useStateInClass 保存state 状态和 setState回调
useStateInClass 在useEffect中, 进行调用

App.js 代码如下

import { useStateInClass} from './hook/useStateInClass'

function App() {
  let [state, setState] = useStateInClass({ stateA: 1, stateB: 2 })
  const handleClick = () => {
    setState({ stateA: Math.random() }, () => {
      console.log('state', state)
    })
  }

  return (
    <div className="App">
      <p>{J