后端程序员入门react笔记(四)-综合运用,写一个小demo

样式模块化

有时候我们会遇到这样的问题,有两个css对一个class声明了样式,这样的话后引入的css会覆盖前面的css样式,导致样式冲突,那么我们怎么解决这种问题呢,我们可以使用样式的模块化,我们起名一个index.module.css和一个content.module.css
在这里插入图片描述

  • 我们在代码中这样使用
import React from "react";
import index from "./css/index.module.css";
import content from "./css/content.module.css";class Hello extends React.Component {render() {console.log("i am render")return (<ul><h1 className={index.title}>i am index.css</h1><h1 className={content.title}>i am content.css</h1></ul>)}
}
//导出组件
export default Hello;

Webstorm中的快捷键

  • rcc+tab键:用ES6模块系统创建一个React组件类
import React, {Component} from 'react';class Hello extends Component {render() {return (<div></div>);}
}export default Hello;
  • rccp+tab键:创建一个带有PropTypes和ES6模块系统的React组件类
import React, {Component} from 'react';
import PropTypes from 'prop-types';class Hello extends Component {render() {return (<div></div>);}
}Hello.propTypes = {};export default Hello;
  • rcfc+tab键:创建一个带有PropTypes和所有生命周期方法以及ES6模块系统的React组件类
  • rcjc+tab键:用ES6模块系统创建一个React组件类(无导出)
  • rdp+tab键:快速生成defaultProps
  • rpc+tab键:用PropTypes和ES6 moudle系统创建一个React纯组件类
  • rrc+tab键:创建一个连接到redux的React组件类
  • rrdc+tab键:创建一个通过dispatch连接到redux的React组件类
  • rsc+tab键:创建没有PropTypes和ES6模块系统的无状态React组件
  • rscp+tab键:创建有PropTypes和ES6模块系统的无状态React组件
  • rsf+tab键:以命名函数的形式创建无状态的React组件,不使用PropTypes
  • rsfp+tab键:使用PropTypes将无状态的React组件作为命名函数创建
  • rsi+tab键:创建无状态的React组件,不使用PropTypes和ES6模块系统,但使用隐式返回和道具
  • rwwd+tab键:在没有导入的情况下,在ES6模块系统中创建一个有构造函数、空状态、proptypes和导出的React组件类。(主要用于React时,proptype由webpack提供插件提供)

组件化编码

我们通过前面应该也能认识到,我们写react,包括npm运行react,其实都是从index.js入口文件开始,那么index.js的格式至关重要

//引入核心库
import React from 'react';
//引入dom库
import ReactDOM from 'react-dom';
//引入组件
import Hello from './components/Hello';
ReactDOM.render(<Hello />,document.getElementById('root'))

拆分组件的原则

  • 单一职责原则:每个组件只负责一项功能,这样可以使组件的代码更加简洁易读,并且方便维护和重用。

  • 可复用性:每个组件都应该尽量独立,以便在其他地方重复使用。

  • 组件之间的耦合度:组件之间应该尽量避免耦合,这样可以使得组件的代码更加灵活,便于维护和修改。

  • 让组件尽可能小:尽可能使组件的代码行数少,这样可以使代码更易读,并且方便维护。

  • 可读性:组件的代码应该有良好的结构,并且有适当的注释,便于阅读和理解。

案列 TodoList

页面渲染

我先把一个没有任何功能的页面渲染出来,给一些初始数据

  • 我们在入口文件中,分别声明 引入的核心文件,dom库,和组件
//引入核心库
import React from 'react';
//引入dom库
import ReactDOM from 'react-dom';
//引入组件
import App from "./App";
ReactDOM.render(<App />,document.getElementById('root'))
  • 在App组件初始化一些数据并返回页面结构,并将初始化数据通过props传给list
import React, {Component} from 'react';
import "./App.css"
import Header from "./components/Header/Header"
import Footer from "./components/Footer/Footer"
import List from "./components/List/List"
class App extends Component {//初始状态state={todos:[{id:1,text:"吃饭",done:false},{id:2,text:"睡觉",done:false},{id:3,text:"打豆豆",done:false},{id:4,text:"看动画",done:false}]}render() {return (<div className="todo-container"><div className="todo-wrap">{/*引入header组件*/}<Header />{/*引入list组件*/}<List data={this.state.todos} />{/*引入Footer组件*/}<Footer /></div></div>);}
}export default App;
  • List.jsx
