【问题探讨】H5 UI渲染心智模型

2024-04-16 20:08

本文主要是介绍【问题探讨】H5 UI渲染心智模型,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目标

探讨H5 UI渲染心智模型,即阐述数据是依据什么样的逻辑渲染到界面上的。

本文思路

先通过一个示例讲述不同的数据渲染逻辑,然后讲两个延伸DEMO来着重说明CLASS和FUNCTION的特点;

示例,实现如下一个时钟,页面加载时开始1s跳动一次

时钟

实现

一,原生JS直接操作DOM

index.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><title>React App</title></head><body><!-- 写一个div元素标签用于挂载数据 --><div id="root" /><script type="text/javascript" src="./index.js"></script></body>
</html>

index.js

(() => { // 获取用于挂载数据的元素标签const root = document.getElementById('root')setInterval(() => {// 获取当前系统时间const currentTime = new Date( +new Date() + 8 * 3600 * 1000 ).toJSON().slice(0,19).replace("T"," ")// 将系统时间挂载到元素标签上root.innerText = "当前系统时间是:" + currentTime},1000)
})()
二,通过框架(vue、react、angular等)实现DATA => DOM同步

DATA CHNAGE => 生成新的虚拟DOM,比较与旧DOM 之间的DIFF => DOM CHANGE

1.1,CLASS组件的特点

带有实例this和生命周期(创建,更新,销毁等周期)的组件,组件所有内容(包括数据)都挂在this上,通过this可以获取的组件的最新状态。
在这里插入图片描述

