Material-UI 到新的钩子 Reactjs？

Question

所有关于如何制作 reactJS 网站的新示例都显示了类似的示例

const NavBar = (params) => {
    return(
        <div>
        text
        </div>
    )
}
export default NavBar;

然而，material-UI 似乎显示了以下内容，这让我很难理解如何让选项卡与上面的新代码格式一起工作。构造函数在新格式下如何工作？

import React from 'react';
import {Tabs, Tab} from 'material-ui/Tabs';

const styles = {
  headline: {
    fontSize: 24,
    paddingTop: 16,
    marginBottom: 12,
    fontWeight: 400,
  },
};

export default class TabsExampleControlled extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      value: 'a',
    };
  }

  handleChange = (value) => {
    this.setState({
      value: value,
    });
  };

  render() {
    return (
      <Tabs
        value={this.state.value}
        onChange={this.handleChange}
      >
        <Tab label="Tab A" value="a">
          <div>
            <h2 style={styles.headline}>Controllable Tab A</h2>
            <p>
              Tabs are also controllable if you want to programmatically pass them their values.
              This allows for more functionality in Tabs such as not
              having any Tab selected or assigning them different values.
            </p>
          </div>
        </Tab>
        <Tab label="Tab B" value="b">
          <div>
            <h2 style={styles.headline}>Controllable Tab B</h2>
            <p>
              This is another example of a controllable tab. Remember, if you
              use controllable Tabs, you need to give all of your tabs values or else
              you wont be able to select them.
            </p>
          </div>
        </Tab>
      </Tabs>
    );
  }
}

编辑

我找到了我需要做的事情 通过使用 useState，我可以检查用户在哪个页面上，并确保这是用户第一次进入该站点，然后设置一个 const，然后允许我运行另一个 const 来设置需要处于活动状态的选项卡。

const firstTime = false;       
React.useState(() => {
          if(!firstTime && window.location.pathname === "/two"){
            //console.log('mounted or updated')
            firstTime = 1;
          }
        }
      );


    const [value, setValue] = React.useState(firstTime);

Answer 1

来自 MDN：

“构造函数方法是一种特殊的方法，用于创建和初始化在类中创建的对象。”

material-ui 示例是类组件，新示例是函数组件。函数组件不使用构造函数。

直到最近，当 Hooks API 被引入时，如果一个组件需要使用 State，它必须是一个类组件，但是有了 Hooks，现在可以在函数组件内部操作状态。我建议您阅读此内容。这是一个很好的开端： https://overreacted.io/how-are-function-components-different-from-classes/

以下是使用函数组件和钩子的重构版本：

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Tabs, Tab } from "@material-ui/core";

const styles = {
  headline: {
    fontSize: 24,
    paddingTop: 16,
    marginBottom: 12,
    fontWeight: 400
  }
};

const TabsExampleControlled = props => {
  const [value, setValue] = useState("a");

  return (
    <Tabs value={value} onChange={(event, value) => setValue(value)}>
      <Tab label="Tab A" value="a">
        <div>
          <h2 style={styles.headline}>Controllable Tab A</h2>
          <p>
            Tabs are also controllable if you want to programmatically pass them
            their values. This allows for more functionality in Tabs such as not
            having any Tab selected or assigning them different values.
          </p>
        </div>
      </Tab>
      <Tab label="Tab B" value="b">
        <div>
          <h2 style={styles.headline}>Controllable Tab B</h2>
          <p>
            This is another example of a controllable tab. Remember, if you use
            controllable Tabs, you need to give all of your tabs values or else
            you wont be able to select them.
          </p>
        </div>
      </Tab>
    </Tabs>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<TabsExampleControlled />, rootElement);

在这里查看https://codesandbox.io/s/material-ui-tabs-hooks-wkyzq