阅读 31

你会使用React组件么,比较喜欢哪一种组件

React组件

组件,类似于js函数,它接受任意参数(props),并返回用于描述页面展示内容的react元素

组件分为两类:class组件 与 class组件

1 class组件

class组件是由状态和声明周期的,继承于Component,实现于render方法。 例:用class组件实现一个clock

import React, {Component} from 'react'

export default class ClassComponent extends Component{
  constructor(props) {
    super(props)
    this.state = {
      datenew Date()
    }
  }
  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({
        datenew Date()
      })
    },1000)
  }
  componentWillUnmount(){
    cleanInterval(this.timer)
  }
  render(){
    const {date} = this.state
    return (
      <div>
        <h3>ClassComponent</h3>
        <p>{date.toLocaleString()}</p>
      </div>
    )
  }
}
复制代码

其中更新状态不可以直接修改,要使用this.setState。 上述的setInterval在组件卸载时要清除。

2 Function组件

Function组件在hooks出现之前是没有状态的概念的。React Hook是react 16.8之后提出的新特性。可以让组件和class组件一样有能力管理自己的状态。

import ClassComponent from './pages/classComponent.js'

function App(){
  return (
    <div className="App">
      <ClassComponent />
    </div>

  )
}
复制代码

下面用Function组件实现一个clock

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

export default FunctionComponent(props){
  const [date, setState] = useState(new Date())
  useEffect(() => {
    // 相当于componentDidMount、componentDidUpdate、componentWillUnmount
    const timer = setInterval(() => {
      setState(new Date())
    }, 1000)
    // 卸载时候 要清除
    return () => cleanInterval(timer)
  },[])
  //空数组,否则useEffect多次执行,不依赖任何数据,只要求执行一次
  return(
    <div>
      <h3>Function Component</h3>
      <p>{date.toLocaleString()}</p>
    </div>

  )
}
复制代码

其中useState,useEffect 都属于hooks。后面内容会介绍

文章分类
前端
文章标签