随笔分类 - react
摘要：- react-router官网：https://reactrouter.com/ 2021年11月 react router 6 成为默认版本，npm安装时自动安装6版本 每次react router发布都会有3个版本 react-router ： 路由的核心库，提供了很多组件钩子 react-r
阅读全文
摘要：- 一、setState的两种用法： setState是异步的调用，当我们代用过setState后，紧接着打印state的值，发现是更改之前的值。 对象式和函数式 import React, { Component } from 'react' export default class Demo e
阅读全文
摘要：- react-redux： facebook团队发现程序员都喜欢用redux在react项目中管理自己的状态，于是就开发了react-redux，目的是让程序员更方便的在react中使用redux。 ui组件一般放在components文件夹下，容器组件放在container文件夹下 ui组件的容
阅读全文
摘要：- redux不是facebook团队开发的，不是只有react才可以用，angla、vue也可以用，不过vue中有专业的状态管理插件，vuex。vue3也出了一个pina。vue中并不用redux。 使用redux的原则是。能不用就不用，除非，不用比用更费劲。 react components ：
阅读全文
摘要：- antd官网：https://ant.design/components/ 安装： npm install antd 简单使用： import React from 'react' import './App.css' import { Button, DatePicker } from 'an
阅读全文
摘要：- react路由其实是借助BOM中的History对象实现的，专门有一个history.js的库，可以让操作history对象简单起来。 用history.js可以通过两种方式创建路由对象： 1、History.createBrowserHistory() // 直接使用h5推出的history身
阅读全文
摘要：- 在未接触redux之前，兄弟组件之间共享状态，需要把状态提升到公共的父组件，然后父组件用props传给子组件，实现兄弟组件状态共享。 还有一种方法可实现兄弟组件的通信，pubsub-js npm地址：https://www.npmjs.com/package/pubsub-js pubsub-j
阅读全文
摘要：- 如果项目中就请求一个地址可以直接在package.json中配置 有点：配置简单，不用加前缀 缺点：不能配置多个代理 "proxy": "http://localhost:5000" 如果项目中需要配置多个代理 优点：可以配置多个代理 react17版本的代理配置需要在src/setupProx
阅读全文
摘要：- 假如有一个hello组件 hello组件： import { Component } from 'react' import hello from './index.module.css' // 模块化import './index.css' // 非模块化 后引入的组件，假如和前面的的组件内的
阅读全文
摘要：- react脚手架使用webpack搭建的 webpack有各种loader、plugins为我们完成很多功能；比如语法检查、代码压缩、兼容性处理、图片压缩 facebook已经为搭建好了react脚手架： create-react-app 全局安装react脚手架 npm install cre
阅读全文
摘要：- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="
阅读全文
摘要：- 生命周期回调函数 生命周期钩子函数 生命周期函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta
阅读全文
摘要：- 比如表单、input、radio、checkbox等标签，数据现用现取的标签叫非受控组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conte
阅读全文
摘要：- ref让react更容易获取dom，和id比较像。只要在dom上定义ref属性，就可以在组件实例的this.refs中获取到对应的dom元素。 字符串形式的refs <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m
阅读全文
摘要：- html标签可以在标签上写自定义属性，那么react的组件，也可以像传属性一项，给组件传props； react组件接收到传入的属性后，会自动塞进实例的props属性中，通过this.props可以拿到外部传入的属性 来看一下props的基本使用 <!DOCTYPE html> <html la
阅读全文
摘要：- class Car{ // 类中考科一直接写赋值语句，如下代码的含义是：给Car的实例对象添加一个属性，名为a，值为1 a = 1; b } console.log(Car); let c = new Car() console.log(c, 'c '); // Car {a: 1, b: un
阅读全文
摘要：- <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="
阅读全文
摘要：- 今天看到react类组件内部的方法中this为undefined，原因是class类内部的方法，自动开启了局部严格模式，不是babel的问题 特此实验一下： // 类内部的方法，自动开启了局部严格模式 class Person { constructor(name, age) { this.na
阅读全文
摘要：react是一个将数据转换为html的js库 react英文官网：https://reactjs.org react中文官网：https://react.docschina.org 用react渲染一段文字： <!DOCTYPE html> <html lang="en"> <head> <meta
阅读全文
