react
文章平均质量分 56
以实战为线索,逐步深入React开发各个环节,掌握前端常用性能体验优化思路,打造完整前端工作流,提升工程化编码能力和思维能力
专职八阿哥
这个作者很懒,什么都没留下…
展开
-
React-router v5和v6的区别对比
以下是两个版本之间的区别:一、首先是注册路由的时候v5的Switch改为了Routesv5,代码如下: import {Route, Switch} from 'react-router-dom' //引入react-router <div> {/* 注册路由(编写路由链接) */} <Switch> ...... ...... </Switch> </div>v6,代原创 2022-02-09 16:52:16 · 3224 阅读 · 6 评论 -
React+antd组件库使用方法
首先介绍一下antd组件库antd组件库是蚂蚁集团的企业级产品是一个庞大且复杂的系统,数量多且功能复杂,而且变动和并发频繁,常常需要设计者与开发者能快速做出响应。同时这类产品中有存在很多类似的页面以及组件,可以通过抽象得到一些稳定且高复用性的内容。随着商业化的趋势,越来越多的企业级产品对更好的用户体验有了进一步的要求。带着这样的一个终极目标,我们(蚂蚁集团体验技术部)经过大量项目实践和总结,逐步打磨出一个服务于企业级产品的设计体系 —— Ant Design。基于「自然」、「确定性」、「意义感」、「原创 2022-02-04 18:56:17 · 8007 阅读 · 0 评论 -
什么是react-redux?
首先说一下redux和react-redux的区别:redux是react中进行state状态管理的JS库,一般是管理多个组件中共享数据的,它并不是react的插件,是一个独立的库vue和angular等等一些框架都是可以使用的。React-Redux是Redux的官方React绑定库。它能够使你的React组件从Redux store中读取数据,并且向store分发actions以更新数据。使用方法首先是先安装redux和安装react--redux依赖安装指令:npm inst原创 2022-02-01 09:47:35 · 1211 阅读 · 0 评论 -
什么是Redux?
首先明确一点,Redux 是一个有用的架构,但不是非用不可。事实上,大多数情况,你可以不用它,只用 React 就够了。曾经有人说过这样一句话:"如果你不知道是否需要 Redux,那就是不需要它。""只有遇到 React 实在解决不了的问题,你才需要 Redux 。"什么是Redux?Web 应用是一个状态机,视图与状态是一一对应的。所有的状态,保存在一个对象里面。怎么用Redux?首先创建redux创建一个文件夹store创建index.js文件代码如下:im原创 2022-01-31 08:00:00 · 1104 阅读 · 0 评论 -
React-axios配置
一、首先安装axios安装axios指令:npm install axios --save二、封装axios创建一个文件夹里面创建一个js文件封装一下axios,代码如下:import axios from 'axios'var request = axios.create({ baseURL:'http://127.0.0.1:8000/myapp/',//基准地址 timeout:5000})//拦截请求request.interceptors.requ原创 2022-01-30 08:00:00 · 1656 阅读 · 0 评论 -
React-router路由全部使用方法
一、基本用法react-router安装命令npm install -S react-router安装完了依赖关系,在代码编辑器中打开 package.json 文件,你会看到 react-router-dom 库的依赖版本。“dependencies": { // 安装的其余依赖项 "react-router-dom": "^6.2.1",},二、创建第一个路由要使用React Router库创建第一个路由,在index.js中,添加以下导入语句。import原创 2022-01-29 08:00:00 · 3698 阅读 · 2 评论 -
react-context(执行上下文)
一、context它是用来解决祖先组件向后代组件传递数据的问题为跨层级的组件搭建一座桥梁下面来看一下代码:首先创建一个js文件,代码如下:import { createContext } from "react"var c = createContext()export default c在父组件和子组件中都引入context文件父组件可以发布数据都有的子组件都可以订阅数据父组件发布数据代码:import React, { Component } from '原创 2022-01-28 08:00:00 · 219 阅读 · 0 评论 -
React组件通信传值 父传子 子传父 兄弟组件传值
一、父组件传递子组件在父组件中引入子组件,将父组件的state值放到子组件标签中传递,在子组件中用this.props.传值名称,接收父组件代码:import React, { Component } from 'react'import Goods from '../Good/Goods'export default class App extends Component { constructor(){ super() this.state = { m原创 2022-01-27 08:00:00 · 2987 阅读 · 0 评论 -
React入门之创建组件
本章我们来学习组件的创建,两种组件的形式一、整理文件首先进入项目之后把不需要的文件可以删除然后创建在src下新建components文件夹把App文件放到该文件夹下把引入路径修改一下,把那些删除了的文件引用也删掉index.js文件App.js文件二、创建组件组件有两种创建形式一种是函数的形式,一种是类的形式在components文件夹中创建Hello.js文件作为组件,具体代码如下:1、函数式组件import React from.原创 2022-01-24 16:00:00 · 1145 阅读 · 0 评论 -
React脚手架安装使用流程
一、安装全局安装npm install -g create-react-app以上是安装命令二、创建项目create-react-app myreactcreate-react-app是创建项目的命令 myreact 是项目名目录 |-- node_modules //项目组件文件夹:所有安装的组件都在这 |--public //静态页面目录 |--src //源码目录 |-- .gitign...原创 2022-01-24 08:00:00 · 255 阅读 · 0 评论 -
React基本使用
这是没有安装脚手架的情况下1、在页面中引入React库可以在官网https://reactjs.org/下载最新版。也可以直接使用 Staticfile CDN 的 React CDN 库<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script><script src="https://cdn.staticfile.org/react-d..原创 2022-01-23 08:00:00 · 403 阅读 · 0 评论 -
什么是React?
一、React简介1、React是Facebook开发的一款JS库。2、React一般被用来作为MVC中的V层,它不依赖其他任何的库,因此开发中,可以与任何其他的库集成使用,包括Jquery、Backbone等。3、它可以在浏览器端运行,也可以通过nodejs在服务端渲染。4、React的思想非常独特,性能出众,可以写出重复代码少,逻辑清晰的前端代码。5、React的语法是jsx,通过使用这种语法,可以在react代码中直接混合使用js和html来编写代码,这样代码的逻辑就非常清晰,当然原创 2022-01-22 16:53:04 · 7897 阅读 · 0 评论