- 博客(19)
- 收藏
- 关注
原创 20240823美团外包面试记录
给出一个对象,基于id插入value和valuePathid:1,id: 11,}]}]value: 1,value: 11,}]}]
2024-08-23 16:00:36
108
原创 15. react-router的使用
文章目录React-Router路由的简单使用安装路由在最外层的节点上:路由的实现 Route | Switch | Redirect使用Route实现路由使用Redirect实现路由重定向使用Switch导航声明式导航编程式导航动态路由路由的常用api方法render函数link的参数传递withRouterReact-Routergithub最新的路由的版本是5.2的版本。里面提供了一些包用于创建管理路由所以在做web端开发的时候只需要安装react-router-dom就可以了,因为内部已经包
2020-10-20 09:02:37
132
原创 13.中间件和高阶组件
中间件通常情况下,action只是一个对象,不能包含异步操作,这导致了很多创建action的逻辑只能写在组件中,代码量较多也不便于复用,同时对该部分代码测试的时候也比较困难,组件的业务逻辑也不清晰,使用中间件了之后,可以通过actionCreator异步编写action,这样代码就会拆分到actionCreator中,可维护性大大提高,可以方便于测试、复用,同时actionCreator还集成了异步操作中不同的action派发机制,减少编码过程中的代码量。通过redux-thunk | redux-pr
2020-10-20 09:01:23
198
原创 12.react-redux工具
react-reduxreact-redux 针对性解决了redux的几个使用上的问题:每次使用redux都要引入store数据更新需要手动调用store.subscribe()来订阅actionCreator中要进行手动的派发action,这样他就不够纯粹。安装npm install react-redux -S或者yarn add react-reduxreact-redux的核心组件import {Provider,connect} from "react-redux"P
2020-10-20 08:59:54
158
原创 11.redux的简单使用
文章目录redux 的使用1.安装redux2.创建store3.创建reducer4.获取redux的状态,并渲染到dom5. 更改redux的状态如下,想要进行新的数据的添加6.store的三个重要方法7.组件的优化(针对组件type写错了不会弹出错误的问题)reducer的总结redux的思路整理1. redux有三部分组成 **store、reducer、actionCreators**2. redux有三个重要的方法3. 基本流程:拆分reducer1. 将reducer.js 和 actionC
2020-10-20 08:58:49
198
原创 10-react的Props属性验证和Context
Props属性验证Props属性验证—> 高级指引 -----> 使用PropsTypes 类型检查导入插件import PropTypes from ‘prop-types’;import PropTypes from 'prop-types';MyComponent.propTypes = { // 你可以将属性声明为 JS 原生类型,默认情况下 // 这些属性都是可选的。 optionalArray: PropTypes.array, optionalBool:
2020-10-15 10:54:15
220
原创 09.React的生命周期
文章目录React 生命周期挂载阶段更新阶段卸载阶段各生命周期的详解1.constructor()2.static getDerivedStateFromProps(newProps,prevState)3.render()4. componentDidMount()5. shouldComponentUpdate(nextProps,nextState)6. getSnapshotBeforeUpdate(prevProps, prevState)7.componentDidUpdate(prevProp
2020-10-15 10:53:19
133
原创 08.react的mock工具和proxy
mock 数据工具https://gitee.com/rh_hg/json-server?_from=gitee_search全局安装json-server ,在本地构建数据接口npm install -g json-server (json-server --version 查看版本号)找到mock文件夹目录 : json-server .\data.json --port 4000 -w(-w 实时检查文件更改)json-server的常用命令前后端并行开发的痛点前端需要等待后端开发
2020-10-15 10:52:11
408
原创 07.react组件间的通信
React中的组件通信父子通信 | 子父通信 | 兄弟通信父子通信父组件调用子组件,传参给子组件<Son list={this.state.list}/>子组件通过this.props获取到父组件传递来的属性,可以使用,但是不能修改从属性中解构出listlet {list} = this.props 子父组件通信父组件定义改变自身状态的方法父组件调用子组件时把方法传递给子组件子组件通过this.props.xx方法调用,一旦调用,相当于在父组件更改自身状态的方
2020-10-15 10:48:01
92
原创 06.React的一些细节
es7-react插件如果你使用vscode,可以安装这个插件,以简化工作rcc快速创建类组件rfc快速创建函数式组件jsx注意事项https://react.docschina.org/docs/dom-elements.html对于input元素的value值,必须要配合onChange事件,其实就是为了写成受控组件<input type="text" value={this.state.a} onChange={(e)=>{this.setState({a:e.targe
2020-10-15 10:47:15
80
原创 05.搭建create-react-app脚手架
creat-react-appCreate React App 是一个官方支持的创建 React 单页应用程序的方法。它提供了一个零配置的现代构建设置。安装脚手架使用npm安装npm install -g create-react-app【注意】目录名为了严谨不能用大写,以为在Linux中是严格区分大小写的使用yarn安装yarn add create-react-app初始化一个新的应用npx是npm5.2以后更新的npx create-react-app my-app
2020-10-15 10:46:00
107
原创 04.表单元素的受控组件和非受控组件
文章目录受控组件与非受控组件ref属性ref的 callback回调函数形式受控组件与非受控组件表单元素的value值完全来只与state,这个组件就是受控组件,否则就是非受控组件受控组件:在HTML中,表单元素通常自己维护state,并根据用户输入进行更新。而在React中,可变状态通常保存在组件的State属性中,并且只能通过setState()来更新我们可以把两者结合起来,使得react得state成为“唯一数据源”。渲染表单的react组件还控制着用户输入过程中表单发生的操作。被Rea
2020-10-15 10:44:55
143
原创 03.React的props属性和state状态
文章目录react 中的数据承载--- state/propsprops 属性使组件拥有属性的方式:1. 在装载组件的时候传入2. 父组件给子组件传入3. 逻辑判断状态(state)两种setState的比较函数式组件定义状态扩充--> 关于constructor中的super()属性和状态的对比react 中的数据承载— state/props任意的视图变化都应该是由数据来控制的React也是基于数据驱动(声明式)的框架,组件中必然要承载一些数据,在react助攻起到这个作用的是属性(prop
2020-10-15 10:43:48
260
原创 02.React简易环境和基础使用
文章目录构建React简易环境基础知识模板语法{}事件绑定React中常用的'遍历'元素与组件函数式组件/无状态组件类组件/class组件组件的组合嵌套JSX语法糖组件dom添加样式React Event / 事件构建React简易环境react开发需要引入多个依赖文件:react.js、react-dom.js,分别又有开发版本和生产版本react.js中有React对象,帮助我们创建组件等功能react-dom.js中有ReactDOM对象,渲染组件的虚拟dom为真实dom的爆发功能在编写re
2020-10-15 10:42:51
77
原创 01.React的简介
文章目录React框架React的起源React的出发点React与传统MVC的关系React的高性能的体现: 虚拟DOMReact高性能的原理React FiberReact的特点和优势1. 虚拟DOM --- > 高性能2. 组件系统 --- > 高效率3. 单向数据流4. JSX语法React框架React的起源起初facebook在建设instagram(图片分享)的时候,因为牵扯到一个东西叫数据流,那为了处理数据流并且还要考虑好性能方面的问题,Facebook开始对市场上的各种
2020-10-15 10:41:41
271
原创 2020秋季前端面试题2
React 中 keys 的作用是什么?Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识。在开发过程中,我们需要保证某个元素的 key 在其同级元素中具有唯一性。在 React Diff 算法中 React 会借助元素的Key值来判断该元素是新近创建的还是被移动而来的元素,从而减少不必要的元素重渲染。此外,React还需要借助Key值来判断元素与本地状态的关联关系,因此我们绝不可忽视转换函数中 Key 的重要性。vue和 react 怎么检测数据变化的Vuevue
2020-10-09 09:42:50
430
原创 2020秋季前端面试题1
什么是高阶组件、受控组件、非受控组件?高阶组件是个函数,输出结果是个新组件,可以对输入的组件就行加工,并返回一个具有特定功能的组件。受控组件相当于input中的value值通过state值获取,onChange事件改变state中的value值。实现了双向绑定,任意一方的数据发生变化,另一方也会随之改变 。非受控组件不需要设置对应的state属性,可通过ref来直接操作真实的dom。http的缓存机制关于HTTP的缓存机制来说,这些缓存策略都会体现在HTTP的头部信息的字段上,这些策略会
2020-10-09 09:42:15
177
原创 Vue的结构,路由配置
创建分支在git bash中git checkout -b createComponents【成功后的回馈:Switched to a new branch ‘createComponents’】Vue文件结构简介public放置全局静态资源node_modules放置第三方模块src 目录主要的开发环境src\assets放置静态资源,期内的资源会编码成base64格式,打包到模块中。主要放一些小的图标,图片。main.js 主模块App.vue 主组件views 页面级
2020-10-04 21:59:35
1806
原创 一个项目的流程和前期的准备工作
项目开发流程产品立项(主要是项目经理负责)(1) 客户的需求分析(2) 整理需求分析文档(3) 项目成立会产品原型(产品)(1) 设计产品原型图(2) ui设计 — ps工具 AI等项目开发()(1) 项目需求分析(技术点,难点)(2) 项目工期评估(3) 项目责任划分(可以划分到人)(4) 前端: 静态页面制作(可以先做demo,辅助设计) 前端框架选项(VUE React 等等) 前端页面架构 后端: API接口文档(方便前端用mock模
2020-10-02 20:49:01
2498
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人