leahtao - 博客园

2020年4月16日

摘要： React路由有两种实现方式： HashRouter:利用hash实现路由切换 BrowserRouter：利用h5 Api实现路由切换 1.1 HashRouter 利用hash实现路由切换 <body> <div id="root"></div> <a href="#/a">去/a</a> <a 阅读全文

posted @ 2020-04-16 23:49 leahtao 阅读(1994) 评论(0) 推荐(0) 编辑

React学习之 Render props

摘要：一、这是个啥？相信很多人和我一样，在听到这个名词的时候第一想知道的这是个啥，是个啥咱翻一下官方文档：是指一种在 React 组件之间使用一个值为函数的 prop 共享代码的简单技术。 render prop 是一个用于告知组件需要渲染什么内容的函数 prop。如果一个组件不知道自己渲染什么东西阅读全文

posted @ 2020-04-16 10:56 leahtao 阅读(263) 评论(0) 推荐(0) 编辑

2020年4月15日

React 高阶组件

摘要： https://zhuanlan.zhihu.com/p/28138664 先来回顾一下什么是高阶函数？高阶函数就是接收一个函数作为输入，或者输出另一个函数的类函数。那么高阶组件也就是接收一个react组件作为输入，输出另一个react组件。下面我们实现一个高阶组件。从localstorage里面阅读全文

posted @ 2020-04-15 23:24 leahtao 阅读(131) 评论(0) 推荐(0) 编辑

2020年4月13日

React Context(执行上下文)

摘要：一、Context 解决什么问题 React是单向数据流，数据是从上往下单向传递的，每个组件都可以接收父组件的属性和状态，也可以把属性和状态向下传递给子组件，但是当层级特别多的时候就会变得非常繁琐。Context 提供了一种在组件之间共享此类值得方式，而不必逐层传递。它主要是用来解决祖先组件向后代组阅读全文

posted @ 2020-04-13 00:21 leahtao 阅读(929) 评论(0) 推荐(0) 编辑

2020年4月12日

React 生命周期

摘要：一、旧版： 1、initialization 初始化属性和状态 2、Mounting （加载阶段：涉及3个钩子函数） 2.1 componentWillMount() 组件加载时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state 2.2 render() react最重要的步阅读全文

posted @ 2020-04-12 20:02 leahtao 阅读(189) 评论(0) 推荐(0) 编辑

React ref属性

摘要：简单来说，ref就是用来获取真实dom元素或者是组件实例的属性。 1. 创建和访问 ref 的值根据节点的类型而有所不同：当 ref 属性用于 HTML 元素时，构造函数中使用 React.createRef() 创建的 ref 接收底层 DOM 元素作为其 current 属性。当 ref 属阅读全文

posted @ 2020-04-12 10:37 leahtao 阅读(1500) 评论(0) 推荐(0) 编辑

2020年4月11日

react setState 原理

摘要：组件的数据来源有两个地方，分别是属性对象和状态对象属性是父组件传递过来的，不可更改状态是自己内部的，改变状态的唯一方式就是setState 属性和状态的变化都会引起视图更新 import React from "react"; import ReactDOM from "react-dom"; 阅读全文

posted @ 2020-04-11 23:32 leahtao 阅读(1620) 评论(0) 推荐(0) 编辑

2020年4月10日

点击button按钮会刷新页面的问题

摘要： <form> <button class="el-button" @click="submitForm(ruleForm)">登录</button> </form> 原本是在没有填写信息的情况下，要给出用户提示信息，但是当我点击之后发现会自动刷新一次页面，提示信息也没有了原因是我把button写在阅读全文

posted @ 2020-04-10 17:56 leahtao 阅读(1276) 评论(0) 推荐(1) 编辑

vue/cli4项目中配置别名

摘要：目录：配置： const path = require('path');//引入path模块 function resolve(dir){ return path.join(__dirname,dir)//path.join(__dirname)设置绝对路径 } module.exports={ 阅读全文

posted @ 2020-04-10 16:49 leahtao 阅读(3910) 评论(0) 推荐(0) 编辑

用elementui写form表单时，在label里添加空格

摘要：直接写 这个是不生效的，而且会把字符串显示在页面上，有两种解决方法： 1.直接在label标签里面输入一个空格 2.通过 <label slot="label">账    号  :</label>这种方式写，两种都可以。 <el- 阅读全文

posted @ 2020-04-10 16:02 leahtao 阅读(3217) 评论(0) 推荐(0) 编辑

leahtao的前端积累

人生不能太过圆满，求而不得未必是遗憾

公告