随笔分类 -  react

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

点击右上角即可分享
微信分享提示