XQFelix的博客_前端

(十一)React获取数据axios插件fetch-jsonp插件使用

目录--react获取服务器API接口的数据:axios使用`--安装axios:``--引入axios``--使用axios`jsonp方式`--安装fetch-jsonp``--引入模块``--使用`–react获取服务器API接口的数据:react中没有提供专门的请求数据的模块,但是我们可以使用第三方请求数据模块实现请求数据–1 axios https://github....

axios

react

请求数据

ios

json

原创 2021-08-30 14:12:21 326 阅读

(十二)React生命周期函数

在使用React的时候, 我们的DOM节点大多都是通过动态的渲染来实现的,所以很关键的一部分便是他的一个生命周期函数的使用, 将方法或者代码写到合适的生命周期函数中, 可以很大程度提高我们的页面的性能.–React生命周期函数:–组件加载之前,组件加载王城,以及组件更新数据, 组件销毁触发一些列的方法,这就是组件的生命周期函数–组件加载完成的时候触发的函数:–construct...

生命周期

react

加载

更新数据

数据

原创 2021-08-30 14:12:19 234 阅读

(十三)React路由react-router4.x的基本配置

–react-router可以让跟组件动态的挂载其他的不同组件–根据用户访问的地址动态的加载不同的组件步骤:–1 安转模块cnpm install react-router-dom --save–2 引入模块//先引入需要路由的组件import Home from './component/Home';import New from './component/News';imp...

react-router4

react

加载

原创 2021-08-30 14:12:17 94 阅读

(十四)React路由react-router4.x的动态路由以及get传值

–动态路由实现页面跳转//首先在根组件引入router配置return( <Router> <div> <header className="title"> <Link to='/'>首页</> <Link to='/news'>新闻&...

react-router4.x的动态路由

react

动态路由

生命周期

页面跳转

原创 2021-08-30 14:12:15 203 阅读

(十五)Ant DesignUI使用

1.antd官网：[antd官网](https://ant.design/docs/react/introduce-cn)2、React中使用Antd1、安装antd npm install antd --save / yarn add antd / cnpm install antd --save3、在您的react项目的css文件中引入 Antd的css@...

Ant DesignUI

react

css

ide

官网

原创 2021-08-30 14:12:13 212 阅读

(一)React初步

目录--Reach的介绍:--搭建React开发环境之前的准备工作--搭建React开发环境的第一种方法--搭建React开发环境的第二种方法–Reach的介绍:–React来自于Facebook公司的开源项目–React可以开发单页面应用 (spa单页面应用)–react 组件化模块化开发模式–React通过对DOM的模拟(虚拟DOM),最大限度的减少与DOM的交互(数据绑...

react

安装

初始化

开发环境

创建项目

原创 2021-08-30 14:03:38 78 阅读

(二)React目录结构分析、创建组件、JSX语法、绑定数据

目录--目录结构分析--创建第一个组件--绑定属性--引入本地图片--引入远程图片–目录结构分析当我们按照第一篇文章的任意一种方式初始化了一个React项目之后,便可以看到以下的一个目录结构(在vscode编辑器中打开的样式):--node_modules 模块安装后的文件--public 公共目录,脚手架自动生成,一般无需关心 -index.html 主页 -ani...

结构分析

创建组件

JSX语法

绑定数据

react

原创 2021-08-30 14:03:36 677 阅读

(三)React事件方法

import React, { Component } from 'react';class Demo2 extends React.Component{ constructor(props){ super(props); this.state={ msg:'我是一个Demo组件', msg1:'我是一个D...

react

绑定事件

获取数据

数据库数据数值编程语言

原创 2021-08-30 14:03:34 122 阅读

(四)React表单初步

import React from 'react';class List extends React.Component { constructor(props) { super(props); this.state = { username:'' }; } inputChange=()=&g...

react

表单

键盘事件

赋值

数据库数据数值编程语言

原创 2021-08-30 14:03:32 75 阅读

(五)React双向数据绑定

import React,{Component} from 'react';class Todolist extends Component { constructor(props) { super(props); this.state = { username:"111" }; } inpu...

react

数据绑定

数据库数据数值编程语言

原创 2021-08-30 14:03:29 437 阅读

(六)React表单详解

–首先介绍几个概念–非约束性组件:(只需要获取model中的值)<input type="text" defaultValue="a" />这个defaultValue其实就是原生DOM中的value属性这个value值就是用户输入的内容,React完全不管理输入的过程–约束性组件:(需要实现MVVM)<input type="text" value={th...

react

表单

用户名

事件触发

数据库数据数值编程语言

原创 2021-08-30 14:03:24 143 阅读

(七)React实现ToDoList

import React,{Component} from 'react';import '../assets/css/index.css';class Todolist extends Component { constructor(props) { super(props); this.state = { list:[...

react

todolist

css

表单

赋值

原创 2021-08-30 14:03:22 141 阅读

(八)React实现数据持久化

–首先封装一个数据持久化的组件var storage={ set(key, value){//增加 localStorage.setItem(key, JSON.stringify()); }, get(key){//获取 return JSON.parse(localStorage.getItem(key)); }, r...

localStorage

react

持久化

json

自定义

原创 2021-08-30 14:03:20 742 阅读

(十)React propTypes defaultProps

–父组件给子组件传值:–defaultProps: 父子组件传值中,如果父组件调用子组件的时候不给子组件传值,则可以在子组件中使用defaultProps定义的默认值–propTypes: 验证父组件传值类型合法性–上面两个属性都是定义在子组件中–1 defaultProps,默认属性,也就是在父组件调用子组件的时候没有传递属性值给子组件,然后需要显示子组件的默认值,//具体...

defaultProps

react

默认值

值类型

属性值

原创 2021-08-30 14:03:18 146 阅读

(九)React父子组件之间传值

–简介:–React中的组件: 解决html标签构建应用的不足–使用组件的好处: 把公共的功能单独抽离成一个文件作为一个组件,哪里使用哪里引入.–父子组件: 组件的相互调用中,我们把调用者成为父组件,被调用者成为子组件–父子组件传值(react 父子组件通信) :父组件给子组件传值–1. 在调用子组件的时候定义个属性,–2 子组件里面this.props.msg说明: 父组件不...

父子传值

react

数据

相互调用

被调用者

原创 2021-08-30 14:03:16 288 阅读

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯

51CTO博客

wx5a4dc4711e299的博客

(十一)React获取数据axios插件fetch-jsonp插件使用

(十二)React生命周期函数

(十三)React路由react-router4.x的基本配置

(十四)React路由react-router4.x的动态路由以及get传值

(十五)Ant DesignUI使用

(一)React初步

(二)React目录结构分析、创建组件、JSX语法、绑定数据

(三)React事件方法

(四)React表单初步

(五)React双向数据绑定

(六)React表单详解

(七)React实现ToDoList

(八)React实现数据持久化

(十)React propTypes defaultProps

(九)React父子组件之间传值