![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
非著名奶茶爱好者
欢迎大家交流~
展开
-
规范写代码 - DVA怎么连model
1.关系图2.model结构3.例子model页面import {Reducer,Effect,Subscription} from "umi"interface UserModelType { namespace: 'users', // 命名空间 state: {}, // 初始状态 reducers: { // 与page页面建立联系,所以要return getList: Reducer }, effects: { // 异步操作,返给reducers原创 2021-09-07 21:26:58 · 306 阅读 · 1 评论 -
react中对cookie的使用(持久化保存数据)
一般用于登录时持久化全局存储用户名密码// 安装cookienpm install react-cookies --save// 导入cookieimport cookie from 'react-cookies'// 保存cookie// {path:'/'}意思是所有页面都能用这个cookiecookie.save('account',values,{path:'/'})// -----------------------------------------------------原创 2021-09-06 12:01:07 · 1882 阅读 · 0 评论 -
React - 订阅和发布
React中,只有父子组件之前可以通过props进行通信,兄弟组件之间若想通信需要通过父子组件之间的关系一层一层传递,将信息传给共同的父组件,进而实现通信这样做是非常繁琐的!!因而 消息订阅和发布机制可以实现兄弟组件的通信,使用的库是PubSubJS具体使用方法如下:yarn add pubsub-js 或者npm安装pubsub-js在页面中引入PubSubimport PubSub from 'pubsub-js'发布消息 PubSub.publish(message,data)原创 2021-06-17 10:58:45 · 536 阅读 · 0 评论 -
React遇到的Bug - Cannot read property ‘map‘ of undefined
1.Cannot read property ‘map’ of undefined原创 2021-05-24 17:23:19 · 326 阅读 · 0 评论 -
React - github搜索小案例
案例最终效果如下:可将页面拆成三个组件目录如下1.思路初始化状态用户点击search按钮后,根据input中的value值获取内容并更新到状态中发送网络请求,将value拼接得到response并更新状态请求的数据进行展示完善用户体验,添加一些状态,第一次输入时,正在加载时,响应错误时2.主要逻辑代码脚手架配置代理,解决跨域问题,setupProxy.jsconst proxy = require('http-proxy-middleware')module.expo原创 2021-05-22 21:47:56 · 212 阅读 · 2 评论 -
React - 受控组件和非受控组件
1.非受控组件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><!--准备好一个容器--><div id="test"></div><!--引入react核心库--><script sr原创 2021-05-16 12:39:46 · 176 阅读 · 6 评论 -
React - ref的使用
1.字符串形式的ref用的很少,以后可能会停用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ref</title></head><body> <!--准备好一个容器--> <div id="test"></div> <!--引入r原创 2021-05-15 20:13:17 · 67 阅读 · 0 评论 -
React - 案例(可改变this指向)
注意:初始化状态——this.state={}bind()可改变this指向,需要赋值changeWeather放在哪里? - Weather的原型对象上,供实例使用由于changeWeather是作为onClick的回调,所以不是通过实例调用的,是直接调用类中方法默认开启局部严格模式,所以changeWeather中的this为undefined<!DOCTYPE html><html lang="en"><head> <meta ch原创 2021-05-15 16:26:53 · 103 阅读 · 0 评论 -
React - jsx小练习
注意data虽然可以直接for循环,但是会缺少标签样式,所以用map()修改。js表达式要加{}<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>jsx小练习</title></head><body> <!--准备好一个容器--> <div id="test">原创 2021-05-14 13:05:15 · 128 阅读 · 0 评论 -
React - jsx语法规则
jsx语法规则定义虚拟DOM时,不要写引号。标签中混入JS表达式要用{}.样式的类名指定不要用class,要用className。内联样式,要用style={{key:value}}形式写,value注意加引号。只有一个根标签。标签必须闭合。标签首字母a.若小写字母开头,则将标签转为html同名元素,若html无该标签对应同名元素,则报错。b.若大写字母开头,react就去渲染对应组件,若组件没有定义,则报错<!-- jsx语法规则: 1.定义虚拟DOM原创 2021-05-14 12:32:18 · 285 阅读 · 0 评论 -
React -虚拟DOM和真实DOM
关于虚拟DOM:1.本质上是Object对象(一般对象)2.虚拟DOM比较“轻”,真实DOM比较“重”,因为虚拟DOM是React内部在用,无需真实DOM那么多属性3.虚拟DOM最终会被React转化为真实DOM,呈现在页面上原创 2021-05-14 11:51:27 · 120 阅读 · 0 评论 -
React - hello_react
注意:引入核心库必须早react-dom库之前type = “text/babel” 类型要写babel,它是将jsx转为jsReactDOM需要大写!<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hello_react</title></head><body> <!--准备原创 2021-05-14 11:33:20 · 68 阅读 · 0 评论