react知识点之useState、useEffect的使用(函数式组件,class组件的示例)

React 专栏收录该内容
14 篇文章 0 订阅

react的组件分为函数式组件和class组件,即一个有各种状态和生命周期,另外一个没有

示例

class组件实现实时刷新时间显示

import React, { Component } from "react";
export default class ClassComponent extends React.Component {
constructor(props) {
super(props);
// 使⽤用state属性维护状态,在构造函数中初始化状态
this.state = { date: new Date() };
}
componentDidMount() {
// 组件挂载之后启动定时器器每秒更更新状态
clearInterval(this.timerID);
}
componentDidUpdate() {
console.log("componentDidUpdate");
}
render() {
return <div>{this.state.date.toLocaleTimeString()}</div>;
}
}

function 组件实现实时时间刷新显示

import React, { useState, useEffect } from "react";
export function FunctionComponent(props) {
const [date, setDate] = useState(new Date());
useEffect(() => {//副作⽤用
const timer = setInterval(() => {
setDate(new Date());
}, 1000);
return () => clearInterval(timer);//组件卸载的时候执⾏行行
}, []);
return (
<div>
<h3>FunctionComponent</h3>
<p>{date.toLocaleTimeString()}</p>
</div>
);
}

知识点1

  1. class组件通常拥有状态和⽣生命周期,继承于Component,实现render⽅方法。
  2. 函数组件通常⽆无状态,仅关注内容展示,返回渲染结果即可
  3. 从React16.8开始引⼊入了了hooks,函数组件也能够拥有状态。

知识点2(useEffect,属于HOOK的内容)

  1. 可以把 useEffect Hook 看做componentDidMount , componentDidUpdate 和 componentWillUnmount 这三个函数的组合
  2. useEffect最后[]中括号中的参数表示当此参数更新时,其中的方法再次执行一遍,如果没有参数,则是空。
  3. return表示组件卸载的时候执行的动作,
  4. useEffect会在组件加载完成以后,执行一次,所以有第一条中,其可以控制三个生命周期
  5. 如果没有后面的参数,甚至没有[],即useEffect(()=>{}),这种情况下,每当页面中useState值发生变化,useEffect中的代码就会执行一次,这是不可取的!!

知识点3(useState,属于HOOK的内容)

  1. const [date, setDate] = useState(new Date());示例
  2. useState很简单,就相当于class函数式组件中的state,useState(值),其中的值表示初始化值,date表示接收值,setDate表示设置值
  • 3
    点赞
  • 1
    评论
  • 2
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值