- 博客(30)
- 收藏
- 关注
RSS订阅
原创 uni-app 快速入门 从零开始实现新闻资讯类跨端应用（更新中）
uni-app 快速入门 从零开始实现新闻资讯类跨端应用（更新中）文章目录uni-app 快速入门 从零开始实现新闻资讯类跨端应用（更新中）一、微信小程序基础1.初始化文件目录结构2.数据绑定，条件判断、列表渲染二、uni-app基础1.uni-app核心知识点概况一、微信小程序基础1.初始化文件目录结构1、utils文件夹主要存放工具类 pages目录存放所有页面代码 app.js是文件入口 app.jasn是项目配置 app.wxss是全局样式表2、index目录
2020-12-07 23:43:59
3424
3
原创 react Hooks ：useRef的使用
//useRef 作用 获取子组件或者DOM节点的句柄，渲染周期之间共享数据的存储import React, { useState, useEffect, PureComponent, useMemo, useRef, useCallback } from 'react'//函数组件获取不了refclass Counter extends PureComponent { speak = () => { console.log('speak', this.props.count
2021-03-20 02:04:14
716
原创 react Hooks ：useMemot的使用
import React, { useState, useMemo } from 'react'function Counter(props) { return ( <h1>{props.count}</h1> )}function APP(props) { const [count, setCount] = useState(0) const double = useMemo(() => { return count * 2
2021-03-20 00:52:28
132
原创 react Hooks ：useContext的使用
import React, { Component, useState, createContext, useContext } from 'react'const countContext = createContext()//创建Context实例对象// 基础写法class Foo extends Component { render() { return ( <countContext.Consumer> { cou.
2021-03-20 00:22:50
134
原创 react Hooks ：useEffect的使用
什么是副作用？在特定的状态、节点、时机下，要做特定的行为，这些行为置身于组件渲染之后，通通称之为副作用，绑定事件，网络请求，访问DOM元素，通通称之为副作用，副作用时机在Mount之后，Update之后，Unmount之前，这三者分别是ComponentDidMount,componentDidUpdate,componentWillUnmountuseEffect怎么用？useEffect在render之后调用，也可以通过自定义状态来决定调用和不调用，第一次调用相当于ComponentDidMoun
2021-03-19 23:36:32
253
原创 react Hooks ：useState的使用,以及设置回调
react普通class组件import React, { Component} from 'react'export default class App extends Component { state = { count: 0 } render() { const { count } = this.state return ( <div> <button type="button"
2021-03-19 11:15:37
2199
原创 react 指定组件进行渲染.，防止多余渲染的三个方法
方法一：使用生命周期函数shouldComponentUpdate()import React, { Component } from 'react'class Foo extends Component { shouldComponentUpdate(nextProps, nextState) { //两个参数nextProps和nextState，表示下一次props和一次state的值 //生命周期函数shouldComponentUpdate()默认返回ture，返回fa
2021-03-18 01:40:50
1236
原创 react Lazy与Suspense实现延迟加载（懒加载）
import React, { Component, lazy, Suspense } from 'react'const About = lazy(() => import('./About.jsx'));//lazy是一个方法，它封装了“动态加载的过程”//About是一个React组件，但它并不能被渲染，它只是一个“动态加载过程”的封装。它在要被渲染的时候就会去加载真正的About组件export default class IndexPage extends Component {
2021-03-18 00:13:58
417
原创 react 静态属性ContextType访问跨层级组件的数据
import styles from './index.less';import React, { Component, createContext } from 'react'const BatteryContext = createContext(0);//创建createContext实例对象，必须传一个默认值,默认值的意义就是Consumer向上找不到对于的Provider就会展示该默认值class Leaf extends Component { static contextTyp
2021-03-17 23:31:49
365
原创 react Context实现跨层级传递数据的基础使用
Context作用：提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法import styles from './index.less';import React, { Component, createContext } from 'react'const BatteryContext = createContext(0);//创建createContext实例对象，必须传一个默认值,默认值的意义就是Consumer向上找不到对于的Provider就会展示该默认值
2021-03-17 00:28:05
263
原创 React Hooks 旅游电商网站火车票PWA
文章目录一、项目搭建1.使用react-create-app构建工具2.编译脚本：react-scripts的作用与工作原理3.解构编译脚本：eject的具体用法一、项目搭建1.使用react-create-app构建工具2.编译脚本：react-scripts的作用与工作原理3.解构编译脚本：eject的具体用法...
2021-03-16 00:07:52
229
原创 css 背景
background code1<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title
2021-03-15 01:53:38
840
原创 css行高
行高code1<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>inlin
2021-03-15 00:50:23
105
原创 css 字体
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>fonts</ti
2021-03-15 00:22:40
78
原创 css选择器
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>basic</ti
2021-03-14 19:50:15
79
原创 HTML面试真题
1、doctype的意义是什么 ·让浏览器以标准模式渲染 ·让浏览器知道元素的合法性2、HTML XHTML HTML5的关系 ·HTML属于SGML ·XHTML属于XML，是HTML进行XML严格化的结果 ·HTML不属于SGML或XML，是一种独立规范标记语言，比XHTML宽松3、HTML5有什么变化 ·新的语义化元素（header 页眉, nav 导航, section 区块, article 文章, aside 侧边栏 , and footer 页脚） ·表单增强
2021-03-14 18:58:23
67
原创 HTML默认样式重置
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>default styl
2021-03-14 18:20:36
251
原创 行内元素a包含块级元素是合法的
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>default style
2021-03-14 18:02:34
744
原创 html元素分类
块级元素行内元素inline-block<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <.
2021-03-14 12:16:43
59
原创 js实战小技巧汇总
js小技巧汇总记录实战开发中使用到的js技巧例如：第一章 Python 机器学习入门之pandas的使用提示：写完文章后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录js小技巧汇总前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结前言提示：这里可以添加本文要记录的大概内容：例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考一、pandas是什么
2020-11-16 15:52:40
464
1
原创 React16+React-Router4 从零打造企业级电商后台管理系统
文章目录1、Header组件开发2、首页开发3、详情页面和登录功能开发1、Header组件开发2、首页开发3、详情页面和登录功能开发
2020-11-16 10:10:51
4583
原创 react.js之无状态组件
//当一个组件只有render函数的时候，就可以用无状态组件定义这个组件，其实无状态组件就是一个函数//无状态组件的性能比较高，就只是一个函数正常定义import React from 'react';import { Input, Button, List } from 'antd';class ToDoListUI extends Component { render() { return ( <div style={{ m.
2020-11-16 08:45:12
109
原创 ToDoList 与antd和redux的结合
ToDoList.jsimport React, { Component } from 'react';import { getInputChangeAction, getButClickAction, getDeleteItem } from './store/actionCreators';import ToDoListUI from './ToDoListUI';import 'antd/dist/antd.css';import store from './store'class
2020-11-15 17:24:17
92
原创 react.js实现input输入框只接受数字
react.js 方法一 changeEvent=(e)=>{ let value = e.target.value.replace(/[^\d]/, '') this.setState({ checkCode: value })} <input value={this.state.checkCode} onChange={(e) => this.changeEvent(e)></input>
2020-11-15 02:39:09
1892
原创 react.js使用TransitionGroup和CSSTransiton对多个div进行动画操作
Animation.jsimport React, { Component, Fragment } from 'react';import { CSSTransition, TransitionGroup } from 'react-transition-group';//TransitionGroup用于对多个div进行动画操作import './Animation2.css'class Animation extends Component { constructor(props)
2020-11-10 09:23:28
261
原创 react动画的两种写法
1、用原生的css来写Animation.jsimport React, { Component, Fragment } from 'react';import './Animation.css'class Animation extends Component { constructor(props) { super(props) this.state = { show: true } this.
2020-11-10 09:14:05
678
原创 react.js 将TodoList拆分成一个个组件
TodoList.jsimport React, { Component, Fragment } from 'react';import ToDoItem from './ToDoItem';import Test from './Test';class ToDoList extends Component { constructor(props) { //constructor是一个构造函数，每个类都有，是最先被执行的函数 super(props)
2020-11-10 08:47:45
174
1
原创 react.js 第一个最原始的TodoList
ToDoList.jsimport React, { Component, Fragment } from 'react';class ToDoList extends Component { constructor(props) { //constructor是一个构造函数，每个类都有，是最先被执行的函数 super(props) //super(props)指的是要调用父类的构造函数 this.state = {
2020-11-10 08:34:23
128
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人