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

Posted 2023-02-23

【中文标题】使用 UseState 钩子和使用效果钩子

【英文标题】：Using the UseState hook and use effect hook

【发布时间】：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 回调不带参数，在依赖数组中使用字符串常量意味着效果只会被触发一次。根据原始基于类的组件中的用法，它看起来像是以前的道具。您是否只是在路线更改时尝试滚动回页面顶部？如果我的推理不正确，您能解释一下所需的功能吗？

【参考方案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;