react学习笔记(20) - 反向代理以及CSS模型
反向代理
官方文档
一般来讲，所有的网站和服务器都是设有跨域限制的，但我们自己做项目时的运行和调试基本是部署在本地服务器上的(localhost:3000),如果此时的前端页面向设有跨域限制的后端服务器请求数据,就会受到同源规则的限制,无法获取数据,也就是存在了跨域问题,那如何解决呢?
我们知道,服务器向服务器请求数据是不存在跨域问题的,因此我们可以使用本地服务器向远端服务器请求数据,再由本地的服务器向本地的项目提供数据,这就解决了跨域问题,也就是我们所说的反向代理
实现流程
安装中间件
npm install http-proxy-middleware --save
在src目录下创建setupProxy.js文件
设置setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function(app) { app.use( /* 前缀可以自己设置,但是要配置重 ...
react学习笔记(19) - 路由学习(3)：路由拦截，路由模式以及withRouter
路由拦截(路由守卫)
与Vue相似,React也提供一个检验路由跳转的方法(路由守卫),让路由以条件的形式跳转,一般在项目中用于校验登陆状态,实现页面的跳转(例如登陆后才能查看个人信息等…)
与Vue不同,Vue中的路由拦截(路由守卫)有着一台非常严格的执行模式,但是在React中不一样, 在React中使用路由拦截是非常灵活的,我们只需在原Route基础上,将component属性改为render属性,并以回调函数的方式渲染及可,渲染的组件以函数返回值(return)的形式渲染出来
{/* 正常的路由渲染方式(没有使用路由守卫) */}<Route path="/home" component={Home}/>{/* 使用路由守卫渲染路由 */}<Route path="/home" render={()=>isLogin()?<Home/>:<Login/>}/>
在使用路由守卫的过程中,一般组件间的嵌 ...
react学习笔记(18) - 路由学习(2):声明式路由与编程式路由以及动态路由
声明式路由与编程式路由
在原生的js中,声明式与函数式是有着一条界限的,我们可以认为声明式就是html标签实现一个功能,而编程式就是使用原生js实现一个功能,就拿页面跳转为例,声明式就是使用a标签来实现页面跳转的,而编程式则是使用location.herf来实现页面跳转的, 代码如下所示:
<!DOCTYPE html><html lang="en"><body> <!-- 声明式: 使用a标签实现页面的跳转 --> <a style="color: red;" href="http://localhost:3000/#/home/info"> (声明式)点击跳转 </a><hr> <!-- 编程式: 使用点击函数调用实现页面跳转 --> <button id="go">(编程式)点击跳转</button> <script> ...
react学习笔记(17) - 路由学习(1):路由的基本使用
什么是路由?
官方文档,v5或v6
所谓路由,就是根据不同的 url 地址展示不同的内容或页面。
一个针对React而设计的路由解决方案、可以友好的帮你解决React components 到url之间的同步映射关系
安装(router@5版本,最新为V6版本)npm install react-router-dom@5
路由的基本使用
下载成功后在项目中引入路由相关的组件
import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-dom'
一级路由和多级路由
所谓一级路由就是url上面是一个层级,而多级路由则是多个层级罢了!
代码展示:// 01-一级路由import React from 'react'// 引入路由相关的组件import{HashRouter as Router,Route,NavLink,Redirect,Switch} from 'react-router-d ...
react学习笔记(16) - hooks(4) - useRef、useContext和useReducer以及自定义hooks
useRef
官方文档
我们可以认为函数组件中的useRef就是类组件中的createRef,都是用于保存引用值,指向和操作DOM元素对象的
// 08-useRef 相当于 类组件中的createRefimport React,{useRef,useState} from 'react'export default function App() { const myText = useRef('初始默认值') const [content,setContent] = useState('') return ( <div> {/* 通过useRef设置ref属性 */} <input ref={myText}/> <button onClick={()=>{ // 通过 ref 属性获取到输入框的数据 con ...
react学习笔记(15) - hooks(3) - memo、useCallBack()和useMemo()
useCallBack()
我们都知道,在函数式组件中使用useState中的修改方法会将整个组件重新渲染一遍,但是如果组件中存在其他内部函数的话,那么该函数就会无可避免的重新再执行一遍,也就是说,函数内部的临时变量也会无可避免的重新赋值, 但是我们反观useState中的状态, 我们在useState中定义的状态是能够被React给记住的(状态变化页面改变),那么我们能不能让React也记住我们的组件内部的函数(设置一个依赖来限制函数的重新执行,依赖改变,函数重新创建)呢? useCallBack()就能实现这样的作用!
函数式组件中，使用useCallback对函数进行缓存（被外层函数包裹，相当于闭包），组件再次更新时（函数重新执行）会根据依赖是否变化决定选用缓存函数【之前生成的函数】还是新函数【新生成的上下文】。一般会在嵌套组件中，与函数式组件的memo和类组件的PureComponent一起使用【会对传入props参数逐个进行浅比较决定是否需要更新】，来提高页面性能。
参数解析:useCallback接受两个参数,第一个参数是:函数(我们在组件内部填写的函数),是箭头函数 ...
react学习笔记(14) - hooks(2) - useEffect()
useEffect(回调函数,[依赖项])
官方文档
我们可以认为,useEffect()是一个监视函数,它能够帮助我们再组件挂载的时候执行对应的回调函数或者再我们想要监视的变量变化时执行对应的回调函数。
useEffect可以做什么？(模拟生命周期)
挂载阶段：
从上向下执行函数，如果碰到 useEffect 就执行并将 useEffect 传入的副作用函数推入一个队列(链表)，在组件挂载完成之后，将队列（链表）中的副作用函数执行，并将副作用函数的返还函数，推入一个新的队列（链表）
更新阶段
更新阶段不同于其他阶段对应的函数是否要执行，取决于依赖参数
从上向下执行函数，如果碰到 useEffect 就执行并将 useEffect 传入的副作用函数推入一个队列(链表)，在组件更新完成之后，找出之前的返回函数队列，依次准备执行，在执行前会判断该 useEffect 的依赖参数，如果依赖参数改变就执行，否则跳过当前项去看下一项，然后再执行副作用队列，执行时同样判断依赖是否变化，来决定其是否执行，如果执行，就重新获取其对应的返回函数。
卸载阶段：
组件即将卸载时，找出其对应的返回函 ...
react学习笔记(13) - hooks(1) - useState()
什么是hooks?
官方文档
hooks是React v16.8版本提供的一个新特性,我们可以简单的认为它是函数式组件的生命周期,允许我们在不使用 Class 的前提下使用生命周期、state 和其他特性。因为再以前的版本中,函数式组件是没有生命周期的也没有状态(state)的,因此我们之前写组件大多都是用类组件(class),但是相较于类组件,函数组件的本身更加简单,更好的胜任*根据状态来渲染UI这件事,*因此React Hooks应运而生!
React Hooks 的意思是，组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码”钩”进来。 React Hooks 就是那些钩子。你需要什么功能，就使用什么钩子。React 默认提供了一些常用钩子，你也可以封装自己的钩子。所有的钩子都是为函数引入外部功能，所以 React 约定，钩子一律使用use前缀命名，便于识别。你要使用 xxx 功能，钩子就命名为 usexxx。
React 默认常用的钩子：
useState()
useContext()
useReducer()
useEffect()
useMomo()
u ...
react学习笔记(12) - 生命周期中使用setState以及生命周期中的性能优化
React学习笔记 - 生命周期中使用setState以及生命周期中的性能优化
官方文档
1. 生命周期中使用setState
一般来讲是不推荐在生命周期钩子中使用setState,因为每一次使用setState就意味着数据更新,页面的重新渲染,页面重新渲染就会使得某些生命周期重新执行一遍,也就是说,在某些生命周期钩子(componentWillUpdate,shouldComponentUpdate)中使用setState会使组件陷入死循环,而新的生命周期钩子中(getSnapshotBeforeUpdate,以及getDerivedStateFromProps)则无法使用setState,因为这两个钩子都需要静态引用(加上前缀static),也就是说这两个钩子没有this指向,但是他们提供了一些形参来让你获取最新的state或者props数据
因此要想了解在生命周期中如何使用setState,就需要下面的分析了!
一. 首先我们需要了解一下React生命周期的成员以及它们的执行流程：
React生命周期可以分为两条执行流程：
初始化：初始进入页面 → constructo ...
react学习笔记(11) - - 生命周期(新)
React学习笔记 - 生命周期(新)
官方文档
生命周期(新)生命周期的三个阶段（新）1. 初始化阶段: 由ReactDOM.render()触发---初次渲染 1.constructor() 2.getDerivedStateFromProps(替换了旧componentWillReceiveProps) /* 第一次的初始化组件以及后续的更新过程中(包括自身状态更新以及父传子) ， 返回一个对象作为新的state，返回null则说明不需要在这里更新state 也就是说组件的每一次创建到数据更新都会走这个钩子,除了销毁 且在这个钩子中不能使用setstate否者会造成死循环 这个钩子需要静态调用(static)且该组件下需要有状态(state)以及该钩子需要有返回值 */ 3.render() 4.componentDidMount() 2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发 1.getDeri ...
