![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react
文章平均质量分 71
533_
这个作者很懒,什么都没留下…
展开
-
[react] hook
文章目录使用hook限制常用 hook 函数1、useState2. 受控组件3. useEffectuseEffect模拟componentDidMount模拟componentDidMount/componentDidUpdate模拟componentDidMount/componentWillUnmount模拟componentDidMount/componentDidUpdate/componentWillUnmount网络请求第一种写法第二种写法:第三种写法4. useReducer使用useRe原创 2021-12-27 16:39:55 · 263 阅读 · 0 评论 -
[react] 虚拟DOM与DOM Diffing算法
例子时间在更新,但是Input中的数据没有丢,说明input没有更新,用的还是之前的真实DOM时间在更新,但是span里面的Input标签里的数据也没丢,diffing算法不是只对比一层,span标签里的标签也会进行对比,所以这个input数据也不丢,还是之前的真实DOM。面试题: react/vue中的key有什么作用?(key的内部原理是什么?)1. 虚拟DOM中key的作用:简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。详细的说: 当状态原创 2021-12-03 14:00:32 · 108 阅读 · 0 评论 -
[react] hook
文章目录使用hook限制常用 hook 函数1、useState2. 受控组件3. useEffectuseEffect模拟componentDidMount模拟componentDidMount/componentDidUpdate模拟componentDidMount/componentWillUnmount模拟componentDidMount/componentDidUpdate/componentWillUnmount网络请求第一种写法第二种写法:第三种写法4. useReducer使用useRe原创 2021-12-15 11:59:20 · 660 阅读 · 0 评论 -
[react基础] redux react-redux immutable.js
文章目录单用户模块化拆分代码react-reduxreact-redux 拆分使用异步中间件 redux-thunkcode 图示版多人开发 模块化拆分codeindex.jsApp.jssrc\components\Films\index.jsxsrc\store\index.jssrc\reducer\count.jssrc\reducer\film.jssrc\mutation\countMutation.jssrc\mutation\filmMutation.jssrc\utils\http.js原创 2021-12-11 10:17:51 · 200 阅读 · 0 评论 -
[react] redux react-redux
文章目录1. redux理解1.1. 相关文档1.2. redux是什么1.3. 什么情况下需要使用redux1.4. redux工作流程2. redux的三个核心概念2.1. `action`2.2. `reducer`2.3. `store`3. API3.1. `createStore()`3.2. store对象3.3. `applyMiddleware()`3.4. `combineReducers()`4. 使用redux编写应用4.1 效果4.2 实现4.2.0 只用react写4.2.1 r原创 2021-12-10 21:10:41 · 892 阅读 · 1 评论 -
[react] ref 的常用方法 获取input的值
使用方法一<input type="text" ref={input=>this.yjwInput=input} onChange={this.inputChange} />// 其它地方获取 input 元素 :this.yjwInputthis.yjwInput.value 使用方法二<input type="text" ref='yjwInput' onChange={this.inputChange} />// 其它地方获取该 input 元素 :t原创 2021-12-08 14:49:19 · 3121 阅读 · 0 评论 -
[react] 路由
文章目录1. 相关理解1.1. SPA的理解1.2. 路由的理解1.2.1 什么是路由?1.2.2 路由分类2. react-router-dom相关API2.1. 内置组件2.2. 其它3. 基本路由使用3.1. 效果3.2. 准备3.3 路由的基本使用1. 相关理解1.1. SPA的理解单页Web应用(single page web application,SPA)整个应用只有一个完整的页面。点击页面中的链接不会刷新页面,只会做页面的局部更新。数据都需要通过ajax请求获取, 并在前端异步展原创 2021-12-06 22:10:41 · 317 阅读 · 0 评论 -
[react基础] 路由 声明式路由 编程式路由 路由传参 嵌套路由 路由渲染方式(component render children) withRouter 自定义导航组件
文章目录1、介绍2、路由使用2.1、相关组件2.2、安装路由模块3、声明式导航Link组件NavLink组件exact4、编程式导航跳转1、介绍现代的前端应用大多数是SPA(单页应用程序),也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小,所以更受欢迎。为了有效的使用单个页面来管理多页面的功能,前端路由应运而生。前端路由功能:让用户从一个视图(组件)导航到另一个视图(组件)前端路由是一套映射规则,在React中,是URL路径与组件的对应关系使用React路由简单来说,原创 2021-12-06 14:10:49 · 1046 阅读 · 0 评论 -
[react基础] 小demo,练习兄弟通信,父子通信,点击添加用户,列表新增一行用户数据
App.jsxsrc\User\index.jsxsrc\User\ui\UserForm.jsxsrc\User\ui\UserTable.jsxincludes 判断数组中是否存在某个值filter 过滤数组中的元素把Array的某些元素过滤掉,然后返回剩下的元素。codeAPP.jsximport React, { Component } from 'react';import User from './User';class App extend...原创 2021-12-06 11:42:05 · 382 阅读 · 0 评论 -
[react基础] 购物车小案例 使用memoizeOne
使用记忆组件let arr1 = [1,3,5,7,9]console.log(...arr1); //展开一个数组 1 3 5 7 9let arr3 = [...arr1] // [1, 3, 5, 7, 9] 新地址原创 2021-12-06 10:17:58 · 248 阅读 · 0 评论 -
[react基础] 高阶组件HOC 装饰器 memoization(计算属性-记忆组件)
概念高阶组件(Higher-Order Components)就是一个函数,传给它一个组件,它返回一个新的组件。高阶组件:就相当于手机壳,通过包装组件,增强组件功能。高阶函数:(以下条件满足其中之一,它就是一个高阶函数)1. 函数当作参数传入到定义的函数中 数组.map,filter…2. 把函数当作返回值返回(闭包)实现步骤:首先创建一个函数指定函数参数,参数应该以大写字母开头在函数内部创建一个类组件或函数组件,提供复用的状态逻辑代码,并返回传值使用高阶组件后,多了一层原创 2021-12-05 22:08:31 · 544 阅读 · 0 评论 -
[react基础] 组件传值 父传子props 父子互传ref 跨级context
文章目录1. 父传子自定义属性+props父传子 ref父传子 ref 方法一:直接调子组件的setState父传子 ref 方法二:调用子组件中的方法2. 子传父事件传值子传父 ref3. 跨组件传值context实现跨级父子组件间的通信1. 只获取2. 获取+修改1. 父传子自定义属性+props通过自定义属性的方式向子组件传值,子组件通过this.props.值名称接收使用父:import React, { Component } from 'react'export default c原创 2021-12-05 20:49:11 · 2013 阅读 · 0 评论 -
[react] Ajax 相关 - axios - 配置代理解决跨域问题
axios安装npm install axiosReact中配置代理解决跨域问题方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明:优点:配置简单,前端请求资源时可以不加任何前缀。缺点:不能配置多个代理。工作方式:上述方式配置代理,当请求了3000不存在的资源时,那么该请求会转发给5000 (优先匹配前端资源)方法二第一步:创建代理配置文件在src下创建配置文件:src/setupProxy.js原创 2021-12-04 22:51:41 · 167 阅读 · 0 评论 -
[react] React脚手架 - create-react-app - 创建Hello React
1. 使用create-react-app创建react应用1.1. react脚手架xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目包含了所有需要的配置(语法检查、jsx编译、devServer…)下载好了所有相关的依赖可以直接运行一个简单效果react提供了一个用于创建react项目的脚手架库: create-react-app项目的整体技术架构为:react + webpack + es6 + eslint使用脚手架开发的项目的特点: 模块化, 组件化, 工程化原创 2021-12-04 17:48:01 · 282 阅读 · 0 评论 -
[react基础] css-in-js
安装npm i -S styled-components定义样式# 样式js文件import styled from 'styled-components'const Title = styled.div` color:red; font-size:16px; h3{ color:blue; font-size:20px; }`export { Title}// 就像使用常规 React 组件一样使用 Titleimport React, { C.原创 2021-12-03 15:10:11 · 66 阅读 · 0 评论 -
[react] 组件的生命周期
文章目录1. 组件的生命周期1.4 生命周期的三个阶段(新)getDerivedStateFromPropsgetSnapshotBeforeUpdate1. 初始化阶段2. 更新阶段3. 卸载组件1.5 重要的勾子1.6 即将废弃的勾子1. 组件的生命周期1.4 生命周期的三个阶段(新)getDerivedStateFromProps这样的话,state在任何时候,都取决于propsgetSnapshotBeforeUpdate1. 初始化阶段由ReactDOM.render()原创 2021-12-01 19:47:27 · 375 阅读 · 0 评论 -
[react] 表单 受控组件 非受控组件
文章目录收集表单数据1 理解2 应用3 非受控组件4 受控组件收集表单数据1 理解包含表单的组件分类受控组件非受控组件2 应用需求:定义一个包含表单的组件输入用户名密码后, 点击登录提示输入信息3 非受控组件页面中所有输入类DOM的值,都是现用现取的// 创建组件class Login extends React.Component { handleSubmit = (event) => { event.preventDefault() // 阻止表单提交原创 2021-12-01 17:43:34 · 375 阅读 · 0 评论 -
[react基础] 表单 受控组件 非受控组件 单选 多选 全选 下拉菜单 高阶函数与函数的柯里化
表单处理1、受控组件将state与表单项中的value值绑定在一起,有state的值来控制表单元素的值,称为受控组件。绑定步骤:在state中添加一个状态,作为表单元素的value值给表单元素绑定change事件,将表单元素的值设置为state的值<input type="text" value={this.state.username} onChange={this.inputChange.bind(this)} />// 注:多表单元素需优化事件方法this.setSt原创 2021-12-01 11:21:12 · 890 阅读 · 0 评论 -
[react基础] props进阶---children defaultProps prop-types
props进阶3.1、children属性children属性,表示组件标签的子节点,当组件标签有子节点时,props就会有该属性,与与普通的props一样,其值可以使任意类型。单标签和双标签中没有数据都是没有此属性。# 父组件class App extends React.Component { render() { return ( <div> <Cmp>我是children中的值</Cmp>原创 2021-12-01 11:14:36 · 511 阅读 · 0 评论 -
[react基础] -- jsx 数组 项目构建 类组件,函数组件,组件传值,事件绑定,事件传参 state
文章目录一、React初识二、JSX1、概述2、JSX重构Hello world3、在JSX中语法中的js表达式3.1、嵌入JS表达式3.2、属性绑定 src={src}3.3、数组渲染3.3.1、直接渲染3.3.2、处理并渲染三、项目构建1、初始化项目2、目录结构四、组件1、组件的创建方式1.1、函数创建组件1.2、类组件2、组件传值2.1、函数组件2.2、类组件五、事件处理1、事件绑定2、事件对象3、事件方法传参4、this指向问题六、State状态1、基本使用2、修改状态this.setState同步原创 2021-11-30 12:05:27 · 1291 阅读 · 0 评论 -
[react] 面向组件编程 组件实例的三大核心属性---state props ref
文章目录1. 面向组件编程的基本理解和使用1.1 函数式组件【补充】严格模式中的this复习类的基础知识类类的继承函数重载【补充】关于ES6中类的注意事项1.2 类式组件2. 组件实例的三大核心属性1: state 状态2.1 理解2.2 应用2.2.1 手动切换版1. 面向组件编程的基本理解和使用1.1 函数式组件// 1. 创建函数式组件,组件的首字母必须大写function MyComponent(){ //此处的this是undefined,因为babel编译后开启了严格模式原创 2021-11-29 14:49:23 · 430 阅读 · 0 评论 -
[react] 虚拟DOM和真实DOM比较 JSX语法
文章目录Hello React相关库介绍【补充】babel.js的作用使用JSX创建虚拟DOM渲染虚拟DOM(元素)页面显示创建虚拟DOM的两种方式纯JS方式(一般不用)虚拟DOM与真实DOMJSX入门概述基本语法规则【补充】 区分js表达式与js语句总结Hello React相关库介绍旧版本 16.8.4 (March 5, 2019)新版本 有不一样的会说明react.js:React核心库。react-dom.js:提供操作DOM的React扩展库。babel.min.js:解析JSX语原创 2021-11-24 09:32:31 · 724 阅读 · 0 评论 -
[react] 开篇---虚拟DOM
直接覆盖原创 2021-11-23 14:02:46 · 189 阅读 · 0 评论