重学react(一)

原创于 2020-11-18 11:01:21 发布 · 160 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react

博客介绍了React组件的两种形式，即class组件和function组件，并以实现clock为例给出了相应代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react组件有两种形式，分为class组件跟function组件，以实现clock为例子，分别实现。代码如下

import React, {useState, useEffect} from 'react'

function App() {
  return (
    <div className="App">
      6546546
      <ClassComponent />
      <FunctionComponent />
    </div>
  );
}

export default App;


class ClassComponent extends React.Component {
  state= {
    num: new Date()
  }
  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({
        num: new Date()
      })
    }, 1000);
  }
  componentWillUnmount() {
    clearInterval(this.timer)
  }
  render() {
    const { num } = this.state;
    return (
      <>
        <div>{num.toLocaleTimeString()}</div>
      </>
    );
  }
}

const FunctionComponent = () => {
  const [num, setNum] = useState(new Date());
  // useEffect Hook 看做componentDidMount,componentDidUpdate和componentWillUnmount
  useEffect(() => {
    const timer = setInterval(() => {
      setNum(new Date())
    }, 1000);
    return () => clearInterval(timer)
  }, [])
  return(
    <div>{num.toLocaleTimeString()}</div>
  )
}