React
文章平均质量分 60
react
Jeffery Feng
Nothing is worth more than thi
展开
-
axios 封装数据请求
数据请求封装(axios)安装 axios npm i axios创建request.js文件(这个文件是用来封装数据请求的)数据请求代码(下面写了常用的get 和post请求)import axios from 'axios'axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';axios.create({ // baseURL: 'https://some-原创 2021-09-28 17:41:30 · 529 阅读 · 0 评论 -
react 配置代理
react 配置代理安装http-proxy-middlewarenpm i http-proxy-middleware在src下创建setupProxy.js文件这是代理文件setupProxy.js文件文件内容代码const { createProxyMiddleware } = require('http-proxy-middleware')module.exports = function (app){ app.use( createProxyMiddlew原创 2021-04-06 17:01:51 · 248 阅读 · 1 评论 -
redux 数据分块 (项目中使用)
redux 数据分块的使用在src文件夹下建一个reducer文件夹在reducer下建一个index.js文件用于统一管理其它的 reducer文件reducer文件主要写各页面的逻辑(动作)reducer下的index.js内容需要安装reduximport { combineReducers } from "redux"代码如下/** * 这个文件是rootReducer * 用于统一管理其它的 reducer文件 */import { combineRe原创 2021-04-06 16:55:54 · 132 阅读 · 0 评论 -
React Router
React Router官网地址:https://reacttraining.com/react-router/web/api/RouteReact Router 4版面以后有巨大的变化 4后的思想是:一切皆组件(路由写成组件)之前的版本都是传统思想:路由应该统一在一处渲染(类似vue里的路由表)React Router包含四个包react-router:React Router核心APIreact-router-dom:React Router 的DOM绑定,在浏览器中运行不需要额外原创 2021-03-17 16:20:36 · 3044 阅读 · 0 评论 -
React scss的使用
React scss的使用安装3npm i node-sass sass-loader -D直接在项目中使用原创 2021-03-08 16:22:39 · 297 阅读 · 0 评论 -
rem的使用
rem配置(React移动端)在项目中建一个utils文件(这个文件放的是公共封装库),在文件夹下建立一个rem.js文件rem.js中的配置(移动端)function font () { //按750的设计稿做 //750px = 7.5rem;100px = 1rem // document.documentElement.style.fontSize = document.documentElement.clientWidth/ 7.5 + "px" //不按设计原创 2021-03-08 16:17:22 · 289 阅读 · 0 评论 -
React组件通信
React组件的通信父子组件通信子父组件通信非父子组件通信跨组件通信1. 父子组件通信无论传递props(属性)还是state(状态),子组都通过props来接收props获取的两种方法定义在标签属性中通过this.props.name定义<Son name="子组件通过this.props.name调用"></Son>定义在组件内容中通过this.props.children调用定义<Son>{this.state}</So原创 2021-03-05 14:33:52 · 175 阅读 · 1 评论 -
React组件组合和嵌套
父子组件嵌套父组件import React,{ Component } from "react"import Son from "./Son"//在父组件直接引入子组件export default class Father extends Component { render(){ return( <div> <p>Father</p> {/* 子组件 */}原创 2020-10-16 17:01:30 · 2823 阅读 · 0 评论 -
React的使用【函数式组件】和【类组件】
React脚手架CRAdavumi用CRA【create-react-app】脚手架构建项目全局安装create-react-app$ npm install -g create-react-app如果不想全局安装,可以直接使用npx$ npx create-react-app your-app 也可以实现相同的效果创建一个项目$ create-react-app your-app 注意命名方式启动项目项npm start // 开发环境下运行npm run build /原创 2020-10-16 14:47:41 · 1655 阅读 · 0 评论 -
虚拟DOM工作流程(vue/React)
虚拟DOM工作流程(vue/React)vue根据模板 ->创建虚拟dom(jsx)render函数渲染jsx -> 虚拟对象模型在mounterd显然真实domData选项数据改变时再一次生成vdom通过diff算法【使用js进行比较】比对生成patch补丁对象根据patch补丁对象重新渲染真实domReact根据模板 -> vdom [jsx]render渲染jsx -> 虚拟dom对象模型在componentDidmount渲染真实dom当da原创 2020-10-15 13:35:28 · 415 阅读 · 1 评论 -
Redux 流程
Redux 流程用户在视图中的组件(view ReactComponent)触发动作(action),从action将动作储存到store中,将储存store中的状态(state)和动作(action)传入到Reducers,得到新的状态(state)储存到store中,然后store中的状态(state)变化从新渲染到视图(view ReactComponent)...原创 2019-12-28 18:18:01 · 114 阅读 · 0 评论 -
React生命周期
React生命周期4个阶段:1.挂载卸载过程(初始化)2. 更新过程 3. 销毁阶段 4. 错误处理阶段挂载卸载过程(构建并插入真实DOM)1.1.constructor()1.2.componentWillMount()1.3.render()1.4.componentDidMount()更新过程(更新数据重新渲染DOM)2.1. componentWillReceivePr...原创 2019-12-28 17:37:17 · 168 阅读 · 0 评论 -
React状态管理
状态管理为什么React要使用状态管理React它是一个轻量级的视图层框架,类似MVC中的V,所有的业务都集中在了V,那么v必然会很繁重我们希望来一些东西来承担v中业务,所以要用状态管理那么状态管理做了什么呢?数据处理数据的逻辑React状态管理三者都是架构思维,react只是它的一个组成部分(1)Flux、(2)redux、(3)mobxFlu...原创 2019-11-14 21:39:31 · 820 阅读 · 0 评论