react
MiyukkiYan
这个作者很懒,什么都没留下…
展开
-
react用到的一些插件
轮播图:https://github.com/xiaolin/react-image-gallery百度地图:vue: https://dafrok.github.io/vue-baidu-map/#/zh/indexreact: https://github.com/huiyan-fe/react-bmapEcharts:vue: vue-echartsreact: echarts-for-reacthttps://wudi98.blog.csdn.net/article/details/原创 2020-12-20 20:29:23 · 582 阅读 · 1 评论 -
使用react-redux改造redux应用中的购物车demo
入口文件 index.js:import React from 'react'import ReactDOM from 'react-dom'import {Provider} from 'react-redux'// 导入 counter 下面的仓库// import store from './components/counter/store/store'// 导入 cart-react-redux 下面的仓库import store from './components/cart-原创 2020-12-14 23:34:50 · 238 阅读 · 0 评论 -
react-redux
更加接近react,跟React进行了一个深度的集成好处:要获取仓库中的值,不需要手动的调用 store.subscribe注意点:1、不再需要导入store,然后手动的监听我们仓库中值的改变了, 它会自动监听2、store 中的代码不用变,React组件中的代码要改变3、我们所有的获取仓库中的值和更改仓库中的值,都必须经过组件的props,它其实是把获取仓库中的值和更改仓库中的值挂载到 props【它跟react-router-dom很像】步骤:https://react-redux.原创 2020-12-14 23:34:27 · 146 阅读 · 0 评论 -
react中异步action (redux-thunk)
redux-thunk:核心:执行一个函数,该函数中返回另外一个函数同步的action 与 异步的action同步的action返回的就是一个普通的对象 异步的action返回的是一个函数,在该函数中最终通过 dispatch(同步的action)步骤:1、安装包 npm i redux-thunk2、去仓库中集成 https://github.com/reduxjs/redux-thunk https://github.com/zalmoxisus/redux-devtool原创 2020-12-13 20:26:00 · 367 阅读 · 0 评论 -
redux应用
购物车案例路由Element-Reacthttps://elemefe.github.io/element-react/index#/zh-CN/quick-start注意点:Element-React 还需要安装 react-hot-loaderRedux store reducers 仓库中存放的数据类型index.jsximport React, { Component } from "react";import './Index.css' // ------------原创 2020-12-13 16:52:07 · 108 阅读 · 0 评论 -
redux基础使用
基本概念全局状态管理工具https://www.redux.org.cnRedux 和 Vuex 有何区别Redux 可以用在React、Vue、Angular中 (vue-with-Redux第三方包(npm上有使用方法)) Store reducer actionVuex 只能用在Vue中 state getters mutations actions module步骤:1、安装包,并且创建一个storenpm i redux2、创建reducer,并且集成到st原创 2020-12-13 15:31:17 · 93 阅读 · 0 评论 -
react传值时候参数类型限制
Vue:https://cn.vuejs.org/v2/guide/components-props.html#Prop-%E9%AA%8C%E8%AF%81props:{ 属性名称:{ type:'', required:true, default:xxx } }React:【PropTypes】https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html两个静态属性 (或者实例属性) defaultPr原创 2020-12-13 12:32:24 · 572 阅读 · 0 评论 -
受控组件及非受控组件
受控:为了获取到表单元素的值,但不是通过dom操作 (双向数据绑定)import React, { Component } from 'react';class Forms extends Component { constructor(){ super() this.state = { username:'zhangsan', password:'' } } handleCha原创 2020-12-13 12:13:33 · 127 阅读 · 0 评论 -
react嵌套路由
index.jsximport React, { Component } from 'react'import {HashRouter as Router,Route,Switch,Redirect} from 'react-router-dom'import Login from './Login'import Layout from './Layout'import NotFound from '../404'export default class Index extends Com原创 2020-12-13 11:32:05 · 97 阅读 · 0 评论 -
react路由
集成 react-router-domRouter 路由容器,如果想要使用路由功能,必须在最外层包裹一个Router、Router 分两种 HashRouter、BrowserRouterLink 声明式导航 Vue:Route 设置路由规则,同时又是占位符, 如果触发之后想替换到某个地方,你就写在哪里注意:1、默认情况下我们的react-router-dom中的route是模糊匹配的那么如果我们希望精确匹配,加一个exact即可2、当我们做重定向或是404处理的时候,我们使用switch包裹原创 2020-12-13 11:00:37 · 98 阅读 · 0 评论 -
react生命周期钩子
React的生命周期:https://www.cnblogs.com/qiaojie/p/6135180.html初始化阶段componentWillMount() render() componentDidMount()运行阶段Props改变 componentWillReceiveProps(nextProps) shouldComponentUpdate(nextProps, nextState) componentWillUpdata(nextProps, nextSta原创 2020-12-13 10:10:34 · 92 阅读 · 0 评论 -
react 组件传参
父组件 ===> 子组件 props父组件: render111(){ const cat = { cat_name:'蓝猫', cat_age:30 } return <div> <NoStateComponent name="张三丰" age={18}/><br/><br/><br/> &原创 2020-12-13 10:06:01 · 140 阅读 · 0 评论