![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 95
my_love_download
https://gitee.com/lh_code_store
展开
-
react之插槽
写过vue的知道slot,写过angular2+的知道<ng-content select=""></ng-content>,它们分别是实现插槽的方式,在react中也是有插槽的protals!在react项目中是通过ReactDOM.createPortal(childElements, container),来实现插槽的,它的定义是在父元素之外生成一个...原创 2020-11-15 11:20:51 · 369 阅读 · 0 评论 -
react项目拆分规则
拆分的原则1.目录设计规范----根据作用和职责2.模块定义规范----根据业务3.代码设计规范----一般的代码规范4.程序设计规范----一般原则(高内聚、低耦合等等)react项目中的目录及职责拆分:1.api需要单独封装,直接暴露返回值。2.数据层使用react-redux,异步中间件使用redux-thunk。3.视图层使用redux层面的传递过来的数据,修改逻辑也是重新触发action更改props。4.静态类型的资源单独放置5.公共组件、高阶组件、插件分开放置6.工具类文原创 2020-11-12 11:24:26 · 588 阅读 · 1 评论 -
react-router总结之路由传值
第一种浏览器地址栏看的到数据xxx/xxxx/edit/:idthis.props.match.params.id第二种浏览器地址栏看的不到数据 this.props.history.push({ pathname: '/admin/violation/edit', state: record });this.props.location.state第三种浏览器地址栏看的到数据 this.props.histo原创 2020-11-08 21:40:50 · 342 阅读 · 0 评论 -
react总结之避免不必要的重复渲染
类组件PureComponent适当的使用PureComponent创建组件可以提高性能,原创 2020-10-26 14:03:47 · 1207 阅读 · 0 评论 -
react总结之setState的异步和同步
在react中setState的更新state是同步还是异步的,跟我们使用的方式有关系!同步更新当setState在react的事件合成机制生成和生命周期函数对state更新时,是同步更新state!异步更新当setState在react的事件是原生的js绑定的事件、ajax、setTimeout、setIntervla等时是异步更新state!原因react在调用合成事件或者生命周期函数之前会先调用batchedUpdates,然后会把变量isBatchingUpdates的值由默认值fals原创 2020-10-22 09:12:11 · 124 阅读 · 0 评论 -
react总结之异步的action
开发中避免不了使用请求,这个时候就会涉及的处理异步的问题,在react中我们在使用action的时候遇到异步的问题一般会使用中间redux的中间件(applyMiddleware)来处理,使用起来也很简单,下面做一个简单的使用步骤安装redux-thunknpm install redux-thunk传入中间件export default createStore(reducers, applyMiddleware(thunk));使用setTimeout在action中模拟异步请求const原创 2020-09-07 21:26:54 · 1215 阅读 · 0 评论 -
react总结之最新的生命周期函数
一个组件存在生命周期,在一个阶段中存在一个函数,使得我们在开发中,可以在组件的生命周期中做我们想要做的事情,简单的表述为:组件一般都是有挂载->更新->销毁这三个过程.Angular和Vue的组件生命周期函数也是一样的!挂载阶段---- 挂载阶段react最新的生命周期函数constructor:构造函数,最先被执行,通常在构造函数中初始化state对象,或者给自定义的方法绑定thisgetDerivedStateFromProps:静态方法,当接收到新的属性值的时候,如果需要对st原创 2020-09-02 08:33:28 · 240 阅读 · 0 评论 -
react总结之react-redux
import React, { Component } from “react”;// 导入actionsCreatorsimport {increment, decrement} from ‘…/…/actions/cart’// connect执行之后是一个高阶组件import {connect} from ‘react-redux’class CartList extends Component {render() {return ({this.props.cartList.map原创 2020-08-24 18:03:36 · 104 阅读 · 0 评论 -
react总结之redux
其实一般在项目中,不会使用redux,因为没有自动连接,传递起来就很麻烦!这里还是总结一下redux的使用,方便以后查阅!1.首先要安装redux原创 2020-07-23 21:39:09 · 128 阅读 · 0 评论 -
react总结之自己实现一个简单的redux
在react的项目中,经常使用到redux来进行状态管理,项目中一般我选择使用react-redux!今天学习了一下自己实现一个简单的redux,来加深对react-redux的理解,代码如下:<!doctype html><html><head> <meta charset="utf-8"></head><body><button onclick="store.dispatch({type: '-', nu原创 2020-07-21 22:56:17 · 140 阅读 · 0 评论 -
react总结之HOC
react中还有高阶组件原创 2020-07-07 23:27:18 · 125 阅读 · 0 评论 -
react总结之hooks(useState,useEffect)
hooks是react16.8版本及以上版本可以使用的,它的作用就是使得我们在使用函数创建组件的时候,可以跟使用class创建组件时达到一样的效果!有了这个就不用考虑改用无状态组件还是有状态组件了!具体使用方式如下import React, { useState, useEffect} from 'react'import ReactDom from 'react-dom'// 定义函数式组件const Title = function () {// name 赋初始值为'张珊' con原创 2020-06-28 22:18:25 · 247 阅读 · 0 评论 -
react总结之生命周期函数
实际开发中,会经常使用到生命周期函数,使得在页面在浏览器上展示之后有我们需要的效果,或者在对页面上的元素进行操作的时候,页面是否要做出相应的变化!以下是常用的生命周期函数,以及执行的阶段和经常使用它来做的事情!import React, { Component, createRef } from 'react'import ReactDom from 'react-dom' class TestLive extends Component { // 最先执行构造器,只会执行一次 co原创 2020-06-27 15:51:10 · 163 阅读 · 0 评论 -
react总结之ref
react提供了creatRef方法来帮助我们获取DOM,下面代码通过creatRef来获取DOMimport React, { Component, createRef } from 'react'import ReactDom from 'react-dom' class TestRef extends Component { constructor(props) { super(props); this.state = { inpu原创 2020-06-27 14:15:09 · 141 阅读 · 0 评论 -
react总结之事件的写法
开发中的时候,总是会写各种各样的事件,来实现去后台数据交互,页面之间的交互等!在react中事件的写法有很多种,当然这些写法的最终目的是一样的,只是在代码层面所展示的有些区别!下面总结一下,我所知道的事件的各种写法!(这里明确一点,react中事件都是使用的驼峰命名的规则)第一种写法第一种写法是使用箭头函数import React, { Component } from 'react'import ReactDom from 'react-dom' class TestClick extends原创 2020-06-26 14:49:28 · 274 阅读 · 0 评论 -
React总结之setState
首先应该要明白在react中,数据是单向绑定,它是根据新的state重新渲染用户界面!在开发中,如果修改了state中值,不进行setState(状态更新),界面上不会显示最新的值的,以下是两种不同使用setState的方式1 .第一种使用情况import React, { Component } from 'react'import ReactDom from 'react-dom' class TestState extends Component { constructor(props原创 2020-06-23 22:36:37 · 81 阅读 · 0 评论 -
react总结之插入获取到的HTML元素
在vue中我们可以使用指令v-html来将获取到的HTML元素在页面上展示,在react中,同样可以将获取到的HTML元素在页面上展示.在react中,可以使用dangerouslySetInnerHTML将HTML在页面上显示,如一下代码:import React, { Component } from 'react'import ReactDom from 'react-dom' class TestHtml extends Component { constructor(props) {原创 2020-06-22 22:18:28 · 1094 阅读 · 0 评论 -
react总结之组件间传值的类型检查和默认值
import React, { Component } from ‘react’import PropTypes from ‘prop-types’class TestProp extends Component {constructor(props) {super(props);}static propTypes = {// dataText的值是string并且不可以为空dataText: PropTypes.string.isRequired}static defaultProps原创 2020-06-22 21:44:32 · 371 阅读 · 0 评论 -
react总结-----style的写法
本篇文章复习在react中style的4种写法1. 内联式(不推荐)import React, { Fragment } from "react";class Style extends React.Component { constructor(props) { super(props); } render() { const txtColor = { color: '#F00' } return ( <Frag原创 2020-06-21 18:28:33 · 3721 阅读 · 0 评论 -
react项目中通过设置代理解决跨域问题
关于使用代码解决跨域问题这个问题相信在项目初始阶段大家都是经历过的,这里记录一下踩的坑,方便以后再遇到此类问题进行解决方案1. package.json配置只需要在package.json中进行一个配置就可以了,如下:"proxy":"http://localhost:4000"方案2. 安装插件http-proxy-middleware1.安装插件npm install http-proxy-middleware --save2.配置使用const { createProxy原创 2020-06-05 14:41:58 · 588 阅读 · 0 评论 -
react集成mock
前后端分离已经是软件开发的主流,在开发的过程中,会有很多前端兄弟在想后台大佬接口写好没啊,我要调接口了,这里有时候是会影响到我们的开发效率的,当然有的同志会提出可以自己写本地JSON文件,自己伪造假数据,说实话这个方法确实可以解决问题,但是还是有弊端的,第一数据比较多的时候,一般大家都不乐意去写了,第二后台写好之后,还是要去改代码的,这个就更不舒服了!本文就是解决这个痛点的!我们可以使用Mock来造假数据,这样我们就可以直接脱离后台来写代码了,下面就简单描述一下在react中如何使用mock1. 安装Mo原创 2020-06-05 14:18:47 · 571 阅读 · 0 评论 -
React实现手写签名---react-signature-canvas
使用react-signature-canvas实现手写签名1. 首先安装插件npm install react-signature-canvas --save2.组件实现import React, { Fragment } from "react";import ReactDOM from "react-dom";import SignatureCanvas from "react-signature-canvas";import "../style/electronicSignature原创 2020-05-28 10:22:29 · 4061 阅读 · 3 评论 -
React---获取真实的DOM
在开发的过程中,某些情况我们需要获取真实的DOM,react提供了ref来让我们获取真实的DOM,然后去操作这些DOMimport React, { Fragment } from "react";import ReactDom from "react-dom";import "../style/springDropdownComponent.css";class SpringDropdownComponent extends React.Component { constructor(prop原创 2020-05-27 14:19:35 · 416 阅读 · 0 评论 -
react之react-redux
一般项目在开发过程中就会用到redux,这个时候就需要一个重要的工具react-redux!什么是react-redux?react-redux是react和redux结合的一个框架(工具),用来管理数据的state(状态)!首先需要明确的是redux是用来管理项目的state(状态)的,它可以是前后端的数据!1 . Actionsaction是一个对象.譬如下面的例子,这个action...原创 2020-04-09 14:51:47 · 148 阅读 · 0 评论 -
react 中使用ExportJsonExcel实现数据导出
项目中使用antd的Table组件,组件未提供导出Excel表格功能,但是这个功能又是比较常用的,于是便将该组件进行二次封装,使得组件在被调用时,直接配置导出按钮就可以讲数据导出1.npm安装ExportJsonExcelnpm install js-export-excel2.给表格组件添加按钮 {this.props.dataConfig.exportBtnShow === true...原创 2020-03-29 15:48:08 · 2323 阅读 · 0 评论 -
使用dva创建react项目
1.安装davnpm install dva-cli -g2.使用dav创建一个自己的项目dva new react-web3.安装antdnpm i antd --save4.安装babelnpm i babel-plugin-import --save-dev5.启动项目npm start原创 2020-03-23 22:43:12 · 353 阅读 · 0 评论 -
Angular、Vue、React前端三大框架实现各种功能的方法对比
Angular、Vue、React是前端的三大框架,他们都是SPA!就像java和c#后台语言一样,他们有很多的相似点,也有着自己的特色,作为一个框架的使用者,我更多考虑的是在什么样的场景下选择使用哪一种技术,当然为了使得自己有更多的选择那就只能把流行的框架都学习一下了,学完之后觉得都挺好的,每个框架都有自己的特色!原创 2019-12-03 09:32:55 · 1478 阅读 · 0 评论 -
React之生命周期函数的理解和应用场景
首先必须理解什么是生命周期函数一个组件从开始创建到该组件的销毁就是经历了一个生命周期,在从创建和销毁该组件的过程,该组件经历很多"事",从开始创建,然后创建完成,然后数据渲染,然后数据更新,然后数据再渲染,最后在不使用该组件时,它的销毁;这些"事"一般的组件是都会经历的,在组件经历这些"事"的时候,就会自动去执行对应阶段的函数,这些函数就是生命周期函数;根据React组件的生命周期分为四个阶段...原创 2019-10-09 20:17:14 · 223 阅读 · 0 评论 -
React父子之间的数据传递详解----父传子&&子传父
父组件class Father extends React.Component { constructor(props) { super(props); this.state={ name: ' 我是父组件的值,我将把我的值给子组件' } } // 接受子组件传递过来的值 childToFatherValue(data) { this.setSt...原创 2019-09-02 09:15:59 · 866 阅读 · 0 评论 -
react项目在webpack中配置CSS模块化
CSS模块化今天在学习react的过程学习了一个新的知识-----css模块化之前在学习Vue的时候,为了让css样式只在当前组件中生效,可以在使用scoped指令限制我们的样式只在当前组件生效,当我们给每一个组价添加scoped时,就相当于实现了CSS的模块化,在需要修改第三方组件的样式的时候,根据常用的css预加载器的不同,分别提供了** ’ >>>’ ** 和 ‘/...原创 2019-08-29 22:57:55 · 840 阅读 · 1 评论 -
react实现双向绑定
react没有提供类似于angular中[(ngModel)]和vue中v-mode的l双向绑定,最近在学习react,以下是我实现数据的双向绑定的方式 class TextChange extends React.Component { render() { return ( <div className="textChange"> <...原创 2019-08-28 11:30:26 · 236 阅读 · 0 评论