我想要一个白菜 - 个人主页动态

2019-12-01 21:08

useState function App() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}>{count}</button> ) } useEffect 模拟componentDidMount&componentDidUpdate function App() { const [count, setCount] = useState(0); useEffect...

0 点赞评论收藏

2019-12-01 20:12

华南师范大学前端工程师

render prop

Render Prop是个值为函数的属性，通过Render Prop，组件知道什么应该被渲染 import React from 'react' function App() { return ( <div style={{ height: '100%' }}> <Mouse render={({ x, y }) => (<h1>现在是{x},{y}</h1>)} /> </div> ) } class Mouse extends React.Compon...

0 点赞评论收藏

2019-11-08 20:44

华南师范大学前端工程师

执行上下文和执行栈

概述 执行上下文是当前JavaScript代码被解析和执行时所在环境的抽象概念 执行上下文的类型 执行上下文总共有三种类型 全局执行上下文 只有一个，浏览器的全局对象是window，this指向这个全局对象 函数执行上下文 只有在函数被调用时才会被创建，每次调用函数都会创建一个新的执行上下文 Eval函数执行上下文 eval函数中的代码，很少用而且不建议使用 执行栈 执行栈，也叫调用栈，具有 LIFO（后进先出）结构，用于存储在代码执行期间创建的所有执行上下文。首次运行JS代码时，会创建一个全局执行上下文并Push到当前的执行栈中。每当发生函数调用，引擎都会为该函数创建一个新的函数执行上下...

0 点赞评论收藏

2019-11-03 15:34

华南师范大学前端工程师

React绘制思维导图

//App.js import React, { Component } from 'react'; import './App.css' class App extends Component { constructor(props) { super(props) this.getNode = this.getNode.bind(this) this.drawLine = this.drawLine.bind(this) this.addLine = this.addLine.bind(this) this.state = { //节点...

0 点赞评论收藏

2019-11-03 15:28

华南师范大学前端工程师

React生命周期

组件初始化(initialization)阶段 constructor方法初始化props和state import React, { Component } from 'react'; class Test extends Component { constructor(props) { super(props); } }Mounting阶段 componentWillMount render componentDidMount update阶段 componentWillReceiveProps(nextProps) 此方法只调用于props引起的组件更新过程中，参数nex...

0 点赞评论收藏

2019-10-17 20:16

华南师范大学前端工程师

canvas简单画板

<!DOCTYPE html> <html lang="en"> <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"> ...

0 点赞评论收藏

2019-10-15 20:08

华南师范大学前端工程师

Vue路由传参

注意取参数都是router，router是整个VueRouter 方案一 this.$router.push({ path: '/user/123', }) //对应配置 { path: '/user/:id', name: 'User', component: User } //取参数 this.$route.params.id 方案二 利用路由的name属性 this.$router.push({ name: 'User', params: { id: id ...

0 点赞评论收藏

2019-10-15 19:28

华南师范大学前端工程师

继承

先来一个父类 function Animal(name) { this.name = name || '' this.sleep = function () { console.log('sleep'); } } 原型链继承 function Dog() { } Dog.prototype = new Animal() //在这里继承了Animal的实例方法和原型方法，但是constructor也变成了Animal.prototype.constructor即Animal所以下面应该修改回来 Dog.prototype.constructor = Do...

0 点赞评论收藏

2019-10-14 10:55

华南师范大学前端工程师

路由

Hash路由 hash路由一个明显的标志是带有#,我们主要是通过监听url中的hash变化来进行路由跳转。 实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="...

0 点赞评论收藏

2019-10-10 18:54

已编辑

华南师范大学前端工程师

字符串

题目来自LeetCode链接：https://leetcode-cn.com/problems/generate-parentheses 无重复字符的最长子串 给定一个字符串，请你找出其中不含有重复字符的 最长子串 的长度。 示例 1: 输入: "abcabcbb"输出: 3解释: 因为无重复字符的最长子串是 "abc"，所以其长度为 3。示例 2: 输入: "bbbbb"输出: 1解释: 因为无重复字符的最长子串是 "b"，所以其长度为 1。示例 3: 输入: "pwwkew"输出:...

0 点赞评论收藏

2019-10-09 20:13

华南师范大学前端工程师

Vuex使用

引用一张官网的图,出自Vuex文档 State State 单一状态树，这个对象包含全部的应用层级状态 获取Vuex状态 通过在根实例中注册 store 选项，该 store 实例会注入到根组件下的所有子组件中，且子组件能通过 this.$store 访问到。 //app.vue const app = new Vue({ el: '#app', // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件 store, components: { Counter }, template: ` <div class=&...

0 点赞评论收藏

2019-10-07 16:58

华南师范大学前端工程师

LazyMan--流程控制

问题描述 实现一个LazyMan，可以按照以下方式调用:LazyMan(“Hank”)输出:Hi! This is Hank!LazyMan(“Hank”).sleep(10).eat(“dinner”)输出Hi! This is Hank!//等待10秒..Wake up after 10Eat dinner~LazyMan(“Hank”).eat(“dinner”).eat(“supper”)输出Hi This is Hank!Eat dinner~Eat supper~LazyMan(“Hank”).sleepFirst(5).eat(“supper”)输出//等待5秒Wake up ...

0 点赞评论收藏

2019-10-06 19:55

华南师范大学前端工程师

canvas笔记

API参考 https://www.w3school.com.cn/tags/html_ref_canvas.asp 粒子特效 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv...

0 点赞评论收藏

2019-10-06 19:15

华南师范大学前端工程师

SVG学习笔记--SMIL动画

简介 所谓SMIL动画指在 SVG 集成了 Synchronized Multimedia Integration Language (SMIL) 这种动画标准，该语言被 SVG 原生支持，主要是使用标签来描述动画。 简单实例 <svg width="500px" height="500px" viewBox="0 0 500 500"> <rect x="0" y="0" width="100" height="100" ...

0 点赞评论收藏

2019-10-06 19:07

华南师范大学前端工程师

SVG学习笔记---入门

SVG基本介绍 SVG 是一种开放标准的矢量图形语言，即表示可缩放矢量图形（Scalable Vector Graphics）格式，是由万维网联盟（W3C）开发并进行维护的。那 SVG 都有哪些优点呢？由于 SVG 图像是矢量图像，可以无限缩小放大，所以 SVG 可以在任何分辨率的设备上高清显示，不需要再像以前一样输出各种 @2x 倍图来适配不同分辨率的屏幕。而且有非常成熟的设计工具支持导出 SVG 的图形格式，比如，AI 或者是 Sketch 等设计软件都支持直接导出 SVG 的图形格式，非常方便。 基本示例 <svg x="0px" y="0px&q...

0 点赞评论收藏

关注他的用户也关注了：