![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 56
Jason–json
这个作者很懒,什么都没留下…
展开
-
热门App 高仿项目12 个 GitHub 上的高仿项目
热门App 高仿项目12 个 GitHub 上的高仿项目原创 2022-07-11 17:38:54 · 14893 阅读 · 9 评论 -
react项目http-proxy-middleware跨域问题
1.npm安装这两个依赖npm install http-proxy-middleware, npm install axios2.原创 2021-08-05 16:55:44 · 1440 阅读 · 0 评论 -
scss重置浏览器默认样式 normalize.css
最近做了个react+antd 的人事管理项目,样式使用的scss,里面重置了浏览器样式的文件,欢迎大家下载使用,不会用的可以@我哟。原创 2021-08-04 08:54:21 · 1321 阅读 · 0 评论 -
antd setFieldsValue警告问题 Cannot use `setFieldsValue` until you use `getFieldDecorator` or
antd 使用form组件 setFieldsValue警告问题原文警告:Cannot use setFieldsValue until you use getFieldDecorator or getFieldProps to register it大概意思就是:在使用“getFieldDecorator”或“getFieldProps”注册之前,不能使用“setFieldsValue”官网上的解释是这样的的注意:使用 getFieldsValue getFieldValue setField原创 2021-01-14 16:25:40 · 2060 阅读 · 0 评论 -
React children组件实例提示框
// child传递标签,通常在通用型组件时传递 使用import React, { Component } from 'react';// 第一个类 (也可以跨文件传递文件)class Childes extends Component { state={ close : true } render() { let {children} = this.props //接收 let {close} = this.state console.log(t.原创 2020-07-16 13:31:12 · 235 阅读 · 0 评论 -
React children组件
children组件标签对之间的内容会被当做一个特殊的属性 props.children 传入组件内容可以自定义结构的组件的常用形式children传递函数传递子组件// child传递标签,通常在通用型组件时传递import React, { Component } from 'react';// 第一个类 (也可以跨文件传递文件)class Childes extends Component { render() { let {children} = thi原创 2020-07-16 13:29:01 · 700 阅读 · 0 评论 -
React PureComponent
component和PureComponent 的区别PureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和 Component 完全一直PureComponent 在数据类型 前后一样的情况下,就不会去渲染更新,Component不管你一样不一样,都会重新渲染加载使用component 在list 修改赋值的时候可以使用es6的语法使用PureComponent时候 赋值的时候 list:[…list]import React, { Pure原创 2020-07-16 13:11:55 · 131 阅读 · 0 评论 -
react dangerouslySetInnerHTML
dangerouslySetInnerHTML 设置标签的innerHtml注意:message不能接收页面的数据 太危险了,接收后端的数据使用import React, { Component } from 'react';let message = ` <h1>打败我们的不是天真,是天真热</h1> <p>太热了</p> `class App extends Component { r原创 2020-07-16 13:08:25 · 220 阅读 · 0 评论 -
React key值绑定问题
key值绑定问题key这里要写数据里的id id后端一定要给id 要是没又给去找他要这里key值绑定的唯一id 这里的id 为固定值 这么写的性能会好些,点击三删除只有删除的元素会更新如果绑定index 数组元素发生变化index也就发生变化 数组内的数据就会全部的从渲染import React, { Component } from 'react'; class App extends Component { state = { //模拟数据 data:[ {原创 2020-07-16 13:05:52 · 744 阅读 · 0 评论 -
react ref 的使用
ref 的使用原创 2020-07-16 12:50:49 · 161 阅读 · 0 评论 -
react 通过生命周期优化组件性能
已经对React生命周期有了认识,那如何利用它提高组件的性能那?通过shouldComponentUpdate函数,改善React组件性能的例子。小姐姐组件存在性能问题是的,小姐姐组件已经写的很熟悉了,但是它有一个性能问题,那就是子组件XiaojiejieItem频繁无用渲染render。如何能看出这个问题的那?首先你要确认你安装了React Developer Tools 如果你没有安装,可以到前边的课程学习一下安装。有了这个浏览器插件,就可以在控制台中找到components标签,然后在右边点开设原创 2020-07-06 21:46:00 · 3343 阅读 · 0 评论 -
React PropTypes检验传递的值
在工作当中,我们进行传参一定要对象传递的数据进行校验,如果不校验的话,大量的数据传递,会造成混乱,业务逻辑也没办法保证。引入prop-types //prop-types 父传子 要在子组件引入并校验import PropTypes from "prop-types"PropTypes 提供一系列验证器,可用于确保组件接收到的数据类型是有效的。在本例中, 我们使用了 PropTypes.string。当传入的 prop 值类型不正确时,JavaScript 控制台将会显示警告。出于性能方面的考虑原创 2020-07-06 21:45:12 · 255 阅读 · 0 评论 -
react setState工作原理
setState(updater, [callback])1 updater: 通过函数或对象 更新数据 FUNCTION/OBJECT2 callback: 更新成功后的回调 FUNCTION buttonOnClick=()=>{ this.setState({ list:[...this.state.list,this.state.inputValue], inputValue:"" //正加后input框的值为空原创 2020-07-03 16:04:11 · 1123 阅读 · 0 评论 -
react 生命周期-2
React生命周期中的Updation阶段,也就是组件发生改变的更新阶段,这是React生命周期中比较复杂的一部分,它有两个基本部分组成,一个是props属性改变,一个是state状态改变(这个在生命周期的图片中可以清楚的看到)。shouldComponentUpdate函数会在组件更新之前,自动被执行,会在render 渲染之前执行它要求返回一个布尔类型的结果,必须有返回值,false 下面的代码就不再执行 shouldComponentUpdate(){ // 会在rend原创 2020-07-03 16:02:43 · 139 阅读 · 0 评论 -
react 生命周期-1
React生命周期图通过这张图你可以看到React声明周期的四个大阶段:Initialization:初始化阶段。Mounting: 挂在阶段。Updation: 更新阶段。Unmounting: 销毁阶段什么是生命周期函数如果非要用一句话把生命周期函数说明白,我觉的可以用这句话来说明:生命周期函数组件从创建到结束的过程(生-死)举例:写的小姐姐的例子。里边的render()函数,就是一个生命周期函数,它在state发生改变时自动执行。这就是一个标准的自动执行函数。construc原创 2020-07-03 15:27:25 · 205 阅读 · 0 评论 -
React 父子组件的传参
通过上节课的学习,已经把"小姐姐"组件做了一个基本的拆分,但是还不能实现随着输入,显示出输入的内容。这里涉及的是父组件向子组件传值。然后点击删除,就相当于子组件向父组件传值父组件像子组件传值这里只介绍最实用的,最快速的上手方法。就是使用组件属性的形式父组件给子组件传值。比如:我们在组件中加入content属性,然后给属性传递{item},这样就完成了父组件向子组件传值。<XiaojiejieItem content={item} />这时候可以通过this.props.xxx的形式进行原创 2020-07-03 11:36:32 · 620 阅读 · 0 评论 -
react 单项数据流
react 单项数据流原创 2020-07-03 11:35:59 · 2483 阅读 · 1 评论 -
React实例响应式设计和数据绑定
React实例响应式设计和数据绑定React中的响应式设计原理和数据的绑定方法,俗话说的好:“宝剑磨的好,理论不能少”。这节课我们不仅要编写效果,还要讲理论,这节课很重要!!!,因为这涉及React中的设计思想和你以后的编程思路。响应式设计和数据的绑定React不建议你直接操作DOM元素,而是要通过数据进行驱动,改变界面中的效果。React会根据数据的变化,自动的帮助你完成界面的改变。所以在写React代码时,你无需关注DOM相关的操作,只需要关注数据的操作就可以了(这也是React如此受欢迎的主要原原创 2020-07-01 20:51:08 · 1649 阅读 · 0 评论 -
React实例 删除列表数据
React实例 删除列表数据添加服务虽然很美妙,但是有时候也需要有些节制。这节课就学习如何删除一个服务选项。需求是这样的,当点击已经有的选项后,我们就进行删除。如果使用原生的js来写,这是非常麻烦的,但是有了React后就变的简单了。数组下标的传递如果要删除一个东西,就要得到数组里的一个编号,这里指下标。传递下标就要有事件产生,先来绑定一个双击事件.代码如下:数组下标的传递如果要删除一个东西,就要得到数组里的一个编号,这里指下标。传递下标就要有事件产生,先来绑定一个双击事件.代码如下:<l原创 2020-07-01 09:32:00 · 4595 阅读 · 0 评论 -
React 列表添加数据
让列表数据化现在的列表还是写死的两个标签,那要变成动态显示的,就需要把这个列表先进行数据化,然后再用javascript代码,循环在页面上。我们先给上节课的list数组增加两个数组元素,代码如下: constructor(props){ //// 构造函数 // 调用父类方法,继承 super(props) this.state = { inputValue:"", //value的数据 list:原创 2020-07-01 09:30:23 · 5622 阅读 · 0 评论 -
React实例 列表组件
新建组件现在SRC的目录下面,新建一个文件Xiaojiejie.js文件,然后写一个基本的HTML结构。代码如下:import React,{Component} from 'react'class Xiaojiejie extends Component{ render(){ return ( <div> <div><input /> <button> 增加服务 <原创 2020-06-30 23:34:54 · 1179 阅读 · 0 评论 -
React 组件的拆分
新建组件在src目录下,新建一个文件,这里就叫做XiaojiejieItem.js,然后先把最基础的结构写好(这里最好练习一下上节课学习的快捷键)。import React, { Component } from 'react'; //imrcclass XiaojiejieItem extends Component { //cc render() { return ( <div>小姐姐</div> )原创 2020-06-30 20:13:01 · 1990 阅读 · 0 评论 -
jsx使用注意事项
基于javascript个xml的扩展语法他可以作为值使用他并不是字符串他也不是html 他可以配合js表达式一起使用, 他不可以和js的 语句一起使用(for,if 等…)所有的标签名必须小写,必须闭合,哪怕是单标签class写成classNamestyle 接收的是一个对象{},并不是字符串最外层只能有一个容器,差值表达式{ }代码注释 尽量使用快捷键 Ctrl + /dangerouslySetInnerHTML={{__html:item}} 解析html标签,在input框中.原创 2020-06-29 18:35:40 · 289 阅读 · 0 评论 -
JSX及差值表达式单页面应用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 其他局部使用的时候也需要引入 --> <sc原创 2020-06-29 18:02:26 · 113 阅读 · 0 评论 -
React中JSX语法简介
JSX语法简介JSX语法,看起来跟html标签几乎一样,事实也是如此。JSX语法确实也有很多需要注意的事项,但是对于初学者学太多反而不好。所以这节课我们作一个最简单的JSX语法介绍。JSX就是Javascript和XML结合的一种格式。React发明了JSX,可以方便的利用HTML语法来创建虚拟DOM,当遇到<,JSX就当作HTML解析,遇到{就当JavaScript解析.比如我们在App中写一段JSX语法<ul className="my-list"> <li>原创 2020-06-29 17:49:57 · 296 阅读 · 0 评论 -
React HelloWorld和组件
这节课先把src目录里的文件全部删除,我们一点点写一个·HelloWorld·程序,并通过编写这个程序了解一下什么是React中的组件化编程。入口文件的编写写一个项目的时候一般要从入口文件进行编写的,在src目录下,新建一个文件index.js,然后打开这个文件。写入下面4行代码:import React from 'react'import ReactDOM from 'react-dom'import App from './App'ReactDOM.render(<App />原创 2020-06-29 17:47:37 · 143 阅读 · 0 评论 -
React脚手架生成的项目目录介绍
项目根目录中的文件先从进入项目根目录说起,也就是第一眼看到的文件(版本不同,可能稍有不同)**README.md ????*这个文件主要作用就是对项目的说明,已经默认写好了一些东西,你可以简单看看。如果是工作中,你可以把文件中的内容删除,自己来写这个文件,编写这个文件可以使用Markdown的语法来编写。package.json: 这个文件是webpack配置和项目包管理文件,项目中依赖的第三方包(包的版本)和一些常用命令配置都在这个里边进行配置,当然脚手架已经为我们配置了一些了,目前位置,我们不需要原创 2020-06-29 17:46:02 · 474 阅读 · 0 评论 -
React开发环境搭建
安装Node.js使用React.js是可以用最原始的安装Node只需要进入Node网站,进行响应版本的下载,然后进行双击安装就可以了。Node中文网址:http://nodejs.cn/ (建议你在这里下载,速度会快很多)需要你注意的是,一定要正确下载对应版本,版本下载错误,可是没有办法使用的哦。Node.js 安装好以后,如果是Windows系统,可以使用 Win+R打开运行,然后输入cmd,打开终端(或者叫命令行工具)。输入代码:node -v 如果正确出现版本号,说明Node安装成功原创 2020-06-29 17:36:21 · 146 阅读 · 0 评论 -
React简介 和vue的区别
React简介React 是全球最火的前端框架(Facebook推出的前端框架)React 是一个用于构建用户界面的 JAVASCRIPT 库。React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。React优点总结**生态强大:**现在没有哪个框架比React的生态体原创 2020-06-29 17:15:38 · 3181 阅读 · 0 评论