利用 react + antd 框架书写导航栏时,遇到了几个坑,分别是一级菜单和二级菜单在点击的情况下,高亮没有任何问题,但是再点击浏览器返回按钮时,却就乱套了. 1. 二级菜单中,我们可以通过 props.history 来监听 route ,通过不同的 hash 值赋值给 antd 导航栏相应的 selectdKeys 就能搞定. 2. 以及菜单可就有点问题了,因为一级菜单所拿到的 props 打印出来就是一个空对象,当给它监听路由变化时,浏览器就会报错,所以这个时候就得用到 withRou…

react 中state与props 1.state与props props是只读属性,只有在组件被实例化的时候可以赋值,之后的任何时候都无法改变该值.如果试图修改该值时,控制台会报错 only read. state与props正好相反,state中保存可变的值.通过this.setState()方法修改对应的值.使用state必须通过es6继承React.Component 类(官方推荐写法),并在构造函数内进行初始化. export default class BoubleBind ext…

整理一下React中关于state和props的知识点. 在任何应用中,数据都是必不可少的.我们需要直接的改变页面上一块的区域来使得视图的刷新,或者间接地改变其他地方的数据.React的数据是自顶向下单向流动的,即从父组件到子组件中,组件的数据存储在props和state中,这两个属性有啥子区别呢? props React的核心思想就是组件化思想,页面会被切分成一些独立的.可复用的组件. 组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props,所以可以把props理解为从…

一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化. 2.state工作原理 常用的通知React数据变化的方法是调用setState(data,callback).这个方法会合并data到this.state,并重新渲染组件.渲染完成后,…

一.state 1.state的作用 state是React中组件的一个对象.React把用户界面当做是状态机,想象它有不同的状态然后渲染这些状态,可以轻松让用户界面与数据保持一致. React中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化. 2.state工作原理 常用的通知React数据变化的方法是调用setState(data,callback).这个方法会合并data到this.state,并重新渲染组件.渲染完成后,…

