![](https://img-blog.csdnimg.cn/20201014180756916.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
React
文章平均质量分 59
我在东软打代码
这个作者很懒,什么都没留下…
展开
-
React面试题整理
1、什么是虚拟DOM?(start)虚拟DOM是真实DOM的内存表示,是一种模式。用ReactDOM将虚拟DOM和真实DOM调和(同步),也就是虚拟DOM通过ReactDOM呈现到页面。虚拟DOM是React内部在用的,不需要那么多的属性。虚拟DOM的本质是object类型的对象。2、类组件和函数组件的区别?(start)1)函数组件的性能比类组件的性能要高。2)类组件使用时需要实例化,函数组件直接执行函数取返回结果即可。3)为了提高性能,尽量使用函数组件。4)函数组件没有this,没有生命原创 2022-05-04 16:11:15 · 836 阅读 · 0 评论 -
React学习day22——render props、错误边界、组件通信方式总结
render props向组件内部放入第三放组件并渲染数据:Vue中:使用slot技术,也就是通过组件标签体传入机构React中:使用children props:通过组件标签传入结构index.jsimport React, {Component} from 'react';import './index.css'export default class Index extends Component { render() { return (原创 2021-07-06 21:46:17 · 259 阅读 · 0 评论 -
React学习day21——组件优化Component
ComponentComponent的2个问题1、只要执行setState(),即使不改变状态数据,组件也会重新render()==>效率低2、每当前组件重新render(),就会重新render子组件,纵使子组件没有到父组件的任何数据 ==>效率低效率高的做法只有当组件的state 或 props数据发生改变时才重新render()原因Component中的shouldComponentUpdate()总是返回true解决方法1:重写shouldComponentUpd原创 2021-07-04 22:55:57 · 87 阅读 · 2 评论 -
React学习day20——Fragment、Context
Fragment使用作用:可以不用必须有一个真实的DOM根标签了可以加key值例如: <Fragment key={6}> <input type="text"/> <input type="text"/> </Fragment>Context一种组件间通信方式,常用于祖组件与后代组件间通信(祖孙,祖祖孙关系)使用:(1)创建Context容器对象:cons原创 2021-07-03 18:30:54 · 190 阅读 · 0 评论 -
React学习Day19——setState、LazyLoad、Hook
setStatesetState 更新状态的2种写法(1)setState(stateChange,[callback])//对象式的setStatestateChange为状态改变对象(该对象可以体现出状态的更改)callback是可选的回调函数,它在状态更新完毕,界面也更新后(render调用后)才被调用import React, {Component} from 'react';class Demo extends Component { state={count:0}原创 2021-07-03 00:54:12 · 195 阅读 · 0 评论 -
React学习day19——打包React项目
将React项目打包npm run build借助serve开启服务器,全局安装npm i serve -gserve如果以build为根目录则用serve build原创 2021-07-02 15:35:48 · 79 阅读 · 0 评论 -
React学习day18
Provider批量传递store对象<Provider store={store} <App/><Provider>,求和案例react-redux 优化容器组件和UI组件整合一个文件。无需自己给容器组件传递store,给包裹一个即可。使用react-redux后也不用自己再检测redux中状态的改变,容器组件可以自动完成这个工作。.mapDispatchToProps也可以简单的写一个对象一个组件要和redux“打交道”要经过几原创 2021-07-01 22:32:35 · 187 阅读 · 0 评论 -
React学习day17在react中使用redux
reduxObject{} 同步actionfunction 异步action原创 2021-07-01 16:06:25 · 87 阅读 · 0 评论 -
React学习day16__react求和&redux求和
基本的react求和案例求和组件import React, {Component} from 'react';class Count extends Component { state ={count:0}//加法 increment=()=>{ //函数体 const {value} = this.selectNumber; const {count} = this.state; this.setState({cou原创 2021-06-29 17:55:15 · 587 阅读 · 1 评论 -
React学习day15--redux
reduxredux是一个专门用于做状态管理的JS库(不是react插件库)它可以用在react,angular,vue 等项目中,但基本与react配合使用。作用:集中式管理react应用中多个组件共享组件共享的状态。什么情况下需要使用redux某个组件的状态,需要让其它组件可以随时拿到(共享)一个组件需要改变另一个组件的状态(通信)总体原则:能不用就不用,如果不用比较吃力才考虑使用。redux 原理图redux的三个核心概念action动作的对象包含2个属性t原创 2021-06-28 22:59:21 · 67 阅读 · 2 评论 -
React学习day15--antd组件Dropdown下拉菜单、导航栏、分页
下拉菜单https://ant.design/components/dropdown-cn/import React, {Component} from 'react';import {Menu,Dropdown} from "antd";import 'antd/dist/antd.css';import './index.css';import {DownOutlined} from '@ant-design/icons'const menu = ( <Menu>原创 2021-06-28 19:24:12 · 2158 阅读 · 0 评论 -
React学习day14--antd:Space间距、Affix固钉
Space间距设置组件之间的间距,避免组件紧贴在一起,拉开统一的空间。适合行内元素的水平间距,可以设置各种水平对齐方式。import { Button, Space, Upload, Popconfirm } from 'antd';import { UploadOutlined } from '@ant-design/icons';function SpaceDemo() { return ( <Space> Space <Button ty原创 2021-06-28 16:23:37 · 2614 阅读 · 0 评论 -
React学习day13--antd组件:Layout布局
https://ant.design/components/layout-cn/设计规则尺寸一级导航项偏左靠近 logo 放置,辅助菜单偏右放置。顶部导航(大部分系统):一级导航高度 64px,二级导航 48px。顶部导航(展示类页面):一级导航高度 80px,二级导航 56px。顶部导航高度的范围计算公式为:48+8n。侧边导航宽度的范围计算公式:200+8n。 交互一级导航和末级的导航需要在可视化的层面被强调出来;当前项应该在呈现上优先级最高;当导航收起的时候,当前项的样式自原创 2021-06-27 17:39:10 · 5922 阅读 · 2 评论 -
React学习day13--antd组件:Grid栅格
Grid栅格https://ant.design/components/grid-cn/布局的栅格化系统,我们是基于行(row)和列(col)来定义信息区块的外部框架,以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理:1)通过 row 在水平方向建立一组 column(简写 col)。2)你的内容应当放置于 col 内,并且,只有 col 可以作为 row 的直接元素。3)栅格系统中的列是指 1 到 24 的值来表示其跨越的范围。例如,三个等宽的列可以使用 来创建。4)如原创 2021-06-26 21:54:03 · 2208 阅读 · 3 评论 -
React学习day12--antd:Typography排版、Divider分割线
Typography排版何时使用:当需要展示标题、段落、列表内容时使用,如文章/博客/日志的文本样式。当需要一列基于文本的基础操作时,如拷贝/省略/可编辑。https://ant.design/components/typography-cn/import { Typography, Divider } from 'antd';const { Title, Paragraph, Text, Link } = Typography;const blockContent = `AntV 是原创 2021-06-26 21:03:05 · 3246 阅读 · 0 评论 -
React学习day11antd--组件:按钮、图标
ant-design:https://ant.design/index-cnantd(ant-design)的基本使用安装ant-design在项目下的控制台输入:yarn add antd原创 2021-06-22 14:57:34 · 1197 阅读 · 0 评论 -
React学习day10withRouter,BrowerRouter与HashRouter的区别
编程式路由导航原创 2021-06-20 21:06:33 · 153 阅读 · 0 评论 -
React学习day9-NavLink、路由、params、search、state
封装NavLinkNavLink可以实现路由链接的高亮,通过activeClassName指定标签体内容是一个特殊的标签属性通过this.props.children可以获取标签体内容App.js <MyNavLink to="/about" >About</MyNavLink> <MyNavLink to="/home">Home</MyNavLink> {/*注册路由*/} <Route path=原创 2021-06-19 21:06:03 · 494 阅读 · 0 评论 -
React学习day8
React路由SPA单页面Web应用整个应用只有一个完整的页面点击页面中的链接不会刷新页面,只会做页面的局部更新数据都需要通过ajax请求获取,并在前端异步展现什么是路由一个路由就是一个映射关系key为路径,value可能是function或component路由分类后端路由:value是function,用来处理客户端提交的请求。注册路由:router.get(path,function(req,res)工作过程:当node 接收到一个请求时,根据请求路径找到匹配的路原创 2021-05-19 11:06:20 · 78 阅读 · 0 评论 -
React学习day8——react ajax
推荐react ajax链接https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetchhttps://blog.csdn.net/ZYC88888/article/details/82531610安装axiosyarn add axios原创 2021-05-17 14:43:19 · 68 阅读 · 0 评论 -
React学习day7--对react脚手架内文件的认知
创建好的react项目的目录结构如下,src下的components是我自己创建的,主要用来存放组件的js代码和css代码。App.js组件调用,文件路径./components/Hello/Hello.jsimport Hello from './components/Hello/Hello.js'<div > <Hello/> </div>全部代码展示:import './App.css';import Hello from './c原创 2021-05-13 20:23:22 · 41 阅读 · 0 评论 -
React学习day7——react中key的问题和diffing算法
经典面试题:1、react/vue中的key有什么作用?(key的内部原理是什么?)当状态中的数据发生变化时,react会根据新数据生成新的虚拟DOM,随后React进行新虚拟DOM与旧虚拟DOM的diff比较,比较规则如下:旧虚拟DOM中找到了与新虚拟DOM相同的key,若虚拟DOM中的内容没变,直接使用之前的真实DOM;若虚拟DOM内容变了,则生成新的真实DOM,随后替换掉页面中之前的真实DOM。旧虚拟DOM中未找到与新虚拟DOM相同的key,根据数据创建新的真实DOM,随后渲染到页面。2原创 2021-05-12 15:35:57 · 67 阅读 · 0 评论 -
React学习day6组件的生命周期
案例:定义组件实现以下功能:让指定的文本做显示/隐藏的渐变动画从完全可见,到彻底消失,耗时2s点击“消失”按钮从界面中卸载组件<script type="text/babel"> //创建组件 //生命周期(回调)函数<=>生命周期钩子(函数) class Life extends React.Component{ state = {opacity:1} death=()=>{原创 2021-05-11 13:35:30 · 70 阅读 · 0 评论 -
React学习day6受控和非受控组件,高阶函数和函数柯里化
Reacr中的事件处理1、通过onXXX属性指定事件处理函数(注意大小写)React使用的是自定义(合成)事件,而不是使用原生的DOM事件——为了更好的兼容性React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)2、通过event.target得到发生事件的DOM元素对象非受控组件和受控组件需求:定义一个包含表单的组件,输入用户名和密码或,点击登录提示输入信息...原创 2021-05-09 18:31:43 · 78 阅读 · 0 评论 -
React学习day5 组件的三大核心属性
组件的三大核心属性state(状态)state是组件对象最重要的属性,值是对象,可以包含多个key-value的组合。组件被称为“状态机”,通过更新组件的state来更新对应的页面显示(重新渲染组件)组件中的render方法中的this为组件实例对象组件自定义的方法中this为undefined的解决方法:a. 强制绑定this:通过函数对象的bind()constructor(props){ super(props) //初始化状态 thi原创 2021-05-08 14:13:15 · 73 阅读 · 0 评论 -
React学习day4模块和组件
模块和组件模块向外提供特定功能的js程序,一般就是一个js文件随着业务逻辑增加,代码越来越多且复杂,所以要拆分模块作用:复用js,简化js的编写,提高js运行效率组件:用来实现局部功能效果的代码和资源的集合(html、css、js、img、video、font…)作用:复用编码,简化项目编码,提高运行效率React面向组件编程1、使用React开发者工具调试React Developer Tools 插件概述React Developer Tools插件是什么?React D原创 2021-05-06 20:30:29 · 71 阅读 · 0 评论 -
React学习day3
JSX全称javaScript XMLreact 定义的一种类似于XML的JS扩展语法:JS+XML本质是React。createElement(componentent,props,…children)方法的语法糖作用:用来简化创建虚拟DOM. 写法:var ele=<h1>Hello JSXl</h1>. 注意1:它不是字符串,也不是HTML/XML标签.注意2:它最终产生的就是一个JS对象标签名任意:HTML标签或其它标签XML(拓展)原创 2021-05-05 16:48:36 · 50 阅读 · 0 评论 -
React学习day2
虚拟DOM的两种创建方式1、用jsx创建虚拟DOM代码如下:在h1内加上 id=“test”<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>用jsx创建虚拟DOM</title></head><body><!--准备好一个容器--><div id="test">&l原创 2021-05-05 12:07:33 · 67 阅读 · 0 评论