信念之于人，犹翅膀之于鸟，信念是飞翔的翅膀

data 数据表格数据添加是否选中的标志isSelect状态：true为选中状态，false为未选中状态 ，空字符串为未知状态初始化数据设置标志字段//初始化数据复选框点击事件复选框点击事件setRowIsSelect(row) {//当点击父级点复选框时，当前的状态可能为未知状态，所以当前行状态设为false并选中，即可实现子级点全选效果检测表格数据是否全选表格全选事件表格行样式 当当前行的状态为不明确状态时，添加样式，使其复选框为不明确状态样式表格标题样式 当一级目录有为不明确

ES6引入了class类的概念，创建的每一个class类，都会有一个constructor()方法，该方法是一种用于创建和初始化class创建的对象的特殊方法–构造函数方法。class Animal { constructor() { this.name = "animal"; }} let animal = new Animal();console.log(animal.name); //输出：animal，所以 Animal类里的constructor()方

代码import React, { Component } from "react";import ReactFullpage from "@fullpage/react-fullpage";import "./less/BIMMAKE.less";class BIMMAKE extends Component { // 机器人 globalNum = 0; dwwdwdw = (times) => { let dwdwdwdw = window.dwdwdwdw;

在index.js中引入文件<script type="text/javascript" src="https://asent.xxxm/client/gloxxxDK.js"></script>GlodonRobotJsSDKGlodonRobotJsSDK 有值的话 表示该js执行完毕这里用了自调函数 globalNum = 0; getGldonxSDK = (times) => { if (window.GlodonRobotJsSDKGl

网页可能暂时无法连接，或者它已永久性的移动到了新网址这两天chrome浏览器频繁地奔溃，出现以下报错：ipconfig /flushdnsnbtstat -r netsh int ip resetnetsh winsock reset要使用管理员身份运行今日心情生命就像是一个疗伤的过程，我们受伤，痊愈，再受伤，再痊愈。每一次的痊愈好像都是为了迎接下—次的受伤。然后在不断的受伤与愈合中，我们学会了成长。...

按照如下流程操作即可安装 mkcertmkcert简介mkcert是一个使用go语言编写的生成本地自签证书的小程序，具有跨平台，使用简单，支持多域名，自动信任CA等一系列方便的特性可供本地开发时快速创建https环境使用。安装方式也非常简单，由于go语言的静态编译和跨平台的特性，官方提供各平台预编译的版本，直接下载到本地，给可执行权限(Linux/Unix需要)就可以了。下载地址: https://github.com/FiloSottile/mkcert/releases/latest此外，m

在index中添加如下内容html,body{ font-size: 100px; }rem.js// // // 实现 rem 等比适配// const baseSize = 37.5 /* 基准适配 */// function setRem() {// // 设置当前页面基于 375 进行缩放适配，需要根据设计稿改写除数// const scale = document.documentElement.clientWidth / 375/

require("../assets/02_slices/组 63@2x.png")方式一 先导入后引用方式二 直接引入 <img src={require("../assets/01_slices/logo.png")} alt="" className="header-container-img" ></img>方式三 遍历引用 containerSecondList = [ { imgsrc: req

react 引入 阿里iconfont 的万能写法第一步注意 icon我的项目 名称尽量不要用中文用中文有一定可能会出现问题此时需要用到的地方下载后先把下载好的文件复制到项目的 assets文件夹内然后去 主文件 index.js 里写入import './assets/iconfont/iconfont.css'然后去需要用到该图标的地方写入对应的i标签如果这里不使用 iconfont 很有可能出现小百框情况 如果还有问题 的话 去核对一下 icon-xiazai

函数组件import React from 'react'function App(){ return <h2>App</h2>}export default App;类组件import React, { Component } from 'react'class App extends Component { render(){ return <h2>App</h2> }}export de

预防Hooks的小错误安装npm i eslint-plugin-react-hooks -D并且在package.json中配置规则"eslintConfig": { "extends": [ "react-app", "react-app/jest" ], "plugins": [ "react-hooks" ], "rules": { "react-hooks/rules-of-hooks":"error

有问题的代码// import React, { useState } from 'react'import React,{Component,useState ,useMemo,memo} from 'react'const Counter = memo(function Counter(props) { console.log('Counter render') return ( <h1 onClick={props.onClick}>{ props.count}&

Hooks1. React Hook/Hooks是什么?(1). Hook是React 16.8.0版本增加的新特性/新语法(2). 可以让你在函数组件中使用 state 以及其他的 React 特性2. 三个常用的Hook(1). State Hook: React.useState()(2). Effect Hook: React.useEffect()(3). Ref Hook: React.useRef()3. State Hook(1). State Hook让函数组件也可以

路由组件的lazyLoad//1.通过React的lazy函数配合import()函数动态加载路由组件 ===> 路由组件代码会被分开打包const Login = lazy(()=>import('@/pages/Login'))//2.通过<Suspense>指定在加载得到路由打包文件前显示一个自定义loading界面<Suspense fallback={<h1>loading.....</h1>}> <Swit

setState 更新状态的两种写法(1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用 (2). setState(updater, [callback])------函数式的setState 1.updater为返

纯函数纯函数的概念纯函数：相同的输⼊，永远会得到相同的输出，并且没有任何可观察的副作⽤。纯函数类似数学中的函数（⽤来描述输⼊和输出的关系），y = f(x)lodash 是⼀个纯函数功能库，提供了对数组，数字，对象，字符串，函数等的⼀些操作⽅法。数组的 slice 和 splice 分别是纯函数和不纯的函数slice 返回数组的指定部分，不会改变原有数组let array = [1, 2, 3, 4, 6]console.log(array.slice(0, 3))console.lo

整体文件目录结构让store 文件为多个组件服务需要用到的是 combineReducers例如：// 汇总所有reducer变为一个总的reducerconst allReducer = combineReducers({he: countReducer,rens: personReducer})/* 该文件用于暴露一个store 对象，整个应用只能有一个store对象*/// 引入 creacteStore 专门用于创建redux 中最为核心的store 对象imp.

案例react版注意:this.setState({count:count+value1}) 需要1才能实现加减效果 否则就是字符串拼接Count 组件 内容import React, { Component } from 'react'export default class Count extends Component { state = { count: 0 } // 加 increment = () => { const { value } = thi

函数式编程-函子在函数式编程中把副作用控制在可控的范围内、异常处理、异步操作等为什么要有函子容器：包含值和值的变形关系(这个变形关系就是函数)函子：是一个特殊的容器，通过一个普通的对象来实现，该对象具有 map 方法，map 方法可以运行一个函数对值进行处理(变形关系)function double(x){ return x*2}function add5(x) { return x+5}double(add(5))var a = add5(5)a = double(a)

使用ant Design组件import React, { Component } from 'react'import {Button,DatePicker} from 'antd'import 'antd/dist/antd.css'import { UpOutlined, SearchOutlined } from '@ant-design/icons'const {RangePicker} = DatePickerexport default class App extends Comp

流行的开源React UI组件库material-ui(国外)1.1. 官网: http://www.material-ui.com/#/1.2. github: https://github.com/callemall/material-uiant-design(国内蚂蚁金服)2.1. 官网: https://ant.design/index-cn2.2. Github: https://github.com/ant-design/ant-design/使用ant Design组件im

底层原理不一样：BrowserRoute使用的是H5的history API，不兼容IE9及以下版本。HashRouter使用的是URL的哈希值。path表现形式不一样BrowserRouter的路径中没有#,例如：localhost:3000/demo/testHashRouter的路径包含#,例如：localhost:3000/#/demo/test刷新后对路由state参数的影响3.1. BrowserRouter没有任何影响，因为state保存在history对象中。3.2. H.

withRouter 将一般组件加公成路由组件 使其可以接受到this.props 也就可以实现路由组件的功能 实现路由跳转import React, { Component } from 'react'import {withRouter} from 'react-router-dom'class Header extends Component { back=()=>{ this.props.history.goBack() } forwark=()=>{ .

replaceshow = (id, title) => {// replace 跳转 + 携带 params 参数// this.props.history.replace(/home/message/detail/${id}/${title})// replace 跳转 + 携带query 参数// this.props.history.replace(/home/message/detail?id=${id}&title=${title})// replace 跳转 + 携带.

push默认<Link to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title }</Link>replace<Link replace={true} to={{pathname:'/home/message/detail',state:{id:msgObj.id,title:msgObj.title}}}>{msgObj.title

params方法import React, { Component } from 'react'import {Link,Route} from 'react-router-dom'import Detail from './Detail'export default class index extends Component { state = { messageArr: [ { id:'01',title:'消息1'}, { id:'02',title:'消

二级路由必须用/home/news （父级路由+新路由）有二级路由的一级路由不能开启严格模式二级路由import React, { Component } from 'react'import { Route,Switch} from 'react-router-dom'import MyNavLink from '../../components/MyNavLink'import Message from './Message'import News from './News'expo.

路由的严格匹配与模糊匹配默认使用的是模糊匹配（简单记：【输入的路径】必须包含要【匹配的路径】，且顺序要一致）开启严格匹配：<Route exact={true} path="/about" component={About}/>简写：<Route exact path="/about" component={About}/>严格匹配不要随便开启，需要再开，有些时候开启会导致无法继续匹配二级路由非严格模式下<MyNavLink to="/atguigu/a

BrowserRouter 和 HashRouter 的区别假如要访问的路径为 localhost:3000/则 使用 BrowserRouter 时地址栏显示 http://localhost:3000/而 使用 HashRouter 时地址栏显示 http://localhost:3000/#/Route 组件的 path 属性用于匹配路径，因为我们需要匹配 / 到 Home，匹配 /about 到 About，所以肯定需要两个 Route，但是，我们不能这么写。<Route path=

MyNavLink 文件 —— 封装NavLinkimport React, { Component } from 'react'import { NavLink } from 'react-router-dom'export default class MyNavLink extends Component { render() { return ( <NavLink activeClassName="atguigu" className="list-group-it

路由组件与一般组件写法不同： 一般组件：<Demo/> 路由组件：<Route path="/demo" component={Demo}/>存放位置不同： 一般组件：components 路由组件：pages接收到的props不同：一般组件：写组件标签时传递了什么，就能收到什么路由组件：接收到三个固定的属性 history: go: ƒ go(n) goBack: ƒ goBack() goForward: ƒ g

SPA的理解单页Web应用（single page web application，SPA）。整个应用只有一个完整的页面。点击页面中的链接不会刷新页面，只会做页面的局部更新。数据都需要通过ajax请求获取, 并在前端异步展现。路由的理解什么是路由?一个路由就是一个映射关系(key:value)key为路径, value可能是function或component路由分类后端路由：理解： value是function, 用来处理客户端提交的请求。注册路由： router.get

List 文件 —— 定义初始状态，订阅和取消订阅import React, { Component } from 'react'import PubSub from 'pubsub-js'import './index.css'export default class index extends Component { state = { //初始化状态 users: [],//users初始值为数组 isFirst: true,// 是否为第一次打开页面 i

连续结构赋值（+重命名）axios 请求数据search = () => { // 获取用户的输入 （连续解构赋值+重命名） const { keyWordElement: { value: keyWord } } = this console.log(keyWord) // 发送网络请求 // 当自己在3000时 可以省略http://localhost:3000 // /api1 必须跟在3000后面 axios.get('/api1/

前置说明1.1.React本身只关注于界面,并不包含发送ajax请求的代码2前端应用需要通过ajax请求与后台进行交互(json数据)3. react应用中需要集成第三方ajax库(或自己封装)1.2.常用的ajax请求库jQuery:比较重,如果需要另外引入不建议使用3 axios:轻量级,建议使用1)封装XmlHttpRequest对象的 ajax-2)promise风格-3)可以用在浏览器端和node服务器端安装 axiosyarn add axiosreact脚手架配置代理.

案例功能: 组件化实现此功能显示所有todo列表输入文本, 点击按钮显示到列表的首位, 并清除输入的文本App文件 —— 动态获取列表数据 并让输入框和列表通过App.js实现连接state = { todos: [ {id:'001',name:'吃饭',done:true}, {id:'002',name:'睡觉',done:false}, {id:'003',name:'打豆豆',done:true}, ]} render()

prop-types库安装yarn add prop-types使用<Header addTodo={ this.addTodo }/>// 对接收的props进行：类型 、必要性的限制 static PropTypes = { addTodo:PropTypes.func.isRequire }<List todos={todos} updateTodo={this.updateTodo}/> static propTypes = {

功能界面的组件化编码流程（通用)

将样式名称改成index.module.css将该文件导入到 对应的组件中最重要的是className 不能和之前一样直接写title了 而是 hello.title

public 内只能有一个 .html 文件 index.html文件 页面永远是一个<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <!-- %PUBLIC_URL%代表 public文件夹的路径 --> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> &