如何将React类组件的this.state转为useState Hook并重构为函数组件

没问题，我来帮你把这个类组件转成函数式的，顺便拆解下useState的用法，保证你能看明白～

先看转换后的完整代码 #

import React, { useState } from 'react';

function Example() {
  // 用useState替代原来的this.state
  const [isOpen, setIsOpen] = useState(true);

  return (
    <IconSettings iconPath="/assets/icons">
      {isOpen ? (
        <AlertContainer>
          <Alert
            dismissible
            icon={<Icon category="utility" name="user" />}
            labels={{
              heading: 'Logged in as John Smith (johnsmith@acme.com).',
              headingLink: 'Log out',
            }}
            onClickHeadingLink={() => {
              console.log('Link clicked.');
            }}
            onRequestClose={() => {
              // 用setIsOpen替代this.setState
              setIsOpen(false);
            }}
          />
        </AlertContainer>
      ) : null}
    </IconSettings>
  );
}

关键转换点拆解 #

• 替换类结构为函数：直接把class Example extends React.Component改成function Example()（如果组件需要接收props，就写成function Example(props)），去掉constructor和super(props)，函数组件不需要这些初始化逻辑。
• 用useState替代this.state：
  • 首先要从React里导入useState：import React, { useState } from 'react';
  • 然后声明状态：const [isOpen, setIsOpen] = useState(true);
    • 这行是数组解构，isOpen对应原来的this.state.isOpen，是当前的状态值；
    • setIsOpen是专门用来更新这个状态的函数，对应原来的this.setState，调用它就能修改isOpen的值；
    • useState(true)里的true是状态的初始值，和原来this.state = { isOpen: true }的作用一样。
• 去掉this的引用：函数组件里没有this，所以原来的this.state.isOpen直接写成isOpen，this.setState({ isOpen: false })改成setIsOpen(false)就可以了。
• 事件处理逻辑不变：原来的箭头函数写法完全可以保留，函数组件里不需要考虑this绑定的问题，直接写就行。

内容的提问来源于stack exchange，提问作者HeathenINedeN