![](https://img-blog.csdnimg.cn/20200529135401712.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
文章平均质量分 72
react学习之路笔记
你华还是你华
对Javascript、css、html、php、java、python、MongoDB、MySQL、scrapy、flask、springboot、Laravel、React、Vue、node,热爱的博主。
座右铭:不忘初心,砥砺前行。
展开
-
react使用styled-components
一、styled-components1.1 安装使用1.2 基于props做样式判断1.3 样式化任意组件1.4 动画原创 2022-05-12 23:46:01 · 800 阅读 · 0 评论 -
react路由及redux中使用TS
本文目录一、react路由中使用ts二、redux中使用ts一、react路由中使用ts输入命令npm i react-router-dom@5安装路由:再输入命令:npm i --save-dev @types/react-router-dom安装路由类型推断。新建如下文件:Film.tsx写入如下代码:import axios from 'axios'import { Component } from 'react'import { RouteComponentProps } fro原创 2022-05-01 21:51:35 · 2388 阅读 · 0 评论 -
react类组件及函数组件中使用typescript
react类组件及函数组件中使用typescript的各个场景原创 2022-04-28 22:46:53 · 1852 阅读 · 0 评论 -
创建基于TS的react项目及Typescript基本语法
本文目录一、react中基于Typescript项目创建1.1 ts介绍1.2 安装基于ts的react项目二、typescript基础语法2.1 字符串、数字、布尔2.2 数组2.3 对象2.4 函数2.5 类一、react中基于Typescript项目创建1.1 ts介绍1、Typescript的定位是静态类型语言,在写代码阶段就能检查错误,而非运行阶段。2、类型系统是最好的文档,增加了代码的可读性和维护性。3、有一定的学习成本,需要理解接口(interfaces)、泛型(Generics)原创 2022-04-23 16:19:19 · 2073 阅读 · 0 评论 -
react中使用antd、immutable
本文目录一、react中使用antd组件库二、Immutable2.1 深拷贝和浅拷贝的关系2.2 immutable优化性能方式2.3 immutable的Map使用2.4 immutable的List使用2.5 实际场景formJS三、redux中使用immutable一、react中使用antd组件库运行命令create-react-app antd-react创建新项目:运行命令npm i antd安装:使用:import React from 'react'import React原创 2022-04-10 16:16:11 · 1053 阅读 · 0 评论 -
react-redux及redux持久化
本文目录一、react-redux一、react-redux原创 2022-04-08 19:50:41 · 1532 阅读 · 0 评论 -
Redux中间件及其开发者工具
本文目录一、redux中间件(redux-thunk)二、redux中间件(redux-promise)一、redux中间件(redux-thunk)redux里,action仅仅是携带了数据的普通js对象。action creator返回的值是这个action类型的对象。然后通过store.dispatch进行分发,同步的情况下一切都很完美,但是reducer无法处理异步的情况。那么我们就需要在action和reducer中间架起一座桥梁来处理异步。这就是middleware安装命令: npm原创 2022-04-04 22:31:41 · 1363 阅读 · 0 评论 -
Redux使用
本文目录一、Flux与Redux1.1 Flux一、Flux与Redux1.1 FluxFlux是一种架构思想,专门解决软件结构问题。它跟MVC架构是同一类的东西,但是更加简单和清晰。Flux存在多种实现。Facebook FLux是用来构建客户端web应用的应用架构。它利用单向数据流的方式来组合React中的视图组件。它更像一个模式而不是一个正式的框架,开发者不需要太多的新代码就可以快速上手Flux...原创 2022-03-26 17:52:12 · 1100 阅读 · 0 评论 -
React反向代理及样式独立
本文目录一、反响代理1.1 安装1.2 使用二、cssModule一、反响代理1.1 安装使用命令:npm install http-proxy-middleware --save1.2 使用将之前的Film.js组件改成如下:import React from 'react'import {Route, Redirect, Switch, NavLink} from 'react-router-dom'import NowPlay from './film/NowPlay'import原创 2022-03-19 16:51:04 · 934 阅读 · 0 评论 -
React(路由拦截、模式、withRouter)
本文目录一、路由拦截二、路由模式一、路由拦截在前面两篇 路由博客基础上,我们将ReactRouter.js的我的profile路由设置成路由拦截的:新建Login.js组件,写入代码:import React, { Component } from 'react'export default class Login extends Component { render() { return ( <div> <h2>Login&原创 2022-03-18 22:14:11 · 1268 阅读 · 2 评论 -
React路由进阶
本文目录一、react嵌套路由二、声明式导航三、编程式导航四、动态路由一、react嵌套路由在views文件夹下新建film文件夹,里面新建两个组件:在Film.js增加嵌套路由:<Switch> <Route path="/film/nowplay" component={NowPlay}></Route> <Route path="/film/comingsoon" component={Comingsoon}>&原创 2022-03-17 19:35:55 · 1409 阅读 · 2 评论 -
React初识路由
本文目录一、React路由1.1 什么是路由1.2 路由安装1.3 路由使用1.4 路由重定向1.5 匹配404一、React路由1.1 什么是路由路由是根据不同的url地址展示不同的内容或页面。一个针对React而设计的路由解决方案,可以友好的解决组件和url的映射关系。1.2 路由安装npm install react-router-dom@51.3 路由使用在src文件夹下创建FilmRouter文件夹,在里面创建views文件夹,将之前我的这篇博客中moviecomponents文件原创 2022-03-17 18:38:36 · 660 阅读 · 0 评论 -
React hooks(useContext、useReducer、自定义hooks)
本文目录一、useContext一、useContext原创 2022-03-16 23:27:40 · 469 阅读 · 0 评论 -
React Hooks(useState、useEffect)
本文目录一、react hooks(useState)1.1 useState使用1.2 hooks案例(useState)二、react hooks(useEffect)2.1 useEffect使用2.2 useEffect模拟销毁2.3 useEffect和useLayoutEffect区别一、react hooks(useState)使用hooks理由:1、高阶组件为了复用,导致代码层级复杂2、生命周期的复杂3、写成functional组件,无状态组件,因为需要状态,又改成了class,原创 2022-03-15 19:31:06 · 2600 阅读 · 0 评论 -
React Hooks(useCallback、useMemo、useRef)
本文目录一、useCallback(记忆函数)二、useMemo(记忆组件)三、useRef(保存引用值)一、useCallback(记忆函数)防止因为组件重新渲染,导致方法被重新创建,起到缓存作用,只有第二个参数变化了,才重新声明一次。新建 UseCallback.js方法组件,写入代码:import React, { useCallback, useState } from 'react'export default function UseCallback() { const [原创 2022-03-15 18:51:25 · 1038 阅读 · 0 评论 -
React@17.0.2生命周期
本文目录一、React生命周期(初始化)1.1 初始化阶段1.2 示例二、React生命周期(运行中)2.1 运行中阶段三、React生命周期(销毁)3.1 销毁阶段一、React生命周期(初始化)1.1 初始化阶段1、componentWillMount:render之前最后一次修改状态的机会(注意:将被弃用,不被推荐使用。如果有需求,官方推荐在constructor中去做或者改成UNSAFE_componentWillMount)(为什么被弃用?在react16.2之后发生了改变,推出了新的生原创 2022-03-12 19:53:25 · 2055 阅读 · 0 评论 -
React中的插槽
本文目录一、react插槽1.1 代码演示1.2 插槽好处一、react插槽1.1 代码演示使用this.props.children。新建children.js组件,写入:import React, { Component } from 'react'class Child extends Component { render() { return ( <div> children原创 2022-03-09 22:45:19 · 1023 阅读 · 0 评论 -
React父子组件通信
本文目录一、父子组件表单域通信1.1 受控表单域写法1.2 ref版表单域组件一、父子组件表单域通信1.1 受控表单域写法新建Login.js组件,写入:import React, { Component } from 'react'class Filed extends Component { render() { return <div style={{background: "yellow"}}> <label>{this.props.lab原创 2022-03-09 20:59:42 · 662 阅读 · 0 评论 -
React父子通信(受控组件)
本文目录一、子组件传父组件二、选项卡案例应用(受控组件)一、子组件传父组件新建组件Childtheparent.js写入:import React, { Component } from 'react'class Navbar extends Component { render() { return ( <div style={{background: "red"}}> <button onClick={() => {原创 2022-03-06 17:24:31 · 558 阅读 · 0 评论 -
react受控与非受控组件
本文目录一、表单中受控组件与非受控组件1.1 非受控组件1.2 受控组件二、之前选项卡案例改为受控三、受控组件应用之前todolist案例一、表单中受控组件与非受控组件1.1 非受控组件React要编写一个非受控组件,可以使用ref来从DOM节点中获取表单数据,就是非受控组件。新建uncontrolled.js写入:import React, { Component } from 'react'export default class Uncontrolled extends Componen原创 2022-03-05 20:47:12 · 481 阅读 · 0 评论 -
react父组件向子组件传值(props)
react父组件向子组件传值(props),包括类组件和函数组件的传值方案。原创 2022-03-05 00:05:34 · 2564 阅读 · 0 评论 -
React案例选项卡
本文目录一、选项卡案例1.1 新建样式文件1.2 新建独立3个组件1.3 主逻辑组件二、影院组件逻辑2.1 主逻辑2.2 setState同步异步问题一、选项卡案例1.1 新建样式文件在css文件夹下创建tab.css,写入样式:ul { list-style: none; display: flex; position: fixed; bottom: 0; left: 0; height: 50px; line-height: 50px;原创 2022-03-04 22:19:26 · 985 阅读 · 0 评论 -
React的todolist案例
本文r目录一、todolist案例1.1 增加与删除1.2 优化1.3 条件渲染一、todolist案例基于前面学习的react知识,在此基础上进行编写一个react的todolist案例。1.1 增加与删除新建todolist.js写入:import React, { Component, createRef } from 'react'export default class Todolist extends Component { state = { arr: ['000',原创 2022-03-03 21:25:42 · 715 阅读 · 0 评论 -
react事件、ref应用、状态、列表渲染
这里写目录标题一、事件绑定1.1、react事件绑定和原生js事件绑定1.2、事件绑定4种方式及this指向二、ref应用三、状态(state)四、列表渲染一、事件绑定1.1、react事件绑定和原生js事件绑定react事件绑定和原生js事件绑定有什么区别?react事件绑定没用具体的绑定在dom节点上,采用的是一种事件代理的模式。好处占有内存非常小。和普通浏览器一样,事件 handler会被自动传入一个event对象,这个对象和普通的浏览器event对象所包含的方法和属性都基本一致,不同的是R原创 2022-03-03 20:37:43 · 607 阅读 · 0 评论 -
React@17.0.2上手及组件开发
这里写目录标题一、react上手1.1 React特性1.2 创建react项目1.3 编写react应用程序二、react组件开发2.1 class组件2.2 函数组件2.3 组件嵌套2.4 组件样式一、react上手1.1 React特性本学习记录基于"react": “^17.0.2”。1、声明式设计 react采用声明范式,可以轻松描述应用。2、高效 react通过对DOM的模拟(虚拟dom),最大限度的减少与DOM的交互。3、灵活 react可以与已知的库或框架很好的配合。4、js原创 2022-03-03 20:05:33 · 1233 阅读 · 2 评论 -
3-4、React中使用Reducers进行数据管理。
本节将开启React框架高阶学习第四篇如果还没有学习 1-1 ~ 1-6 React框架基础的话,建议点我开始React框架基础学习大家好,我是Counterrr不忘初心,砥砺前行本文目录一、回顾3-3、React中Redux的action生成器使用,以及初识Reducers。中我们在最后写了各国疫情数据的两个Reducers;二、添加各国疫情数据Reducers;1、回顾各国疫情...原创 2020-05-05 20:10:25 · 3744 阅读 · 0 评论 -
3-3、React中Redux的action生成器使用,以及初识Reducers。
本节将开启React框架高阶学习第三篇如果还没有学习 1-1 ~ 1-6 React框架基础的话,建议点我开始React框架基础学习大家好,我是Counterrr不忘初心,砥砺前行本文目录一、回顾 3-2、React中Redux基础使用 中数据默认值操作,并写成action生成器方式。二、Reducers的基础使用;1、回顾3-2、React中Redux基础使用中数据默认值操作,并...原创 2020-05-04 18:04:46 · 1189 阅读 · 0 评论 -
3-2、React中Redux基础使用。
本节将开启React框架高阶学习第二篇如果还没有学习 1-1 ~ 1-6 React框架基础的话,建议点我开始React框架基础学习大家好,我是Counterrr不忘初心,砥砺前行本文目录一、回顾MySelectLanApp项目(2-4、React脚手架的使用,以及组件模块构建。)对数据操作的方法;二、Redux的基础使用;1、回顾MySelectLanApp项目对数据操作的方法:...原创 2020-05-02 18:06:48 · 318 阅读 · 0 评论 -
3-1、React-Router基础使用plus
本节将开启React框架高阶学习第一篇如果还没有学习 1-1 ~ 1-6 React框架基础的话,建议点我开始React框架基础学习大家好,我是Counterrr不忘初心,砥砺前行本文目录一、React-Router的基础使用plus二、模块化重构三、路由特性1、React-Router的基础使用plus:我们在 2-5、React-Router的基础使用 中简单的介绍了Reac...原创 2020-05-01 23:13:48 · 389 阅读 · 0 评论 -
2-5、React-Router的基础使用
本节将开启React框架进阶学习第五篇如果还没有学习 1-1 ~ 1-6 React框架基础的话,建议点我开始React框架基础学习文章系列(React框架进阶)2-1、React框架组件化state的使用2-2、React函数组件、默认props2-3、React使用props以及state、React生命周期localStorage的使用2-4、React脚手架的使用,以及组件模块...原创 2020-04-30 23:48:38 · 794 阅读 · 2 评论 -
2-4、React脚手架的使用,以及组件模块构建。
本节将开启React框架进阶学习第四篇如果还没有学习 1-1 ~ 1-6 React框架基础的话,建议点我开始React框架基础学习文章系列(React框架进阶)2-1、React框架组件化state的使用2-2、React函数组件、默认props2-3、React使用props以及state、React生命周期localStorage的使用大家好,我是Counterrr不忘初心,砥...原创 2020-04-28 18:10:46 · 884 阅读 · 0 评论 -
2-3、React使用props以及state、React生命周期localStorage的使用
本节将开启React框架进阶学习第三篇如果还没有学习 1-1 ~ 1-6 React框架基础的话,建议点我开始React框架基础学习文章系列(React框架进阶)2-1、React框架组件化state的使用2-2、React函数组件、默认props大家好,我是Counterrr不忘初心,砥砺前行本文目录一、箭头函数的简易化一、React使用state、props完善小项目二、R...原创 2020-04-27 23:30:55 · 899 阅读 · 0 评论 -
2-2、React函数组件、默认props
本节将开启React框架进阶学习第二篇如果还没有学习 1-1 ~ 1-6 React框架基础的话,建议点我开始React框架基础学习文章系列(React框架进阶)2-1、React框架组件化state的使用大家好,我是Counterrr不忘初心,砥砺前行本文目录一、React函数组件的介绍二、默认Props1、React函数组件:还记得我们之前写了一个随机选择学习语言小项目,最...原创 2020-04-26 22:03:02 · 6661 阅读 · 5 评论 -
2-1、React框架组件化state的使用
本节将开启React框架进阶学习第一篇点我开始React框架基础学习大家好,我是Counterrr不忘初心,砥砺前行本文目录一、回顾React框架基础篇中小项目二、state的使用三、React框架基础篇小项目的完善1、回顾React框架基础篇中小项目:回顾下我们在 1-1 ~ 1-6 React框架基础篇中做了一个小项目,随机选择学习语言小项目,在1-6、React组件中传值...原创 2020-04-26 00:34:53 · 482 阅读 · 0 评论 -
1-6、React组件中传值、添加事件和this丢失问题
文章系列(React框架基础)1-1、React环境搭建,以及初识jsx语法。1-2、React熟悉,jsx语法以及变量绑定和三种渲染语句1-3、React绑定属性和事件,以及事件的响应。1-4、React中form表单下的input框初使用以及列表渲染1-5、React初探组件化开发,高内聚低耦合大家好,我是Counterrr不忘初心,砥砺前行本文目录一、组件中传值;二、添加...原创 2020-04-25 18:21:45 · 610 阅读 · 0 评论 -
1-5、React初探组件化开发,高内聚低耦合
文章系列1、React环境搭建,以及初识jsx语法。2、React熟悉,jsx语法以及变量绑定和三种渲染语句3、React绑定属性和事件,以及事件的响应。4、React中form表单下的input框初使用以及列表渲染大家好,我是Counterrr不忘初心,砥砺前行本文目录一、组件化开发1、组件化开发:这节内容只讲组件化开发,就是采用组件化开发的思想,好处组件可以去复用,将前面我...原创 2020-04-25 00:22:51 · 1182 阅读 · 0 评论 -
1-4、React中form表单下的input框初使用以及列表渲染
文章系列1、React环境搭建,以及初识jsx语法。2、React熟悉,jsx语法以及变量绑定和三种渲染语句3、React绑定属性和事件,以及事件的响应。大家好,我是Counterrr不忘初心,砥砺前行本文目录一、根据input框以及列表渲染做了小项目展示;二、input框初使用;三、列表渲染;四、小项目代码解读;一、小项目展示...原创 2020-04-24 12:54:25 · 3669 阅读 · 0 评论 -
1-3、React绑定属性和事件,以及事件的响应。
大家好,我是Counterrr接下来讲讲React的绑定属性和事件,以及事件的响应,这里就不赘述环境的搭建了,环境搭建可以看我前面的文章。(1、React环境搭建,以及初识jsx语法。)好的,主要分两部分React绑定属性和事件:1、绑定属性:我们用vscode打开之前在桌面建好的react-demo文件,打开vscode终端命令行输入命令live-server启动服务,再在vscode再...原创 2020-04-23 20:33:38 · 1981 阅读 · 0 评论 -
1-2、React熟悉,jsx语法以及变量绑定和三种渲染语句
大家好,我是Counterrr继上篇配置好React环境,以及启动live-server服务器和babel配置后,继续来熟悉我们的React。今天主要讲讲React中的两小块基础。即jsx中的变量绑定和三种渲染语句。(tips: 在我们写const template = <p>我是一个P标签</p>时,可以个html写过括号括起来const template = (...原创 2020-04-22 18:13:22 · 1833 阅读 · 0 评论 -
1-1、React环境搭建,以及初识jsx语法。
大家好,我是Counterrr,生命不息学习不止。今天第一天学习React,毕竟只掌握Vue我是不满足的,虽然我最近还在学习node,express,但是我还想学Java,php,python,咳咳咳扯远了。进入主题(Zzz~):首先在桌面创建文件夹react-demo,拖到编辑器,VsCode或者WebStorm都可以。我这边使用VsCode。在根目录下创建src文件夹。在根目录下创建i...原创 2020-04-22 01:06:38 · 599 阅读 · 0 评论