天天的博客

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

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

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 .

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

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

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

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

我们坚持写笔记， 因为只要笔记不停，就代表我们还没有放弃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

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

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

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

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

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

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

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

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

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

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

我们在使用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

import React from 'react'import { Component } from 'react'import "./cart.css"// 纯显示的组件function Cart({ carts }) { return ( <div> <table> <tbody> { car.

import React, { Component } from 'react'// 类的组件写法，都是jsxexport default class hello extends Component { constructor(props) { super(props); this.state = { val: "", goods: [ { .

export default class hello extends Component { constructor(props) { super(props); this.state = { goods: [ { title: "java", price: 1000 }, .

付出，不一定会有收获；不付出，却一定不会有收获，不要奢望出现奇迹react 组件写法非常简单import React from "react"import {Component) from 'react'class Comp1 extends Component{ constructor(..args){ super(..args) } render(){...