React this.props.children this.props对象的属性与组件的属性一一对应,但是有一个例外,就是this.props.children属性.它表示组件的所有子节点. var NotesList = React.createClass({ render(){ return ( <ol> { React.Children.map(this.props.children,function(child){ return <li>{child}</li>…

props React的核心思想就是组件化思想,页面会被切分成一些独立的.可复用的组件. 组件从概念上看就是一个函数,可以接受一个参数作为输入值,这个参数就是props,所以可以把props理解为从外部传入组件内部的数据.由于React是单向数据流,所以props基本上也就是从服父级组件向子组件传递的数据. 用法 假设我们现在需要实现一个列表,根据React组件化思想,我们可以把列表中的行当做一个组件,也就是有这样两个组件:<ItemList/>和<Item/>. 先看看<I…

props和state都是用于描述component状态的,并且这个状态应该是与显示相关的. State 如果component的某些状态需要被改变,并且会影响到component的render,那么这些状态就应该用state表示.例如:一个购物车的component,会根据用户在购物车中添加的产品和产品数量,显示不同的价格,那么“总价”这个状态,就应该用state表示. Props 如果component的某些状态由外部所决定,并且会影响到component的render,那么这些状态就应该用…

render{ return( <div> <div>接下来是例子</div> <div dangerouslySetInnerHTML={{__html:"<span>这是一个带有html标签的字符串 </span>"}}/> </div> ) } 上面的方法可以实现,但是需要注意的是,这样的方法一定是使用dangerouslySetInnerHTML属性所在标签没有内容,例如<div dang…

props可以看做是 property 的缩写的复数,可以翻译为属性,类似于HTML 标签的自定义属性.在大多数React教程里讲 state 和 props 主要的区别在于 props 是不可变的,而 state 可以根据与用户交互来改变.其实这种说法有问题.可以参考一篇文章<React中state与props介绍与比较> 组件中的props本质作用是一种父级向子级传递数据的方式.props是可以改变的,只是没有提供API可以在子组件里直接修改,我们可以在父组件里把要给子组件的属性值修改.…

react中state和props变化会造成render的重新渲染,有时候我们会在render函数中进行一些稍微复杂的逻辑运算 比如说,像下边这种 在props中将 industries引入,然后对其进行筛选,筛选出符合条件的子项有对其进行遍历制造出Option选项,这样写其实并不优雅,会使render变得很臃肿,现在有一种类似于vue的计算属性,可以将之完全抛离. 我们可以将这几步写到一个函数里进行操作,然后在return想要的结果  …

react中这两个API出镜率超级高,但是一直不太懂这到底是干嘛的,有什么用:今天整理一下,方便自己查看同时方便大家. 1.constructor( )-----super( )的基本含义 constructor( )——构造方法 这是ES6对类的默认方法,通过 new 命令生成对象实例时自动调用该方法.并且,该方法是类中必须有的,如果没有显示定义,则会默认添加空的constructor( )方法. super( ) ——继承 在class方法中,继承是使用 extends 关键字来实现的.子类…

今天让我们开启新的篇章好吧,来搞一搞React,以下所有操作都是我个人的一些理解,如果有错吴还请指出,想要看更全的可以去React官网可能一下子好吧 昨天按摩没到位,导致今天身体不太行,撸码千万别苦了自己,活着最重要 我们先来搞一搞React中props的使用,React项目的基本搭建我就不做了,很简单.直接开始上内容好吧 1.和Vue一样React也使用props来进行父组件往子组件传参,基本使用还是很简单的 步骤: 1.父组件调用子组件时传入属性 2.子组件直接通过this.props.属性…

以下内容均为个人理解. 1.state: 在react中,state可以看成管理页面状态的集合(实则一个对象而已),库里面的成员均为页面渲染变量,整个页面为一个状态机,当state发生变化时,页面会重新渲染,页面随state变化而变化. 2.state如何正确使用: const eventsArr = [ 'handleText1Change', 'handleText2Change', 'handleText3Change' ]; const EmptyString = ""; cl…

在上一篇文章中说过了react中界面A跳到B,返回A,A界面状态保持不变,上篇中使用的是传统的localStorage方法,现在来使用第二种redux的state方法来实现这个功能 现在我刚接触redux,所以可能一些高级方法不是很会用,这边使用的是很简单的方法.其实这两种方法原理差不多,都是通过进行保存原有数据或者重新加载数据来实现 我这边以购物车的商品为简单的例子,大家可以根据自己的场景来增加,原理都是一样的 首先在action.js中定义个保存你数据的方法 // actions.js //…

一.概述 React中的组件: 解决html 标签构建应用的不足. 使用组件的好处:把公共的功能单独抽离成一个文件作为一个组件,哪里里使用哪里引入. [父子组件]:组件的相互调用中,我们把调用者称为父组件,被调用者称为子组件 - -------------------------------------------------------------------- 二.父子组件传值 父组件给子组件传值方法分为2步: 1.父:在调用子组件的时候定义一个属性: <Header msg='首页'>&…

什么是异步组件?简单来说就是异步加载一个组件,正常情况浏览器加载的是我们打包好的bundle.js文件,那么这个文件是集合了所有js是代码,然而我们首屏加载并不需要一次性加载所有的组件,这会造成性能的损耗,所以我们可以使用异步组件,推荐使用(react-loadable)https://github.com/jamiebuilds/react-loadable,那么使用react-loadable就会造成路由跳转的问题,所以我们需要使用withRouter来解决,withRouter组件的功能是…

React组件复用 React组件复用的方式有两种: 1.render Props模式 2.高阶组件HOC 上面说的这两种方式并不是新的APi. 而是利用Raect自身的编码特点,演化而来的固定编码写法. 什么是render Props模式 1.把prop是一个函数并且要告诉组件要渲染什么内容的技术,叫做render Props模式. 2.注意的是:并不是该模式叫做render Props就必须使用名为render的props, 实际上可以使用任意的props. 对上面者一句话的详细说明: 子组…

在React中,当涉及组件嵌套,在父组件中使用props.children把所有子组件显示出来.如下: function ParentComponent(props){ return ( <div> {props.children} </div> ) } 如果想把父组件中的属性传给所有的子组件,该怎么做呢? --使用React.Children帮助方法就可以做到. 比如,把几个Radio组合起来,合成一个RadioGroup,这就要求所有的Radio具有同样的name属性值.可以这…

React中配置Sass引入.scss文件无效 在react中使用sass时,引入.scss文件失效 尝试很多方法没法解决,最终找到解决方法,希望能帮助正在坑里挣扎的筒子~ 在node_modules文件夹下,找到react-scripts ==> config文件夹, 在该配置文件夹下找到 webpack.config.dev.js和webpack.config.prod.js. 文件夹如下: uploading-image-392777.png 在file-loader之前添加style-l…

React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法,上层组件就可以通过下层组件的props属性进行传递,因此props是组件对外的接口.组件除了使用上层组件传递的数据外,自身也可能需要维护管理数据,这就是组件对内的接口state.根据对外接口props 和对内接口state,组件计算出对应界面的UI=>UI = C…

我们都知道在 react中,若要在父组件调用子组件的方法,通常我们会采用在父组件定义一个方法,作为props转给子组件,然后执行该方法,可以获取到子组件传回的参数以得到我们的目的. 显而易见,这个执行是需要去主动触发的. 那有没有一种方式,方法在子组件定义好,可以直接在父组件去调用呢? 答案是必然的. 上代码^ - ^ import React, {Component} from "react"; import { Button } from "antd"; //父…

练习代码的时候,发现python3中的map()函数返回的可迭代对象,在用list()转成列表之后,再次用list()转列表的时候,获取的是空值(如下所示),所以查了一下python3的map()对象 >>> rList = [1,2,3,4,5]>>> resultList = map(lambda x: str(x), rList)>>> resultList<map object at 0x0000021E91BFEEB8>>&…

前言 昨天晚上公司组织了前端分享会,在讲到React Class方法的时候,有的同学提出,为什么构造函数一定要super,我记得我之前看的黑马视频里面有讲过,就再翻出来 内容 React官方中文文档里面有这样的内容: 在 React 中,我们也可以通过组合来实现这一点.“特殊”组件可以通过 props 定制并渲染“一般”组件.组合也同样适用于以 class 形式定义的组件(https://react.docschina.org/docs/composition-vs-inheritance.ht…

props props英文翻译是道具的意思,我个人理解为参数,如果我们将react组件看作是一个函数,那么props便是函数接收外部数据所使用的参数.props具有以下特性: 1.不可变(只读性) props经常被用作渲染组件和初始化状态,当一个组件被实例化之后,它的props是只读的,不可改变的.如果props在渲染过程中可以被改变,会导致这个组件显示的形态变得不可预测.只有通过父组件重新渲染的方式才可以把新的props传入组件中. 2.可以设置默认值 通常,我们会为props设置一个默认值,…

React中代理的配置 主要是解决同源策略的问题 何为同源策略? 因为我们React在3000端口,Vue在8080端口,而后台接口往往在5000,这种不同的端口之间就是一种跨域的问题了 axios发送跨域请求的时候,实际上是有访问后台,并且从后台拿到了数据,只是这些数据回不了,因为ajax疫情拦截了 如何解决呢? 使用代理: ①代理的端口和前端的端口是一样的(也就是下面的3000端口跑了一个脚手架,并且也运行了一个微小的代理服务器) ②代理为什么能够请求别的端口的服务器是因为 代理服务器上面没…

文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   虽然React中的虚拟DOM很好用,但是这是一个无心插柳的结果.   React的核心思想:一个Component拯救世界,忘掉烦恼,从此不再操心界面. 1. Virtual Dom快,有两个前提 1.1 Javascript很快  Chrome刚出来的时候,在Chrome里跑Javascript非…

React中的合成事件 React自己实现了一套高效的事件注册.存储.分发和重用逻辑,在DOM事件体系基础上做了很大改进,减少了内存消耗,简化了事件逻辑,并最大程度地解决了IE等浏览器的不兼容问题. 描述 React的合成事件SyntheticEvent实际上就是React自己在内部实现的一套事件处理机制,它是浏览器的原生事件的跨浏览器包装器,除兼容所有浏览器外,它还拥有和浏览器原生事件相同的接口,包括stopPropagation()和preventDefault(),合成事件与浏览器的原生事…

本文转自:https://github.com/camsong/blog/issues/3 Shared mutable state is the root of all evil(共享的可变状态是万恶之源) -- Pete Hunt 有人说 Immutable 可以给 React 应用带来数十倍的提升,也有人说 Immutable 的引入是近期 JavaScript 中伟大的发明,因为同期 React 太火,它的光芒被掩盖了.这些至少说明 Immutable 是很有价值的,下面我们来一探究竟.…

前面的话 某些情况下需要在典型数据流外强制修改子代.要修改的子代可以是 React 组件实例,也可以是 DOM 元素.这时就要用到refs来操作DOM 使用场景 下面是几个适合使用 refs 的情况 1.处理焦点.文本选择或媒体控制 2.触发强制动画 3.集成第三方 DOM 库 如果可以通过声明式实现,则尽量避免使用 refs [注意]不要在 Dialog 组件上直接暴露 open() 和 close() 方法,最好传递 isOpen 属性 ref React 支持给任意组件添加特殊属性.ref…