![](https://img-blog.csdnimg.cn/463dd3d6bb894a80907bb8e0c2c6fedc.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React V17.0.2
文章平均质量分 72
react V17.0.2
你华还是你华
对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 · 815 阅读 · 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 · 2394 阅读 · 0 评论 -
react类组件及函数组件中使用typescript
react类组件及函数组件中使用typescript的各个场景原创 2022-04-28 22:46:53 · 1867 阅读 · 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 · 2079 阅读 · 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 · 1055 阅读 · 0 评论 -
react-redux及redux持久化
本文目录一、react-redux一、react-redux原创 2022-04-08 19:50:41 · 1536 阅读 · 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 · 1368 阅读 · 0 评论 -
Redux使用
本文目录一、Flux与Redux1.1 Flux一、Flux与Redux1.1 FluxFlux是一种架构思想,专门解决软件结构问题。它跟MVC架构是同一类的东西,但是更加简单和清晰。Flux存在多种实现。Facebook FLux是用来构建客户端web应用的应用架构。它利用单向数据流的方式来组合React中的视图组件。它更像一个模式而不是一个正式的框架,开发者不需要太多的新代码就可以快速上手Flux...原创 2022-03-26 17:52:12 · 1104 阅读 · 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 · 939 阅读 · 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 · 1274 阅读 · 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 · 667 阅读 · 0 评论 -
React hooks(useContext、useReducer、自定义hooks)
本文目录一、useContext一、useContext原创 2022-03-16 23:27:40 · 479 阅读 · 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 · 2613 阅读 · 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 · 1045 阅读 · 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 · 2063 阅读 · 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 · 1024 阅读 · 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 · 665 阅读 · 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 · 559 阅读 · 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 · 488 阅读 · 0 评论 -
react父组件向子组件传值(props)
react父组件向子组件传值(props),包括类组件和函数组件的传值方案。原创 2022-03-05 00:05:34 · 2567 阅读 · 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 · 994 阅读 · 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 · 724 阅读 · 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 · 608 阅读 · 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 · 1238 阅读 · 2 评论