使用 UseState 钩子和使用效果钩子答案

【问题标题】：Using the UseState hook and use effect hook使用 UseState 钩子和使用效果钩子
【发布时间】：2020-08-15 12:05:58
【问题描述】：

请问如何结合componentDidMount和componentDidupdate重写这段代码

我有其他代码或更确切地说是我需要引入代码的功能，作为基于类的组件，这是行不通的。

但是一个基于函数的组件，我将能够在代码中引入更多的函数。

谢谢。

var ps;

class Dashboard extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      backgroundColor: "black",
      activeColor: "info"
    };
    this.mainPanel = React.createRef();
  }
 

  componentDidMount() {
    if (navigator.platform.indexOf("Win") > -1) {
      ps = new PerfectScrollbar(this.mainPanel.current);
      document.body.classList.toggle("perfect-scrollbar-on");
    }
  }
  componentWillUnmount() {
    if (navigator.platform.indexOf("Win") > -1) {
      ps.destroy();
      document.body.classList.toggle("perfect-scrollbar-on");
    }
  }
  componentDidUpdate(e) {
    if (e.history.action === "PUSH") {
      this.mainPanel.current.scrollTop = 0;
      document.scrollingElement.scrollTop = 0;
    }
  }
  handleActiveClick = color => {
    this.setState({ activeColor: color });
  };
  handleBgClick = color => {
    this.setState({ backgroundColor: color });
  };

我所做的对更新不起作用。

var ps;
const Dashboard = (props) => {
  const[backgroundColor, setBackgroundColor] = useState("black");
  const[activeColor, setActiveColor] = useState("info");
  const [handleActiveClick, setHandleActiveClick] =useState({activeColor: 'color'});
  const [handleBgClick, setHandleBgClick] =useState({backgroundColor: 'color'});
  const mainPanel = useRef(null);


  useEffect(()=>{

    if (navigator.platform.indexOf("Win") > -1) {
      ps = new PerfectScrollbar(mainPanel.current);
      document.body.classList.toggle("perfect-scrollbar-on");
    } 
    return () =>{
      ps.destroy();
      document.body.classList.toggle("perfect-scrollbar-on");
  
    }
  },[]);


  useEffect((e)=>{
    if (e.history.action === "PUSH") {
      mainPanel.current.scrollTop = 0;
      document.scrollingElement.scrollTop = 0;
    }
  },['history']);

【问题讨论】：

对于componentDidMount，您使用useEffect 和一个空的依赖项数组。对于componentWillUnmount，只需从useEffect 返回一个具有所需功能的函数，并带有一个空的依赖数组（安装数组）。对于componentDidUpdate，您使用useEffect，然后添加“历史”作为依赖项。状态只是useState，引用只是useRef。这几乎就是您重新创建它所需的一切，谷歌搜索会向您展示所有这些的解释和示例。
请更新您对功能组件转换的尝试以及您遇到的问题。
@Jayce444 感谢您的指点。我能够轻松地解构代码。请查看更新。显然我没有得到历史部分......并且更新没有发生。
@DrewReese 感谢您的提醒。请查看我的想法和上面的错误。
useEffect 回调不带参数，在依赖数组中使用字符串常量意味着效果只会被触发一次。根据原始基于类的组件中的用法，它看起来像是以前的道具。您是否只是在路线更改时尝试滚动回页面顶部？如果我的推理不正确，您能解释一下所需的功能吗？

标签： reactjs function components react-hooks use-effect

【解决方案1】：

我试过这种方式

useEffect(() => {
    if (navigator.platform.indexOf("Win") > -1) {
        ps = new PerfectScrollbar(mainPanel.current);
        document.body.classList.toggle("perfect-scrollbar-on");
    }

    return () => {
        ps.destroy();
        document.body.classList.toggle("perfect-scrollbar-on");
    };
}, [actionPush(props)]);

function actionPush(props) {
    if (props.history.action === "PUSH") {
        console.log(mainPanel.current);
        mainPanel.current.scrollTop = 0;
        document.scrollingElement.scrollTop = 0;
    }
}

【讨论】：