![](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 · 455 阅读 · 0 评论 -
redux的基础详解和使用方法
redux redux就是将组件的数据放到一个公共的store里,大家都可以去读取,把数据的传递简化了。一个组件改变了store的值,其他的组件就会知道,然后会去取改变之后的数据 redux=reducer+flux redux工作流 ...原创 2019-05-23 13:59:22 · 2582 阅读 · 0 评论 -
antd的使用
antd的使用:antd的官网有每一个组件的详细使用代码,下面简单描述一下 1:安装 npm install antd --save 2.样式引入import ‘antd/dist/antd.css’; 3.eg 引入import { Input } from ‘antd’; 4.使用<Input placeholder={‘请输入’}/> ...原创 2019-05-22 07:31:36 · 22819 阅读 · 0 评论 -
ios8 H5打开白屏解决方法
方法一 main.js import Es6Promise from 'es6-promise' require('es6-promise').polyfill(); Es6Promise.polyfill() 方法二 修改下图内容 注释掉如下原创 2019-05-23 11:33:22 · 2703 阅读 · 0 评论 -
使用redux-thunk中间件进行异步请求
1、安装 npm install redux-thunk 2、引入,在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 · 733 阅读 · 0 评论 -
redux-saga中间件的使用
中间件是值action和store的中间原创 2019-06-03 20:34:39 · 701 阅读 · 0 评论 -
react-redux的使用
1、安装 npm install --save react-redux 2、引入 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 · 627 阅读 · 0 评论 -
styled-components的基础用法
styled-components主要是对css样式进行全局管理 最新版的 styled-components v4 已经将原有的 injectGlobal() 方法替换成了 createGlobalStyle() ,而且用法也和之前的 injectGlobal 方法不同了。 使用方法: 1、安装:npm add styled-components 2、新建一个style.js文件 import ...原创 2019-06-26 13:49:48 · 1659 阅读 · 0 评论 -
react styled-components 使用Iconfont的使用
1、登录iconfont.cn 2、点击图标管理->我的项目 右上角文件+ 来创建一个项目 3、选择自己想要的图标,加入到购物车 4、点击购物车,将所有的图标加入到项目 5、点击下载至本地 6、解压下载的包,下图中的文件是 有用的 7、新建一个iconfont文件夹,将上图中的文件放入 修改iconfont.js文件如下 import {createGlobalStyle} from...原创 2019-06-26 19:16:59 · 1091 阅读 · 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 · 1272 阅读 · 0 评论 -
immutable.js的使用
防止在reducer中修改state facebook提供了immutable库 immutable对象是不可改变的 用法: npm install immutable reducer中如下用 const { fromJS } = require(‘immutable’); const defaultState= fromJS({//转化程immutable对象 focused:false }) ...原创 2019-06-28 09:48:55 · 1345 阅读 · 0 评论 -
react 子组件的引用 父子组件传值
子组件的引用 首先在父组件中 import ChildCon from './ChildCon' 然后在父组件中直接引用<ChildCon/> 父子组件传值通信 父组件向子组件传值 父组件通过属性的方式给子组件传值 子组件通过this.props.content接收参数 ## 子组件调用父组件的方法 父组件的写法: 父组件将有this参数的方法传递给子组件 子组件直接调用...原创 2019-05-12 20:21:44 · 262 阅读 · 0 评论 -
React中的响应式设计思想和事件绑定
首先在js里面写的一些标签就是jsx语法 jsx中,要使用自己创建的组件,直接,首字母必须大写 事件绑定,onClick={this.handleMethod.bind(this)}原创 2019-05-12 19:59:13 · 511 阅读 · 0 评论 -
react中ref的使用
react获取元素DOM的两种方式 1、e.target 2、ref <input id=“insertArea” className=‘input’ value={this.state.inputValue} onChange={this.handleInputChange} ref={(input) => {this.input=input}} /> ranhou ...原创 2019-05-16 20:12:18 · 796 阅读 · 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 · 630 阅读 · 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 · 686 阅读 · 0 评论 -
react开发环境搭建 create-react-app,工程目录简介
react环境搭建原创 2019-05-07 19:44:02 · 1328 阅读 · 0 评论 -
安装react开发调试工具
调试工具的配置 在谷歌浏览器中打开如下图 第一步: 第二部: 第三步: 第四步:翻墙 然后搜索 添加只Chrome。然后屏幕的右上方出现如下图 可以在调试模式下面看到一些react的数据 ...原创 2019-05-16 13:36:34 · 750 阅读 · 2 评论 -
PropTypes和DefaultProps的使用
PropTypes 和 DefaultProps import PropTypes from 'prop-types'; //对组件属性进行强校验 TodoListItem.propType = { content: PropTypes.string, //content必须是String类型 handleItemDel:PropTypes.func,//handleItemDel必须是一个...原创 2019-05-16 14:54:23 · 1050 阅读 · 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 · 429 阅读 · 0 评论 -
redux进阶、无状态组件、UI组件和容器组件的拆分
UI组件和容器组件拆分 就是将父组件render里面的任何模块都可以拆分程ui组件。然后通过父子组件通信的方式进行数据交互 如果父组件的函数有出了this之外的参数,则要用剪头函数进行传值 例如下面的list,是一个子组件,delItem函数是父组件传过来的,但是除此之外,还有一个index参数。 <List bordered ...原创 2019-05-25 14:41:00 · 622 阅读 · 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 · 1342 阅读 · 0 评论 -
react 虚拟dom和Diff算法
上一篇博客中,提到react的虚拟DOM,新旧虚拟DOM做对比,那么是如何对比,通过什么算法对比呢?就是diff算法,即difference 1、同层比对 二、通过key值进行比对,提高效率。key值一定要用稳定的数据。比如index实际上是不稳定的。因为删除之后他的下标其实还在,只不过下边对应的值变了。 右上图可以看出,循环放到页面的数据,尽量不要用index作为key值。因为,删除一个值的...原创 2019-05-16 19:12:33 · 192 阅读 · 0 评论 -
redux中发送异步请求获取数据
mac 终端新建一个文件命令 touch 文件名.后缀 eg:touch list.json原创 2019-05-25 16:21:08 · 564 阅读 · 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 · 248 阅读 · 0 评论