import React, {Component} from 'react';
import Item from "../Item/Item";
import "./List.css"
class List extends Component {//限制属性类型render() {const todos = this.props.data;return (<ul className="todo-main">{todos.map((todo, index) => {// 将todo对象作为props传给Item组件  ...默认和对象同名return <Item key={todo.id} {...todo}></Item>;})}</ul>);}
}export default List;
  • Item.jsx
import React, {Component} from 'react';
import "./Item.css"class Item extends Component {render() {const {id,text,done}=this.propsreturn (<li style={{backgroundColor: 'white'}}><label ><input type="checkbox"/><span>{text}</span></label><button className="btn btn-danger" style={{display:'none'}}>删除</button></li>);}
}
export default Item;
  • Header.jsx
import React, {Component} from 'react';class Header extends Component {render() {return (<div className="todo-header"><input type="text" placeholder="请输入你的任务名称,按回车键确认"/></div>);}
}
export default Header;
  • Footer.jsx
import React, {Component} from 'react';class Footer extends Component {render() {return (<div className="todo-footer"><label><input type="checkbox"/><span><span>已经完成2/全部5</span></span></label><button className="btn btn-danger">清除已完成任务</button></div>);}
}export default Footer;
  • 最终样式如下
    在这里插入图片描述

功能实现

鼠标悬浮

  • 首先我们来实现第一个功能,从简单功能入手,鼠标悬浮,列表背景色变色,并展示删除按钮,触发事件是onMouseEnter,鼠标离开恢复原状,触发事件是onMouseLeave,展示是否完成的状态,我们开始编写
class Item extends Component {//定义状态state={mouse:false}//接收参数handleMouse=(flag)=>{return ()=>{this.setState({mouse:flag})}}render() {const {id,text,done}=this.propsconst flag=this.state.mousereturn (                                                                  //传入参数<li style={{backgroundColor: flag?'#ddd':'white'}} onMouseEnter={this.handleMouse(true)}onMouseLeave={this.handleMouse(false)}><label ><input type="checkbox" checked={done}/><span>{text}</span></label><button className="btn btn-danger" style={{display:flag?'block':'none'}}>删除</button></li>);}
}

