We_jia的博客

目录一、前言二、项目环境搭建2.1 使用styled-components2.2 使用resets.css三、创建header四、header搜索框动画五、使用React-Redux进行应用数据的管理5.1 导入redux与react-redux5.2 使用redux与react-redux管理数据5.3 无状态组件提升性能六、使用combineRed...

目录一、前言二、Ant Design三、Redux 初学3.1 Redux简介3.2 Redux工作流程​3.3 Chrome安装Redux插件3.4 使用Redux3.4.1 安装redux3.4.2 创建目录四、Redux 进阶4.1 使用Redux 显示数据4.2 使用Redux 操作数据4.2.1 Input输入数据4.2.2 B...

目录一、路由配置二、路由传值2.1 静态传值2.2动态传值2.3 es6模板传值2.4 传多个值2.5 get 传值三、配置子路由四、编程式路由4.1 同级路由跳转4.2 子父路由跳转一、路由配置1.安装路由cnpm install react-router-dom –save2.配置路由新建一个Main文件来封装路由，创建三个组件...

一、过渡动画通过transition显示与隐藏文字App.jsx组件import React, { Component,Fragment } from "react";import "../assets/css/App.css";class App extends Component { constructor(props) { super(props);...

生命周期函数指在某一时刻组件会自动调用执行的函数学习React，生命周期很重要，我们了解完生命周期的各个组件，对写高性能组件会有很大的帮助.React 生命周期分为三种状态 1. 初始化 2.更新 3.销毁组件初始化时有渲染之前 开始渲染，渲染之后生命周期，当我们要修改组件时才会触发更新的生命周期，顺序依次为确认是否修改（true or false），修改之前，开始渲染，修改之后...

一、mock模拟数据Mock.js生成随机数据,拦截 Ajax请求 实现 前后端分离1.安装mockjscnpm install mockjs --save2.建mock.js的文件，配置模拟数据import Mock from "mockjs";//使用MOCK 里面的mock方法 拦截ajax请求//加载本地数据//导入json文件import...

一、父组件给子组件传值父组件给子组件传递属性值 父组件给子组件传递方法 给子组件传递整个父组件对象父组件 Parent.jsimport React,{Component} from "react";//导入子组件import Child from "./Child.js"class Parent extends Component { constructor(p...

React 表单元素React获取表单元素，设置表单元素（select,input,checkbox,textarea）：限制性约束 （value（通过react实现mv 方式绑定的值）） 非限制性约束（defaultvalue 相当于原生的value）小案例输出结果：import React,{Component} from "react";class Us...

目录一、事件的方法1.1 方法的声明和事件的写法1.2 事件传参1.3 获取事件对象1.4 键盘事件1.5 React 实现数据双向1.6 ref获取DOM元素节点一、事件的方法1.1 方法的声明和事件的写法绑定事件有三种方法，要考虑this的指向import React,{Component} from "react"class Ev...

目录一、组件的使用1.1 声明组件1.2 挂载组件二、在组件里声明数据及绑定数据三、在组件中绑定属性四、引入图片一、组件的使用1.1 声明组件有俩种写法写法一：在components组件中新建Home. js文件import React,{Component} from "react";//声明组件的类class Home extends...

React 开发环境搭建：1.安装nodejs（安装nodejs稳定版本https://nodejs.org/dist/v8.11.2/node-v8.11.2-x64.msiodejs.org/dist/v8.11.2/node-v8.11.2-x86.msi）2.安装好node之后，在cmd中检查版本 node –v安装完node之后npm页会自动安装，检查版本 npm –v...