![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 67
果冻~
这个作者很懒,什么都没留下…
展开
-
React 组件之间参数传递,正传props,逆传,同级传值,跨组件传值context
以下主要是react四种组件传值方式1、正传props:1.1、rcc快速创建组件1.2、在调用组件的地方传值1.3、在组件中接收数据2、逆传:2.1、在父组件中先声明一个函数,该函数有一个形参来接收子组件逆向传递过来的数据,2.2、在父组件中将这个函数的调用方式传递给子组件2.3、在子组件中通过单击事件来触发,bind中第一个参数修改this指向,第二个参数为要传递的数据2.4逆传案例二:(实现的是在子组件中删除组件的数据)2.4.1在子组件使用this.props.xxx来接原创 2020-09-23 00:35:46 · 2046 阅读 · 1 评论 -
immutable不可变对象,介绍及详细用法。
immutable介绍及用法Facebook 工程师使用3年时间打造,与React同期出现,但是没有被默认放到React工具集中,它内部实现了一套完整的数据持久化 里面有很多常见的数据类型Collection List Map Set等里面有三种重要的数据解构Map: 键值对集合,对应于Object Es6中也有专门的Map对象List: 有序可以重复的列表,对应于Arrayset: 无序并且不可重复key的数组immutable原理Immutable 实现的原理是(持久化数据结构),也就原创 2020-09-29 00:16:57 · 899 阅读 · 2 评论 -
react组件之间参数传递—正传props—逆传—同级传值pubsub—跨组传值详细步骤
一、正传props:1、组件中使用rccp快速生成一个子组件(rccp快捷键会自动生成props验证)2、在父组件调用子组件并传递数据给子组件3、在子组件接收父组件传递过来的数据二、逆传思路:逆传需要通过单机事件触发,在父组件中传递一个函数在子组件,在子组件触发函数,逆传数据以形参的方式传递给父组件。1、在父组件调用子组件,并产地一个函数给子组件2、在子组件触发父组件传递过来的函数,并返回数据给父组件逆传小案例:在子组件触发事件删除父组件对应的数据。1、在子组件使用this.原创 2020-10-31 10:26:11 · 1006 阅读 · 0 评论 -
umijs介绍及基本用法、配置式路由、约定式路由、路由传参等
umiJSUmi 是蚂蚁金服的底层前端框架 中文可发音为乌米,是可扩展的企业级前端应用框架。Umi 以路由为基础的,同时支持配置式路由和约定式路由,保证路由的功能完备。同时有强大的插件扩展各种功能。什么时候不用 umi需要支持 IE 8 或更低版本的浏览器需要支持 React 16.8.0 以下的 React需要跑在 Node 10 以下的环境中有很强的 webpack 自定义需求和主观意愿需要选择不同的路由方案使用确保电脑上有nodejs 10.13 或以上umi下载安装npm原创 2020-10-11 17:14:25 · 16917 阅读 · 1 评论 -
react生命周期
react生命周期react生命周期三个阶段挂载阶段更新阶段卸载阶段一、挂载阶段1、constructor 初始化数据:它接收两个参数:props和context,当想在函数内部使用这两个参数时,需使用super()传入这两个参数。2、componentWillMount :dom渲染之前3、render:渲染函数,不要在这里修改数据。 vue中也有render函数。4、componentDidMount:在第一次渲染后调用,只在客户端。之后组件已经生成了对应的DOM结构,可原创 2020-11-24 09:15:15 · 158 阅读 · 0 评论 -
Redux—redux-thunk— action里处理异步,封装详细步骤,适合初学者。
1、2、3、4、原创 2020-11-04 23:34:49 · 864 阅读 · 0 评论 -
Redux—redux-thunk——combineReducers
任何对数据的才做都会经理renducer,reducer要求是个纯函数(在函数内部不能修改函数的参数(输入),要有返回值),它的功能是:传入旧的state,根据action对state做操作,返回新的state。redux是什么Redux是为javascript应用程序提供一个状态管理工具,集中的管理react中多个组件的状态。redux是专门作状态管理的js库(不是react插件库可以用在其他js框架中例如vue,但是基本用在react中)什么时候用redux需求场景:某个组件的状态需要共享的原创 2020-11-03 17:49:46 · 189 阅读 · 0 评论 -
React—HOC 高阶组件
HOC 高阶组件基本概念对组件中可以被重复使用的内容进行封装什么是高阶组件高阶组件是一个函数,接收是一个组件,返回值也是一个组件,这类组件我么叫做高阶组件(HOC);高阶组件的本质就是一个函数,比如js中的 map() filter()forEach…,高阶组件是React中用于重用组件逻辑的高级技术。HOC本身不是React API 的一部分。他是从React构思本质模式中浮现出来的一种模式。注意: 在使用高阶组件的时候 如果需要进行props的传递 那么必须在高阶组件中向组件添加 {…原创 2020-11-02 14:29:25 · 251 阅读 · 0 评论 -
react—props验证及默认值
原创 2020-10-31 11:35:37 · 182 阅读 · 0 评论 -
react搭建路由
一、路由—概念:实现spa(单页面应用)应用:整个项目只有一个完整的页面,页面切换不会刷新整个页面(不会感觉到页面闪烁,更加贴近原生应用的体验)二、路由—分类:1、React-Router:提供了一些router的核心API,包括Router, Route, Switch等,但是它没有提供 DOM 操作进行跳转的API。2、React-Router-DOM:提供了 BrowserRouter, Route, Link等 API,我们可以通过 DOM 的事件控制路由。例如点击一个按钮进行跳转,大多数情原创 2020-10-30 20:06:56 · 872 阅读 · 0 评论 -
React双向绑定,详细案例。
先生命一个空变量,然后将这个空变量的赋值给input的value属性,这样就将数据绑定到input框上,再通过onchange调用setState将input的value赋值给之前声名号的空变量,即可事件双向绑定。代码如下: <div id="box"></div> <script type="text/babel"> class Demo extends React.Component{ constructor(props)原创 2020-10-29 15:39:10 · 1284 阅读 · 0 评论 -
react事件处理——修改this指向(面试常问)
方式1:通过bind方法进行原地绑定,从而改变this指向注:bind不会调用函数本身,只是改变函数中的this指向,bind会返回一个新的函数,再任何时候调用bind返回的新函数都是bind绑定号的this指向。方式2:通过创建箭头函数方式3:在constructor中提前对事件进行绑定方式4:将事件调用的写法改为箭头函数的形式<body> <div id="box"></div> <script type="text/babel">原创 2020-10-28 14:12:23 · 307 阅读 · 0 评论 -
React学习笔记1
什么是 React ?React 是一个用于构建用户界面的 javascript 库。react的特点:1、声明式设计−React采用声明式,可以轻松描述应用。(开发者只需要声明显示内容,react就会自动完成)2、高效−React通过对DOM的模拟,最大限度地减少与DOM的交互。3、灵活−React可以与已知的库或框架很好地配合。4、组件− 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。(把页面的功能拆分成小模块–每个小模块就是组件)5、单向数据流–原创 2020-10-27 17:13:27 · 184 阅读 · 0 评论 -
React项目如何使用Element ui?
初次在react项目中使用element框架,碰到了一些很简单的问题,但是卡了很久才解决,写篇博客记录一下。1、安装:在项目目录下下载:npm i element-react --savenpm install element-theme-default --save注:element官网快速上手中有提到2、全局引用在项目跟录下的index.js中全局引入3、在项目中引用你需要的element组件可能会报错解决方式:在项目中下载依赖npm install react-hot-loa原创 2020-10-09 16:21:10 · 12644 阅读 · 2 评论 -
React状态提升,Hook是什么,怎么使用?
React状态提升React中的状态提升概括来说,就是多个组件需要反映相同的变化数据,提升到它们最近的父组件上.在父组件上改变这个状态然后通过props分发给子组件。React Hooks是React 16.8.0版本推出的新特性 主要的作用就是让无状态组件 可以使用状态(在react开发中状态的管理是必不可少的 以前为了进行状态管理需要使用类组件或者redux等来管理useState() 就是React提供最基础、最常用的Hook,主要用来定义和管理本地状态。useState返回的是一个数组(长原创 2020-10-02 17:11:20 · 565 阅读 · 1 评论 -
React脚手架使用-配置路径别名
1、下载:npm install react-app-rewired -D2、修改启动命令在package.json中修改scripts为:“react-app-rewired start”3、在项目跟目录下创建"config-overrides.js"文件,将如下代码复制进去,然后开始配置路径别名。注意配置完成后需重启项目const path = require('path');function resolve(dir) { return path.join(__dirname, '.原创 2020-09-23 14:41:25 · 735 阅读 · 0 评论 -
vue和react中get和post请求用法,及如何传递数据给后台。
get请求给后台传递数据1、在调用请求的地方直接以形参的方式传递。2、在封装请求的api文件下使用params将参数传递的后台3、后台用req.query.xx接收post请求给后台传递数据1、在页面调用请求的页面,使用params传递参数var params=new URLSearchParams()params.append(“text”,this.state.el.current.value)params.append(“xxx”,参数)2、在对应的请求封装中接收参数,用da原创 2020-09-22 20:12:40 · 3301 阅读 · 0 评论