随笔分类 - 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
阅读全文