![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react的学习
木厶
这个作者很懒,什么都没留下…
展开
-
React——props.history 是 undefined
用 withRouter 包裹导出import { withRouter } from 'react-router-dom'export default withRouter(XXX);原创 2020-05-16 22:12:23 · 1294 阅读 · 0 评论 -
React——使用axios确实发送了数据,但JAVA后台接受的为空
1、下载安装包npm i qs -D2、在项目中引入并使用import qs from 'qs'axios.post('api/user/get_question.do', qs.stringify({ username})).then()原创 2020-05-16 22:10:29 · 363 阅读 · 0 评论 -
React —— 路由异步加载 / 懒加载
1、下载包npm install react-loadable2、在要懒加载的文件夹下创建 loadable.jsimport React from 'react'import Loadable from 'react-loadable'const LoadableComponent = Loadable({ loader: () => import('./'), /...原创 2020-05-03 21:22:02 · 445 阅读 · 0 评论 -
React——路由
1、下载对应的包npm i react-router-dom2、创建放置路由文件的文件夹(此为个人习惯,只供参考)pages —— 总文件夹home —— home路由的总文件夹components ——用于放置home的子组件index.js —— home的总入口styled.js —— home总入口的css文件3、在 App.js 中引入并使用path...原创 2020-04-29 15:05:30 · 162 阅读 · 0 评论 -
React实战——immutable 和 数据管理
前言:如果某一天,组件1里的数据 data, 组件2突然需要使用,而这时候再把,被组件1私有化的data放到store中,会比较麻烦,所以建议所有数据在一开始就放到store1、在组件内创建文件夹store,并在store中创建文件reducer.js2. 在reducer.js中定义所需要的数据和处理const defaultStore = { [数据]}export d...原创 2020-04-16 17:53:50 · 198 阅读 · 0 评论 -
React实战——使用iconfont
1、下载需要的iconfonticonfont官网把需要的iconfont添加至项目,并下载2、精简下载包建立文件夹 ./static/iconfont把下载包解压到上面的文件夹中, 并留下有用的文件把 iconfont.css 改名为iconfont.js,并全局引用注:把 @font-face 里面的 iconfont开头的 前面加上相对路径 ./把下面伪选择器的...原创 2020-04-16 11:20:55 · 621 阅读 · 0 评论 -
React实战——css组件化
前言:如果css不实现组件化管理的话,可能会起到冲突,如命名冲突等目录:1、下载安装 styled-components2、全局样式3、组件内样式1、下载安装 styled-components npm install styled-components -D2、全局样式在 src 下创建 styled.js 文件,并在 index.js 中引入styled.jsimp...原创 2020-04-15 21:51:31 · 335 阅读 · 1 评论 -
Redux—— react-redux :简化 redux
1、下载 react-reduxnpm install react-redux以下例子是:input框的值使用store里的值,并且改变input框里的值会同时改变store里的值2、在 index.js 中配置引入 react-redux 的连接组件 Provider引入 store使用 Provider 包裹子组件,并传入store,这样 Provider 的子组件都可以使...原创 2020-04-14 22:26:12 · 152 阅读 · 0 评论 -
Redux——redux-thunk:使得action可以是一个函数
前言:对于复杂的action,如ajax异步请求后修改store,建议使用 redux-thunk 来简化 action1、下载 redux-thunk 和配置 redux-thunk下载 redux-thunknpm i redux-thunk基本配置,在 ./store/index.js 中配置import { createStore, applyMiddleware }...原创 2020-04-14 17:55:18 · 179 阅读 · 0 评论 -
React——拆解组件成UI组件和容器组件
前言: 在复杂的组件中,我们最好把组件拆分为UI组件和容器组件以方便我们的管理和维护1、拆解前的组件拆解即把 JSX 单独放在一个组件中,并通过子组件的方式引入拆解后传递有以下几种情况:1. state里值得传递2. 不带参数的函数的传递3. 带参数的函数的传递import React, {Component} from 'react'class Test extends ...原创 2020-04-13 11:46:21 · 438 阅读 · 0 评论 -
Redux——actionCreator(action的统一管理)
前言:在大型项目中,直接把action写在组件中,会很散乱,改和找都不好,所以如果action多了的话,建议在 /src/store/actionCreator.js 中统一管理1、actionCreator.js导出一个函数传入的参数是valuereturn一个对象export const [xxxxxAction] = (value) => ({ type: [xxx],...原创 2020-04-13 09:43:16 · 1584 阅读 · 0 评论 -
Redux——读写store
1、React Component明确你要哪个组件使用 store 中的数据2、React Component -> Action Creators在组件中构造 actiontype —— action的类型,用来判断是哪个事件要改变storevalue —— 要修改成什么值使用 dispatch(action) 发送给store例:当我改变input中的值,会触发...原创 2020-04-12 20:05:47 · 146 阅读 · 0 评论 -
Redux——读取store的数据
需要安装 redux 包npm install redux 1、store:src/store/index.js —— store仓库import {createStore} from 'redux'import reducer from './reducer'const store = createStore(reducer) // 把下面的记录本内容传给storeexpo...原创 2020-04-12 18:08:14 · 690 阅读 · 0 评论 -
React——react-transition-group
1、安装 react-transitin-group 包npm install react-transition-group2、引入 react-transition-group 包import {CSSTransition} from 'react-transition-group'3、使用 CSSTransition 包裹里面的标签就可以做对应的运动了<CSSTran...原创 2020-04-12 13:50:51 · 237 阅读 · 0 评论 -
React——axios
1、安装 axios 包npm install axios2、在 componentDIdMount 生命周期函数中调用 axios原创 2020-04-11 22:34:50 · 63 阅读 · 0 评论 -
React——生命周期
一、组件初始化(initialization)阶段super(props),将父组件的props传给给子组件constructor()用来做一些组件的初始化工作,如定义this.state的初始内容二、组件的挂载(Mounting)阶段componentWillMount —— 在组件被挂载到页面之前调用,只调用一次rendercomponentDidMount —— 在组件...原创 2020-04-11 21:49:58 · 120 阅读 · 0 评论 -
React——操作DOM的ref和注意事项
1、获取ref在你要获取的 dom 上添加 ref 属性ref={ (dom) => { this.[自定义名字] = dom } }通过 this.[自定义名字] 来调用Test.js —— 点击 Test 能打印出 div 这个DOM节点import React, {Component, Fragment} from 'react'class Test exten...原创 2020-04-11 19:37:08 · 177 阅读 · 0 评论 -
React——简单的虚拟DOM理解
1、当组件的 state 或 props 发生改变,组件的 render 会重新执行一次根据 state,得到数据根数 JSX,得到模板数据 + 模板 结合,生成真实的DOM,显示<div id="one"><span>one</span></div>生成虚拟DOM(JS对象,用来描述真实的DOM)——会消耗性能,但代价低['d...原创 2020-04-09 13:19:00 · 112 阅读 · 0 评论 -
React——传值的校验和默认值
1、传值的校验引入 prop-typesimport PropTypes from 'prop-types'对 propTypes 进行设置 (注意是 小写p 开头,和包名的 大写P 开头不一样)// 单类型校验[组件名].propTypes = { [键名]: PropTypes.[类型]}// 组合类型校验[组件名].propTypes = { [键名]...原创 2020-04-09 11:19:21 · 390 阅读 · 0 评论 -
React——父子组件之间的传值
1、父向子传值父组件 向子组件自定义的属性传递值子组件 this.props.自定义的属性 接受Parent.jsimport React, {Component, Fragment} from 'react'import Child from './Child'class Parent extends Component { constructor(props){ ...原创 2020-04-08 20:00:37 · 261 阅读 · 0 评论 -
React——处理数组的值
1、追加数组的值通过…运算符把数组之前的值拆分,再在后面追加值this.state = { arr: []}add(){ this.setState({ arr: [...this.state.arr, [追加的值] ] })}2、删除下标为index的值把state中arr的值拷贝到新的arr中,删除新arr下标为index的值后,再重新赋值回arr...原创 2020-04-08 17:19:09 · 835 阅读 · 0 评论 -
React——循环添加DOM
总代码:import React, {Component, Fragment} from 'react'class App extends Component { constructor(props){ super(props) this.state = { list: ['a', 'b', 'c'] } } render(){ re...原创 2020-04-08 17:06:49 · 2896 阅读 · 0 评论 -
React——响应式设计和事件绑定
总代码:import React, {Component, Fragment} from 'react'class App extends Component { constructor(props){ super(props) this.state = { inputValue: '' } } render(){ return( ...原创 2020-04-08 16:32:34 · 181 阅读 · 0 评论 -
React——一个简单的APP模板
import React, {Component, Fragment} from 'react'class App extends Component { render(){ return( <Fragment> <div>hello world</div> </Fragment> )...原创 2020-04-08 15:57:08 · 369 阅读 · 0 评论 -
React——工程目录解析和简化
1、精简后的项目README.md —— 项目的介绍,可以把内容全删了,留下自己的内容package.jsonpackage-lock.json.gitignore —— 把不需要上传到git仓库的文件记录在这node_modules —— 放包的文件夹public / favicon.ico —— 项目的图标public / index.html<!DOCTYPE h...原创 2020-04-07 16:22:13 · 179 阅读 · 0 评论 -
React学习目录
第一章:初探react环境搭建原创 2020-04-07 12:07:09 · 218 阅读 · 1 评论 -
React——坏境搭建
1、通过引入 .js 文件来使用 React 不推荐(在多页面应用会变慢)2、通过脚手架工具来编码GruntGulpWebpackcreate-react-app(官方)(推荐)npm install -g create-react-app // 全局安装脚手架工具进入你要创建项目的父级文件夹create-react-app [项目名] // 脚手架自动创建项目文件夹...原创 2020-04-07 12:05:12 · 84 阅读 · 0 评论