![](https://img-blog.csdnimg.cn/20201014180756925.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
胡老大的唯一大老婆
这个作者很懒,什么都没留下…
展开
-
react 生命周期函数详解和使用场景
react生命周期函数图解生命周期函数指在某一个时刻组件会自动调用执行的函数,大致是四个大模块如下图Initialization:constructor实质上就是初始化的一个方法Mounting: 一、componentWillMount // 当组件即将挂载到页面的时候执行,页面还未挂载 二、render // 负责页面重新渲染,挂载。 三、component...原创 2019-05-19 09:06:56 · 463 阅读 · 0 评论 -
redux的基础详解和使用方法
reduxredux就是将组件的数据放到一个公共的store里,大家都可以去读取,把数据的传递简化了。一个组件改变了store的值,其他的组件就会知道,然后会去取改变之后的数据redux=reducer+fluxredux工作流...原创 2019-05-23 13:59:22 · 2586 阅读 · 0 评论 -
antd的使用
antd的使用:antd的官网有每一个组件的详细使用代码,下面简单描述一下1:安装 npm install antd --save2.样式引入import ‘antd/dist/antd.css’;3.eg 引入import { Input } from ‘antd’;4.使用<Input placeholder={‘请输入’}/>...原创 2019-05-22 07:31:36 · 22839 阅读 · 0 评论 -
ios8 H5打开白屏解决方法
方法一main.jsimport Es6Promise from 'es6-promise'require('es6-promise').polyfill();Es6Promise.polyfill()方法二修改下图内容注释掉如下原创 2019-05-23 11:33:22 · 2842 阅读 · 0 评论 -
使用redux-thunk中间件进行异步请求
1、安装 npm install redux-thunk2、引入,在store文件下,index中引入iimport { createStore,applyMiddleware } from 'redux';import reducer from './reducer'import thunk from 'redux-thunk';const store = createStore...原创 2019-05-28 18:34:42 · 742 阅读 · 0 评论 -
redux-saga中间件的使用
中间件是值action和store的中间原创 2019-06-03 20:34:39 · 705 阅读 · 0 评论 -
react-redux的使用
1、安装npm install --save react-redux2、引入import store from './store/store'import {Provider} from 'react-redux'const App=( <Provider store={store}> //Provider和store联结,Provider里面的所有组件都有获取st...原创 2019-06-04 19:06:45 · 628 阅读 · 0 评论 -
styled-components的基础用法
styled-components主要是对css样式进行全局管理最新版的 styled-components v4 已经将原有的 injectGlobal() 方法替换成了 createGlobalStyle() ,而且用法也和之前的 injectGlobal 方法不同了。使用方法:1、安装:npm add styled-components2、新建一个style.js文件import ...原创 2019-06-26 13:49:48 · 1666 阅读 · 0 评论 -
react styled-components 使用Iconfont的使用
1、登录iconfont.cn2、点击图标管理->我的项目右上角文件+ 来创建一个项目3、选择自己想要的图标,加入到购物车4、点击购物车,将所有的图标加入到项目5、点击下载至本地6、解压下载的包,下图中的文件是 有用的 7、新建一个iconfont文件夹,将上图中的文件放入修改iconfont.js文件如下import {createGlobalStyle} from...原创 2019-06-26 19:16:59 · 1110 阅读 · 0 评论 -
combineReducers使用
import {combineReducers} from ‘redux’ //可以将小的reducer合并在一起import headerReducer from ‘…/common/header/store/reducer’export default combineReducers({header:headerReducer})可以将reducer按模块拆分后,用combineR...原创 2019-06-27 19:05:26 · 1275 阅读 · 0 评论 -
immutable.js的使用
防止在reducer中修改statefacebook提供了immutable库immutable对象是不可改变的用法:npm install immutablereducer中如下用const { fromJS } = require(‘immutable’);const defaultState= fromJS({//转化程immutable对象focused:false})...原创 2019-06-28 09:48:55 · 1349 阅读 · 0 评论 -
react 子组件的引用 父子组件传值
子组件的引用首先在父组件中 import ChildCon from './ChildCon'然后在父组件中直接引用<ChildCon/>父子组件传值通信父组件向子组件传值 父组件通过属性的方式给子组件传值子组件通过this.props.content接收参数## 子组件调用父组件的方法父组件的写法: 父组件将有this参数的方法传递给子组件子组件直接调用...原创 2019-05-12 20:21:44 · 265 阅读 · 0 评论 -
React中的响应式设计思想和事件绑定
首先在js里面写的一些标签就是jsx语法jsx中,要使用自己创建的组件,直接,首字母必须大写事件绑定,onClick={this.handleMethod.bind(this)}原创 2019-05-12 19:59:13 · 516 阅读 · 0 评论 -
react中ref的使用
react获取元素DOM的两种方式1、e.target2、ref<inputid=“insertArea”className=‘input’value={this.state.inputValue}onChange={this.handleInputChange}ref={(input) => {this.input=input}}/>ranhou...原创 2019-05-16 20:12:18 · 803 阅读 · 0 评论 -
Charles 进行react的本地数据mock
第一步:新建一个json文件第二步:下载安装Charles下载地址:https://www.charlesproxy.com/,选择相应的版本下载并且安装安装完成后。点击菜单栏的tools,选择Map Local Settingds,然后Add一个设置Local path指向自己新建的json文件,然后在react里面axios.get('/api/todolist') ...原创 2019-05-19 10:56:58 · 634 阅读 · 1 评论 -
react的css过渡动画、react-transition-group、ransitionGroup的使用方法
css过渡动画<div className={this.state.show ? 'show' : 'hide'}>hello</div>.show{/*opacity: 1;*//*transition: all 1s ease-in ; !*所有属性都将获得过渡,ease-in代表动画曲线*!*/animation: showitem 2s ease-in f...原创 2019-05-19 15:14:25 · 691 阅读 · 0 评论 -
react开发环境搭建 create-react-app,工程目录简介
react环境搭建原创 2019-05-07 19:44:02 · 1337 阅读 · 0 评论 -
安装react开发调试工具
调试工具的配置在谷歌浏览器中打开如下图第一步:第二部:第三步:第四步:翻墙然后搜索添加只Chrome。然后屏幕的右上方出现如下图可以在调试模式下面看到一些react的数据...原创 2019-05-16 13:36:34 · 754 阅读 · 2 评论 -
PropTypes和DefaultProps的使用
PropTypes 和 DefaultPropsimport PropTypes from 'prop-types';//对组件属性进行强校验TodoListItem.propType = {content: PropTypes.string, //content必须是String类型handleItemDel:PropTypes.func,//handleItemDel必须是一个...原创 2019-05-16 14:54:23 · 1057 阅读 · 0 评论 -
props、state与render函数
props、state与render函数当state或者props发生改变的时候,render函数就会重新执行父组件中的数据发生变化,父组件的render函数会重新执行。如果子组件有引用变化的数据,那么子组件的render方法也会被执行eg:父组件内容 <Test content={this.state.inputValue}/>(Test是子组件 )子组件内容:ren...原创 2019-05-16 15:27:38 · 432 阅读 · 0 评论 -
redux进阶、无状态组件、UI组件和容器组件的拆分
UI组件和容器组件拆分就是将父组件render里面的任何模块都可以拆分程ui组件。然后通过父子组件通信的方式进行数据交互如果父组件的函数有出了this之外的参数,则要用剪头函数进行传值例如下面的list,是一个子组件,delItem函数是父组件传过来的,但是除此之外,还有一个index参数。 <List bordered ...原创 2019-05-25 14:41:00 · 628 阅读 · 0 评论 -
react中的虚拟DOM,虚拟DOM为何大大提升性能
此文档通过慕课网学习视频做的笔记看官莫急,急的话,直接看最后 改进方法二 React原始方法1、state数据2、JSX 模版3、数据+模版 结合,生成真实的DOM,来显示4、state发生改变5、数据+模版 结合,生成真实的Dom,替换原始的DOM缺陷:第一次生成真实的完整的dom片段第二次生成真实的完整的dom片段第二次的dom替换第一次的dom,非常耗性能改进方法一...原创 2019-05-16 16:55:06 · 1349 阅读 · 0 评论 -
react 虚拟dom和Diff算法
上一篇博客中,提到react的虚拟DOM,新旧虚拟DOM做对比,那么是如何对比,通过什么算法对比呢?就是diff算法,即difference1、同层比对二、通过key值进行比对,提高效率。key值一定要用稳定的数据。比如index实际上是不稳定的。因为删除之后他的下标其实还在,只不过下边对应的值变了。右上图可以看出,循环放到页面的数据,尽量不要用index作为key值。因为,删除一个值的...原创 2019-05-16 19:12:33 · 195 阅读 · 0 评论 -
redux中发送异步请求获取数据
mac 终端新建一个文件命令touch 文件名.后缀eg:touch list.json原创 2019-05-25 16:21:08 · 576 阅读 · 1 评论 -
什么是路由,如何在react中使用路由react-router-dom
路由就是根据URL的不同显示不同的内容react-router-dom的使用方法:npm install react-router-dom引入:App.js中引入import { BrowserRouter,Route} from ‘react-router-dom’使用基本使用 跳转BrowserRouter代表路由,Route代表路由规则 <BrowserRoute...原创 2019-07-03 22:34:49 · 250 阅读 · 0 评论