勾选和删除

  • 实现勾选和删除功能,当点击选中按钮的时候,触发的操作是onChange,删除按钮的触发事件是onClick,我们来实现一下,因为我们操作的数据来源于App.jsx的state,为了方便操作数据,我们将方法写在App.jsx里面,然后通过props传递给组件
    updateTodo=(id,done)=>{const todos=this.state.todos//遍历找到对应的todo,创建一个新的数组对象const newTodos=todos.map((todo)=>{if (todo.id===id){//改变状态return {...todo,done:done}}else{return todo}})this.setState({todos:newTodos})}deleteTodo=(id)=>{const todos=this.state.todosconst newTodos=todos.filter((todo)=>{return todo.id !==id})this.setState({todos:newTodos})}
  • Item.jsx
    handelChange=(id)=>{return (e)=>{//根据id和checked状态更新数据this.props.updateTodo(id,e.target.checked)}}del=(id)=>{return ()=>{this.props.deleteTodo(id)}}render() {const {id,text,done}=this.propsconst flag=this.state.mousereturn (                                                                  //传入参数<li style={{backgroundColor: flag?'#ddd':'white'}} onMouseEnter={this.handelMouse(true)}onMouseLeave={this.handelMouse(false)}><label ><input type="checkbox" checked={done}  onChange={this.handelChange(id)}/><span>{text}</span></label><button className="btn btn-danger" onClick={this.del(id)} style={{display:flag?'block':'none'}}>删除</button></li>);}

添加

  • 接下来我们再实现一个添加todo的功能,触发事件就是Onkeyup
    App.js
    addTodo=(todo)=>{const todos=this.state.todosconst newTodos=[...todos,todo]console.log(newTodos);this.setState({todos:newTodos})}

header.jsx

    addTodo = (e) => {// console.log(e);const {keyCode, target} = eif (keyCode === 13) {const todo = {id: nanoid(),text: target.value,done: false}// console.log(todo);this.props.addTodo(todo);target.value = '';}}

全选和一键清除

  • app.js
    checkAll=(bool)=>{//全选或者取消全选const todos=this.state.todosconst newTodos=todos.map((todo)=>{return {...todo,done:bool}})this.setState({todos:newTodos})}delAll=()=>{const todos=this.state.todosconst newTodos=todos.filter((todo)=>{return !todo.done})this.setState({todos:newTodos})}
  • footer.jsx
class Footer extends Component {state = {checked: false};//如果是状态false 点击后全选中checkAll = () => {const  checked=this.state.checked;this.props.checkAll(!checked);this.setState({checked: !this.state.checked});};delAll = () => {this.props.delAll();};render() {const {todos} = this.props;const total=todos.lengthconst doneCount=todos.reduce((prev,cur)=>{return prev+(cur.done?1:0);},0)return (<div className="todo-footer"><label><input onChange={this.checkAll} checked={this.state.checked} type="checkbox"/><span><span>已经完成{doneCount}/全部{total}</span></span></label><button className="btn btn-danger" onClick={this.delAll}>清除已完成任务</button></div>);}
}

react的事件监听大全

react所有事件监听

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/696752.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

全栈笔记_浏览器扩展篇(插件开发 - chrome浏览器proxy代理)

代理类型 常用的包括http、https、socks代理 配置权限 要让扩展使用代理接口,需要声明proxy权限: // manifest.json "permissions": ["proxy" ]设置代理服务器 chrome.proxy.settings.set({ scope: ‘regular’, value: 代理配置},回调函数) 代理配…

【前端面经2】京东一面

题目来源&#xff1a;牛客网 自我介绍 动态参数解析的解决方案 对于动态部分使用…args进行接受&#xff0c;可以把动态部分提取成数组 前端安全问题 CDN劫持 内容安全策略CSP 安全沙箱 Iframe 跨站脚本攻击XSS 攻击者通过在目标网站上注入恶意脚本&#xff0c;使之在…

OpenHarmony驱动框架HDF中设备管理服务构建过程详解

前言 如下图&#xff0c;开源鸿蒙系统驱动框架HDF在内核中的实现&#xff0c;可以分为向用户层提供设备服务的管理模块&#xff08;Manager&#xff09;&#xff0c;和实际管理硬件的Host模块。 Manager分为DeviceManageService和 DeviceServiceManage&#xff0c;前者负责提供…

1.WEB渗透测试-前置基础知识-ip地址

ip地址&#xff1a; ip地址指的是互联网协议地址&#xff0c;是IP协议提供的一种统一的地址格式&#xff0c;以每一台联网的主机都有一个对应的ip地址&#xff0c;ip地址也可以理解为分配给用户上网使用的网际协议的设备的数字标签。通俗的来说就是你打电话时候的每个人都有自己…

AIGC 实战:如何使用 Docker 在 Ollama 上离线运行大模型(LLM)

Ollama简介 Ollama 是一个开源平台&#xff0c;用于管理和运行各种大型语言模型 (LLM)&#xff0c;例如 Llama 2、Mistral 和 Tinyllama。它提供命令行界面 (CLI) 用于安装、模型管理和交互。您可以使用 Ollama 根据您的需求下载、加载和运行不同的 LLM 模型。 Docker简介 D…

在Mac上搭建MongoDB环境

最近工作中需要装MongoDB环境&#xff0c;搭建过程中遇到了一些问题&#xff0c;在这里记录一下安装MongoDB环境的方法以及问题的解决方法。有两种安装MongoDB的方法&#xff1a;brew安装和手动安装。 目录 使用Homebrew安装MongoDB 手动安装MongoDB&#xff08;不使用Homebr…

备战蓝桥杯 Day11(滚动数组优化+完全背包)

01背包的滚动数组优化 【题目描述】 经典0—1背包问题,有n个物品&#xff0c;编号为i的物品的重量为w[i]&#xff0c;价值为c[i]&#xff0c;现在要从这些物品中选一些物品装到一个容量为m的背包中&#xff0c;使得背包内物体在总重量不超过m的前提下价值尽量大。 #include&…

python_数据分析_numpy库

一、创建ndarray *ndarray是NumPy中表示数组的重要类型 1、使用np.array()创建 *参数列表&#xff1a;[1,2,3,4] 注&#xff1a;(1)、numpy默认ndarray的所有元素的类型是相同的 ​ (2)、如果传入的数据类型不同&#xff0c;会被按照优先级强制转换为同一类型&#xff0c;其…

vue--两种定时任务cron表达式组件比较选择

背景&#xff1a; 使用vue页面中cron表达式的组件&#xff0c;实现定时任务参数配置。 方案1 vue-cron 安装插件 npm install vue-cron --save 全局引入&#xff0c;修改main.js import Vue from vue import VueCron from vue-cron Vue.use(VueCron);页面配置 html<el-…

Java入门-可重入锁

可重入锁 什么是可重入锁? 当线程获取某个锁后&#xff0c;还可以继续获取它&#xff0c;可以递归调用&#xff0c;而不会发生死锁&#xff1b; 可重入锁案例 程序可重入加锁 A.class,没有发生死锁。 sychronized锁 package com.wnhz.lock.reentrant;public class Sychroniz…

多普勒变化率的应用 与 FPGA

1.多普勒变化率是一个描述波源和观察者相对速度变化的物理量&#xff0c;它与加速度有关。 多普勒效应是指当波源和观察者之间存在相对运动时&#xff0c;观察者接收到的波频率与波源发射的频率之间的差异。这种现象在声波、电磁波等多种波动中都会出现。多普勒变化率通常用来…

linux系统内核升级

1.查看旧版本内核 2.导入密钥 rpm --import https://www.elrepo.org/RPM-GPG-KEY-elrepo.org 3.安装yum源 rpm -Uvh http://www.elrepo.org/elrepo-release-7.0-2.el7.elrepo.noarch.rpm4.启用elrepo-kernel仓库并安装最新内核版本 yum --enablerepoelrepo-kernel install …

一文弄明白KeyedProcessFunction函数

引言 KeyedProcessFunction是Flink用于处理KeyedStream的数据集合&#xff0c;它比ProcessFunction拥有更多特性&#xff0c;例如状态处理和定时器功能等。接下来就一起来了解下这个函数吧 正文 了解一个函数怎么用最权威的地方就是 官方文档 以及注解&#xff0c;KeyedProc…

c++实现栈和队列类

c实现栈和队列类 栈(Stack)Stack示意图Stack.cpp 队列(queue)queue 示意图queue.cpp 栈(Stack) Stack示意图 Stack.cpp #pragma once #include "ListStu.cpp"template<typename T> class Stack { public: /* * void push(T& tDate)* 参数一 &#xff1a;…

【OCR专题文章】

目录 一、数据获取及预处理方法篇 二、两阶段算法篇(检测识别) 三、一阶段算法篇(Enc-Dec) 四、拓新篇 本栏聚焦在OCR的相关算法&#xff0c;专栏内文章的代码均已实现。 一、数据获取及预处理方法篇 【数据获取】 合同数据获取&#xff1a;【OCR】【专题系列】二、数据获取-…

解决windows无法访问wsl下docker服务

笔者在初学使用wsl跑docker时,遇到了windows无法访问的问题,并且浏览了大部分的文章,发现并没有起效,在反复试错终于成功之后,总结为以下几点: 1.升级至wsl2 2.将.wslconfig文件(用户文件夹下)中的如下镜像服务关闭删除 networkingModemirrored 3.打开wsl防火墙相应的端口 …

记录解决uniapp使用uview-plus在vue3+vite+ts项目中打包后样式不能显示问题

一、背景 从 vue2uview1 升级到 vue3vitetsuview-plus ,uview组件样式打包后不显示&#xff0c;升级前uview 组件是可以正常显示&#xff0c;升级后本地运行是可以正常显示&#xff0c;但是打包发布成H5后uview的组件无法正常显示&#xff0c;其他uniapp自己的组件可以正常显示…

Vue 中 onclick和@click区别

文章目录 一、直接上结论二、验证代码&#xff0c;可直接运行三、点击结果 一、直接上结论 onclick 只能触发 js的原生方法&#xff0c;不能触发vue的封装方法click 只能触发vue的封装方法&#xff0c;不能触发js的原生方法 二、验证代码&#xff0c;可直接运行 <!DOCTYP…

Vue3 + Ts (使用lodash)

安装 npm i --save lodash使用 import _ from lodash⚠️报警告&#xff1a;&#xff01;&#xff01;&#xff01; 此时还需要安装ts声明文件库 npm install types/lodash -D安装之后重启Vscode还是会提示上面的警告&#xff0c;此时还需在tsconfig.ts里面配置 {"c…

快速将excel/word表格转换为web页面(html)的方法

前言 在进行开发企业信息化建设的过程&#xff0c;应该有很多这样的场景&#xff0c;就是将现有的电子表格记录的方式转换为在数据系统中进行网页上报。也就是需要根据当前一直使用的表格制作一个上传这个表格信息的网页&#xff0c;如果要减少系统的使用学习成本&#xff0c;…