1.2,CLASS组件实现时钟
import React from 'react';class ProfilePage extends React.Component {state={time: ''}componentDidMount() {setInterval(() => {// 获取当前系统时间const currentTime = new Date( +new Date() + 8 * 3600 * 1000 ).toJSON().slice(0,19).replace("T"," ")// 将系统时间赋值给statethis.setState({time: currentTime})},1000)}render() {return <div>{this.state.time}</div>;}
}export default ProfilePage;
2.1,FUNCTION组件的特点

没有实例和生命周期的纯函数组件,没有this,数据由hooks维护,可使用Hooks模拟生命周期特性;

什么是 Hooks?

Hooks 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数。

什么是useState?

在这里,useState 就是一个 Hook。通过在函数组件里调用它来给组件添加一些内部 state。

什么是useEffect?

a,你之前可能已经在 React 组件中执行过数据获取、订阅或者手动修改过 DOM。我们统一把这些操作称为“副作用”,或者简称为“作用”。
b,useEffect 就是一个 Effect Hook,给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的触发时机,只不过被合并成了一个 API。
c,当你调用 useEffect 时,就是在告诉 React 在完成对 DOM 的更改后运行你的“副作用”函数。由于副作用函数是在组件内声明的,所以它们可以访问到组件的 props 和 state。默认情况下,React 会在每次渲染后调用副作用函数 —— 包括第一次渲染的时候

// 触发时机等于componentDidMount+componentDidUpdate useEffect(() => {// do some thing})
// 添加依赖后,触发时机等于componentDidMountuseEffect(() => {// do some thing},[])
// 添加return后,,return的触发时机等于componentWillUnmount useEffect(() => {// do some thingreturn () => {// 触发时机等于componentWillUnmount}}, [])
2.2,FUNCTION组件实现时钟
import React, {useState, useEffect} from 'react';function ProfilePage() {const [time, changeTime] = useState('')useEffect(() => {setInterval(() => {// 获取当前系统时间const currentTime = new Date( +new Date() + 8 * 3600 * 1000 ).toJSON().slice(0,19).replace("T"," ")// 将系统时间赋值给statechangeTime(currentTime)},1000)},[])return (<div>{time}</div>);
}export default ProfilePage;
三,延伸DEMO
1,关注demo

点击关注,关注某个人的主页
在这里插入图片描述

1.1 公共代码
import React from "react";import ProfilePageFunction from './ProfilePageFunction';
import ProfilePageClass from './ProfilePageClass';class App extends React.Component {state = {user: '凌云',};render() {return (<><label><b>选择你想浏览的主页: </b><selectvalue={this.state.user}onChange={e => this.setState({ user: e.target.value })}><option value="凌云">凌云</option><option value="晓林">晓林</option><option value="江江">江江</option></select></label><h1>欢迎来到 {this.state.user}的 个人主页!</h1><p><ProfilePageFunction user={this.state.user} /><b> (function组件)</b></p><p><ProfilePageClass user={this.state.user} /><b> (class组件)</b></p></>)}
}
export default App;
1.2,CLASSS实现
import React from 'react';class ProfilePage extends React.Component {showMessage = () => {alert('已关注:' + this.props.user);};handleClick = () => {setTimeout(this.showMessage, 3000);};render() {return <button onClick={this.handleClick}>关注</button>;}
}export default ProfilePage;
1.3,FUNCTION实现
import React from 'react';function ProfilePage(props) {const showMessage = () => {alert('已关注: ' + props.user);};const handleClick = () => {setTimeout(showMessage, 3000);};return (<button onClick={handleClick}>关注</button>);
}export default ProfilePage;
1.4,正常情况下没问题,做一个特殊操作

在凌云的主页点击关注,然后在3秒内切换到晓林的主页。
此时,function组件正常;
class组件异常,3秒后,提示关注了晓林。

原因就是上面讲的:

CLASS组件数据挂载在this上,this是在时刻变化的。

处理方式1(其他处理方式不再展开),在发起关注时缓存关注的user
import React from 'react';class ProfilePage extends React.Component {showMessage = (user) => {alert('已关注:' + user);};handleClick = () => {const user = this.props.usersetTimeout(() => {this.showMessage(user)}, 3000);};render() {return <button onClick={this.handleClick}>关注</button>;}
}export default ProfilePage;
2,自增DEMO

实现一个一秒加一的自增计数功能
在这里插入图片描述

2.1, 公共代码
import React from "react";import ProfilePageFunction from './ProfilePageFunction';
import ProfilePageClass from './ProfilePageClass';class App extends React.Component {render() {return (<><div><b> (function)</b><ProfilePageFunction /></div><div><b> (class)</b><ProfilePageClass /></div></>)}
}
export default App;
2.2 CLASS实现
import React from 'react';class ProfilePage extends React.Component {state={count: 0}componentDidMount() {setInterval(() => {// 组件挂载时开启定时器,一秒加一this.setState({count: this.state.count + 1})},1000)}render() {return <div>{this.state.count}</div>;}
}export default ProfilePage;
2.3 FUNCTION实现
import React, {useState, useEffect} from 'react';function ProfilePage() {const [count, changeCount] = useState(0)useEffect(() => {setInterval(() => {// 组件挂载时开启定时器,一秒加一changeCount(count + 1)},1000)}, [])return (<div>{count}</div>);
}export default ProfilePage;
2.4,运行后发现

CLASS实现正常,
FUNCTION实现异常:界面从0到1之后,就不走了

原因是:

添加 [ ] 依赖后的useEffect的确在触发时机上和componentDidMount一样,只会在function组件第一次渲染的时候执行一次,后面不再执行,但是它因为没有this,所以这里面拿到的count永远都是初始count=0;

  useEffect(() => {setInterval(() => {// 组件挂载时开启定时器,一秒加一changeCount(count + 1)},1000)}, [])
处理方式1(其他方式不再展开),使用 useRef 来跨越渲染周期存储数据(但是它和 useState 的区别,除了可以跨越渲染周期存储数据,同时对它修改也不会引起组件重新渲染)
import React, {useState, useEffect, useRef } from 'react';function ProfilePage() {const [count, changeCount] = useState(0)const coutRef = useRef(0)const startAdd = () => {setInterval(() => {// 一秒加一coutRef.current = coutRef.current + 1changeCount(coutRef.current)},1000)}useEffect(() => {// 组件挂载时开启定时器startAdd()}, [])return (<div>{count}</div>);
}export default ProfilePage;
参考文档:

1, Dan Abramov博客: 函数式组件与类组件有何不同?
https://overreacted.io/zh-hans/how-are-function-components-different-from-classes/
2,react官方文档:使用Effect Hook
https://react.docschina.org/docs/hooks-effect.html

这篇关于【问题探讨】H5 UI渲染心智模型的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/909778

相关文章

Java的IO模型、Netty原理解析

《Java的IO模型、Netty原理解析》Java的I/O是以流的方式进行数据输入输出的,Java的类库涉及很多领域的IO内容:标准的输入输出,文件的操作、网络上的数据传输流、字符串流、对象流等,这篇... 目录1.什么是IO2.同步与异步、阻塞与非阻塞3.三种IO模型BIO(blocking I/O)NI

SpringBoot启动报错的11个高频问题排查与解决终极指南

《SpringBoot启动报错的11个高频问题排查与解决终极指南》这篇文章主要为大家详细介绍了SpringBoot启动报错的11个高频问题的排查与解决,文中的示例代码讲解详细,感兴趣的小伙伴可以了解一... 目录1. 依赖冲突:NoSuchMethodError 的终极解法2. Bean注入失败:No qu

基于Flask框架添加多个AI模型的API并进行交互

《基于Flask框架添加多个AI模型的API并进行交互》:本文主要介绍如何基于Flask框架开发AI模型API管理系统,允许用户添加、删除不同AI模型的API密钥,感兴趣的可以了解下... 目录1. 概述2. 后端代码说明2.1 依赖库导入2.2 应用初始化2.3 API 存储字典2.4 路由函数2.5 应

MySQL新增字段后Java实体未更新的潜在问题与解决方案

《MySQL新增字段后Java实体未更新的潜在问题与解决方案》在Java+MySQL的开发中,我们通常使用ORM框架来映射数据库表与Java对象,但有时候,数据库表结构变更(如新增字段)后,开发人员可... 目录引言1. 问题背景:数据库与 Java 实体不同步1.1 常见场景1.2 示例代码2. 不同操作

如何解决mysql出现Incorrect string value for column ‘表项‘ at row 1错误问题

《如何解决mysql出现Incorrectstringvalueforcolumn‘表项‘atrow1错误问题》:本文主要介绍如何解决mysql出现Incorrectstringv... 目录mysql出现Incorrect string value for column ‘表项‘ at row 1错误报错

如何解决Spring MVC中响应乱码问题

《如何解决SpringMVC中响应乱码问题》:本文主要介绍如何解决SpringMVC中响应乱码问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring MVC最新响应中乱码解决方式以前的解决办法这是比较通用的一种方法总结Spring MVC最新响应中乱码解

pip无法安装osgeo失败的问题解决

《pip无法安装osgeo失败的问题解决》本文主要介绍了pip无法安装osgeo失败的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一... 进入官方提供的扩展包下载网站寻找版本适配的whl文件注意:要选择cp(python版本)和你py

解决Java中基于GeoTools的Shapefile读取乱码的问题

《解决Java中基于GeoTools的Shapefile读取乱码的问题》本文主要讨论了在使用Java编程语言进行地理信息数据解析时遇到的Shapefile属性信息乱码问题,以及根据不同的编码设置进行属... 目录前言1、Shapefile属性字段编码的情况:一、Shp文件常见的字符集编码1、System编码

Spring MVC使用视图解析的问题解读

《SpringMVC使用视图解析的问题解读》:本文主要介绍SpringMVC使用视图解析的问题解读,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Spring MVC使用视图解析1. 会使用视图解析的情况2. 不会使用视图解析的情况总结Spring MVC使用视图

Redis解决缓存击穿问题的两种方法

《Redis解决缓存击穿问题的两种方法》缓存击穿问题也叫热点Key问题,就是⼀个被高并发访问并且缓存重建业务较复杂的key突然失效了,无数的请求访问会在瞬间给数据库带来巨大的冲击,本文给大家介绍了Re... 目录引言解决办法互斥锁(强一致,性能差)逻辑过期(高可用,性能优)设计逻辑过期时间引言缓存击穿:给