天天的博客

原创 vue 复习 v-model 自己实现，如此简单

<template> <div> <input :type="type" :value="value" @input="myinput" /> </div></template><script>export default { props: { type: { type: String, default: "text", }, value: { t.

原创 vue 重新学习

我发现招vue 的多，在我们这个小城市所以下一阶段，重点研究vue ，由于已经研究过了，所以这次重点放在源码，和项目实战上！ 正确能掌握并且熟练使用它！————————————————————————————————————<template> <div> <ul> <li v-for="(value,key) in myStyle" :key="key"> {{value}}--{{key}}.

原创 ？？？作用域插槽，这个玩意我只能部分截图

由于没有遇到一定的业务逻辑，所以这篇我会抄些东西详细可以去https://www.jianshu.com/p/e10baeff888d

原创 关于vue组件通讯

我记得我写过这个逻辑，就是在vue 的原型上加个全局的分发器，然后大家都可以很开心的使用import Vue from 'vue'import App from './App.vue'Vue.config.productionTip = falseclass Bus { constructor() { this.callbacks = {} } on(name, fn) { this.callbacks[name] = this.callbacks[name]

原创 umi3 使用 dva 的正确姿势

啥也不要配置，直接就内置了，就可以使用了1， 我们先看模型count.jsfunction asyncInit() { return new Promise((resolve, reject) => { setTimeout(() => { resolve(100); }, 1000); });}export default { namespace: "count", // 可省略 s

原创 umi3 使用antd 正确姿势

我都是瞎摸索，上次使用有很大问题，这次改正首先 yarn add @ant-design/pro-layout然后yarn add yarn add antd@^4.x然后不需要配置，直接使用就可以使用是不是很简洁，我猜想dva也一样——————————————————————————下一篇，我就开始跑通dva 数据流，当然是在umi 的框架内，非umi ，我直接用saga...

原创 umi 安装问题备注

Resolving packages...error An unexpected error occurred: "https://registry.npm.taobao.org/@umijs%2fcreate-umi-app: getaddrinfo EAI_AGAIN registry.npm.taobao.org registry.npm.taobao.org:443".info If you think this is a bug, please open a bug report with .

原创 react redux - sage初步跑通。。

2， 第二步骤，我们来看下我们的界面import React, { Component } from 'react'import { connect } from 'react-redux';// 计数器功能，来改下redux-thunk 操作class ReduxSagaHa extends Component { constructor(props) { super(props); } render() { const {..

原创 generator 的学习

这玩意就是一个函数执行器，就比如将一件事情分成好几步骤， 然后踹一脚走一步<script type="text/javascript"> let fn1 = ()=>{ setTimeout(()=>{ console.log(11111); },1000);

原创 react 高阶组件完成对组件的权限控制

我们在路由的这一块，我们准备完成vue的类似的权限控制功能router.beforeEach() 功能，这个功能过react 高阶组件实现，类似Java的代理Gaojiezujian.jsimport React, { Component } from 'react'// connect 函数连接以下import { connect } from "react-redux"// 高阶组件，就是对原来的组件进行封装import { Route, Redirect } from "reac

原创 React 动态传参数

我们看下打印结果：取出来就简单多了

原创 React 路由的基本使用

我们坚持写笔记， 因为只要笔记不停，就代表我们还没有放弃import React, { Component } from "react"import { Link, Route, BrowserRouter } from "react-router-dom"import UserPager from "./UserPager"import HomePager from "./HomePage"// 默认导出就行了export default class ReactRouter exte

原创 redux combineReducers 的使用和注意方式

学习代码的时候，一定要动手实践，否则根本学不会！import { createStore, applyMiddleware } from "redux";import { combineReducers } from "redux"//引入中间键盘import logger from "redux-logger"import thunk from "redux-thunk"// 两个reducer 我开始测试 combineReducerfunction nameReducer(sta

原创 redux 异步操作

原创 react 计数器改进

使用connectimport React, { Component } from 'react'import { connect } from 'react-redux'const mapStateToProps = (state) => { return { count: state }}const mapActionCreater = { add: () => ({ type: "add" }), minus:...

原创 redux 最简单例子，计数器

使用简单2， 使用就行了3，有个注意点就是订阅以下观察者

原创 react useContext createContext 方法使用

还是上一篇的例子，我把 代码改下import React, { useReducer } from 'react'import { useContext } from "react"// 创建上下文const Context = React.createContext();//此时state 就是 count function countReducer(state, action) { switch (action.type) { case "add":

原创 react useReducer

我们要修改下，将单一组件的状态提取出来，提取成为全局的组件状态，方便各个组件使用！为了测试这个东西，我们的设计是这样的，计数器count一个组件加,一个组件减Cart里面加这个时候用到了reducerimport React, { useReducer } from 'react'//此时state 就是 count function countReducer(state, action) { // 这里写法都是标准写法！ // 我去上趟茅坑，回头接着写。。..

原创 react useSate

hook 我的理解就是让你在函数组件中可以使用状态！具体的理解，你可以看官网，我还没看，回头我还得补计算机是门实践的科学，多动手总是好的import React, { Component } from 'react'import { useState } from "react"const Cart = () => { const [fruit, setFruit] = useState("初始值"); return ( <div&gt

原创 组件复合 - Composition

组件复合 - Composition复合组件使我们以更敏捷的方式定义组件的外观和行为，比起继承的方式它更明确和安全

原创 react 插槽作用

我们先上代码import React, { Component } from 'react'// import { Button } from "antd"class Show extends Component { constructor(props) { super(props); } render() { console.log(this.props.children) return ( &l

原创 react 高阶组件

react 高阶组件：我的理解就是原来的功能不强，需要加强这个概念好理解，就比如Java中，对原来类进行扩充（装饰） 一般采用组合或者继承的方式而在我们的react （重点是jsx )语法，函数也是组件那你对函数进行扩充，用函数来包裹一下就行了！有些时候我们写代码，刚开始不理解，多写几遍就成为定势了！也就是总这么写的问题下面我手写个高阶组件函数！ // v1 传递个组件，返回一个组件（函数形式） const Hoc = (Component)=&g

原创 react 简单优化设计-纯组件的优化

加入有如下代码; setTimeout(()=>{ <A data = {data}></A> },1000)这里每隔1 秒 就刷新一次，这个时候 A 组件会每次重复diff 算法，看是否该重新渲染，然后走render 方法这样效率太低，我们的设想就是，只要 data 数据不变，我们就不会渲染，这样会节省很大的成本所以这就有了纯组件的概念：一种是class 的方式（通过继承实现）一种是 函数的方式，我们通过 函数包装的方式实

原创 react 组件基本设计

这个react 笔记我会一直写下去，直到将知识点弄的差不多！容器组件 VS 展示组件基本原则：容器组件负责数据获取，展示组件负责根据props显示信息优势：更小、更专注、重用性高、高可用、易于测试、性能更好import React, { Component } from "react";// 容器组件export default class CommentList extends Component {constructor(props) {super(props);this.st

原创 react 组件化 1，学习笔记

我们在使用antd 的时候，想让他自动引入，用到啥引入啥步骤：npm install antd --save配置按需加载安装react-app-rewired取代react-scripts，可扩展webpack的配置 ，类似vue.config.jsnpm install react-app-rewired customize-cra babel-plugin-import -D//根目录创建config-overrides.jsconst { override, fixBa..

原创 问题备注

解决办法npm install --registry=https://registry.npm.taobao.org