![](https://img-blog.csdnimg.cn/20191017104224708.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
react
背太阳的牧羊人
管它什么真理无穷,进一寸有一寸的欢喜。
展开
-
react中使用useMemo和useCallback
之前学到的memo是用来优化函数组件的重渲染问题,当传入的属性值都没变化时就不会触发组件的重渲染,否则组件就会重渲染。和类组件中的PureComponent组件是类似。useMemo功能是判断组件中的函数逻辑是否重新执行,用来优化性能。import React, { useState, useMemo } from 'react';// , PureComponent, memo, useS...原创 2020-01-16 12:23:59 · 13379 阅读 · 6 评论 -
React中Memo实现指定组件进行渲染
memo可以解决react渲染时的效率问题,react可以将数据渲染在视图中,如果数据没有变化,视图还是重新渲染import React, { Component } from 'react';// , PureComponent, memo, useState, useMemo, useCallbackclass Foo extends Component { render() { ...原创 2020-01-16 11:31:22 · 1228 阅读 · 0 评论 -
异步组件及withRouter路由方法的使用
如果不用异步加载组件,打包完后的代码将会在页面第一次进入时就会全部加载进来,当应用很大时,首页加载的速度就会很慢。用第三方库来异步加载react中的组件:npm install react-loadable --save在详情页中创建 loadable.js文件:import React from 'react';//这里引入react是因为loading中返回的是一个jsx语法imp...原创 2020-01-09 14:55:38 · 448 阅读 · 0 评论 -
JSX语法
jsx语法是一种语法糖,无法被浏览器解析,它仅仅是开发环境下的写法,无法直接放在浏览器中运行,开发环境会将jsx编译成js代码才能在浏览器中运行。jsx的写法大大降低了学习成本和编码工作量,但毕竟它不是原生js所以编译后也增加了debug成本。jsx现在已经成了独立的标准,可以单独拿出来用。虽然是react引入的,但不再是react独有的。react已经把它作为开放标准,其它库中也可以用,Re...原创 2019-10-10 14:36:16 · 355 阅读 · 0 评论 -
react中自定义组件的解析过程
import Input from './input/index.js'import List from './list/index.js'function render() { return ( <div> <p>this is demo</p> <Input addTitle...原创 2019-10-12 10:41:40 · 424 阅读 · 0 评论 -
使用Redux-thunk中间件发送ajax请求
这个组件在componentDidMount生命周期函数里进行ajax请求,这么写没什么大问题,但是如果我们把异步请求或者复杂的逻辑都放在组件里实现的时候,组件就会显得过于臃肿,所以遇到异步请求或者复杂的业务逻辑就要把它移到其它的地方进行统一的管理,此时我们就可以移到redux-thunk这个中间件来进行管理,redux-thunk可以把这些异步请求或者复杂的业务逻辑放在action里去处理,r...原创 2019-03-26 10:47:03 · 459 阅读 · 0 评论 -
React初识(二)
React中的组件/src/index.js是整个程序的运行入口index.jsimport React from 'react';import ReactDOM from 'react-dom';//下面的App就是一个小的组件import App from './App';//PWA(progressive web application)它的理念是希望我们通过写网页的形式写手机...原创 2019-03-19 14:12:56 · 176 阅读 · 0 评论 -
到底什么是Redux中间件
它可以帮助我们在action里面去写函数,既然是中间件,肯定就是谁和谁的中间view在redux中会派发一个action,action通过store的dispatch方法派发给store,store接收到action连同之前老的state一起传给reducer,reducer返回新的数据给store,store去改变自己的state,这是redux的流程。redux中间件的中间指的是actio...原创 2019-03-26 11:35:37 · 1466 阅读 · 2 评论 -
Redux-saga中间件的使用
中间件是action和store的中间,所以指的是redux的中间件,只有redux才有action和store的概念。所以不是react的中间件是redux的中间件,不要弄混了。在之前的redux-thunk里我们把异步的代码都放在了action里面了,如下:redux-saga也是做异步代码拆分的中间件。下面是最初始的不用任何中间件的代码:下面使用redux-saga来实现异步功...原创 2019-03-26 14:54:23 · 775 阅读 · 0 评论 -
react-redux的使用(一)
react-redux是一个第三方的模块,它可以帮助我们在react中更方便的使用redux。把之前的文件全都删掉,重新编写。先安装react-redux:npm install react-redux接着新建TodoList组件:Provider是react-redux提供的一个核心api,它的意思是:我的提供器连接了store,Provider组件和store做了关联,那么Prov...原创 2019-03-26 16:53:13 · 197 阅读 · 0 评论 -
react-redux的使用(二)
总结:当点击提交按钮时会执行handleClick方法,这个方法会把action传给store,接着传给reducer,reducer接收到这个action之后就会去处理数据把新的数据返回给store,数据发生了改变,组件恰好又通过connect跟数据做了连接,所以这块是自动的过程,数据一旦发生了改变组件就会自动改变,以前还需要调用store.subscribe()方法做订阅,现在不需要了。...原创 2019-03-26 17:18:11 · 299 阅读 · 0 评论 -
无状态组件
当一个组件只有render函数的时候,我们就可以用一个无状态组件来定义这个组件。其实无状态组件就是一个函数,同时这个函数会接收一个props,也就是父组件传递过来的内容。此时可以直接用props而不是this.props无状态组件相对普通组件的优势在:无状态组件的性能比较高,因为它就是一个函数,而普通的组件是普通的JS里的类,这个类生成的对象里面还会有一些生命周期函数,它执行起来既要执行生命...原创 2019-03-26 09:34:29 · 769 阅读 · 0 评论 -
React初识(一)
React Fiber(React16大版本),这个版本的React在性能和便捷度上都有大幅度的提升。在16版本中,react底层在事件循环中加入了优先级等一些概念,可以利用事件循环的碎片时间执行一些高优先级的用户交互,提高react.js使用过程中的用户体验。create-react-app这个脚手架工具进行项目的搭建。脚手架是前端开发过程中的辅助工具,它会自动帮我们构建前端开发大型项目中的流...原创 2019-03-19 10:40:50 · 173 阅读 · 0 评论 -
React基础内容(二)
拆分组件与组件之间的传值TodoList.jsimport React, { Component } from 'react';import 'antd/dist/antd.css';import store from './strore/index';import {getInputChangeAction,getAddItemAction,getDeleteItemAction,g...原创 2019-03-19 17:42:20 · 136 阅读 · 0 评论 -
React中PropTypes与DefaultProps
react中每个组件都有自己的props参数,这个参数是从父组件接收的属性,在接收参数的时候对接收的参数类型做校验以及定义参数的默认值,这就涉及到PropsTypes和DefaultProps具体看React官网的高级部分指南。...原创 2019-03-20 09:39:50 · 437 阅读 · 0 评论 -
React中Props,State与render函数,虚拟DOM,Diff算法
React中Props,State与render函数之间的关系react是由数据驱动的框架,当数据发生变化页面就会自动的发生变化。它背后的原理,,,数据和页面联动的机理当组件的state或者props发生改变的时候,render函数就会重新执行,页面就会从新被渲染,因为页面是由render函数渲染出来的。同时,当父组件的render函数被运行时,它的子组件的render都将被重新运行一次什...原创 2019-03-20 17:19:04 · 929 阅读 · 0 评论 -
React中ref的使用
React中ref的帮助我们直接获取DOM元素,这里会有个小坑。DOM的获取并不及时,因为setState是一个异步函数。需要在页面更新完之后再获取DOM,就要使用setState的第二个参数,也就是异步后的回调函数。注意:下面的获取的长度总是比实际的少一个,因为setState是一个异步函数。...原创 2019-03-21 11:10:20 · 449 阅读 · 0 评论 -
React中的生命周期函数
生命周期函数是指在某一个时刻组件会自动调用执行的函数render函数会在state或props值发生改变的时候重新执行一次,它是自动被组件调用重新执行的。所以render函数是一个生命周期函数。constructor构造函数,在组件创建的时候,constructor也会被自动调用执行,它是在组件一创建的时候被调用,但是,constructor并不是react所独有的,它是ES6语法中自带的函数...原创 2019-03-21 14:19:59 · 1097 阅读 · 0 评论 -
React生命周期函数的使用场景
所有的生命周期函数都可以不存在,但是render这个生命周期函数必须要有。我们的组件是从react的Component类继承,React的Component类里面默认内置了其它所有的生命周期函数,唯独没有内置render的默认实现,所以对于我们自己定义的组件render函数是一定要存在的。对于一个组件,当这个组件的父组件的render函数被重新执行时,父组件里的子组件的render函数也会重新...原创 2019-03-21 15:25:18 · 848 阅读 · 0 评论 -
react + Redux写的小demo(一)
Redux是解决数据传递问题的一个框架,它把所有的数据都放在store里进行管理。npm install reduxsrc/store/index.js(管理员)import { createStore } from 'redux';import reducer from './reducer';//引入小手册,并把这个笔记本小手册传给createStoreconst store =...原创 2019-03-25 16:48:35 · 774 阅读 · 0 评论 -
react + Redux写的小demo(二)
每个action都有自己的一个type类型,reducer会接收action的type类型,然后根据不同的类型去改变对应的数据。为了减少拼写带来的错误,就新建一个actionType.js文件专门来定义action的type类型。然后在reducer文件里和组件里面都引入actionType.js文件并用里面的常量。用actionCreator.js文件来统一创建action。当我们在派发...原创 2019-03-25 17:29:18 · 170 阅读 · 0 评论 -
Redux
Redux概念简述react本身是非常轻量级的视图层框架以前用react写项目时组件就构成了一个应用,加入下面绿色的组件要和顶层的组件通信,如果一个应用中组件很多,组件之间经常要共享一些数据,进行数据的传值,如果只用react写,那将会很复杂,因为组件传值变得很麻烦了,所以说react只是非常轻量级的视图层框架。如果做大型的应用,就需要在react的基础上配套一个数据层的框架和它结合使用。...原创 2019-03-22 11:16:36 · 1724 阅读 · 0 评论 -
UI组件与容器组件的拆分
UI组件也叫傻瓜组件,称它傻是因为它只负责页面的显示没有任何逻辑。容器组件也叫聪明组件,容器组件并不管页面长什么样子,它关注的是整个页面的业务逻辑。组件渲染是由render决定的,在前面组件的渲染和所有的逻辑都写在了一个文件中。当我们把一个组件的逻辑和渲染都放在一个文件里管理的时候组件维护起来会比较困难,于是就需要对组件做一个拆分,让UI组件来专门做渲染,容器组件专门来处理逻辑部分。上面代...原创 2019-03-26 09:22:54 · 733 阅读 · 0 评论 -
React基础内容(一)
React中的响应式设计思想和事件绑定,React的设计思想和我们以前直接操作dom完全不同,以前我们想把输入框里面的内容添加到页面中需要频繁的操作DOM,React是一个响应式的框架,它强调的是我们不要操作dom而是操作数据,通过数据的变化react会自动感知到数据的变化自动的去帮我们生成dom,在写react代码时我们不再关注dom的操作,只需要关注数据层的操作就好了。在JS里,一个clas...原创 2019-03-19 15:25:39 · 204 阅读 · 0 评论