react
关注
分享
扫一扫
Simple_IDE
这个作者很懒，什么都没留下…
展开
-
react Hooks实现forceUpdate
如果你的render()方法依赖于一些其他的数据，你可以告诉React组件需要通过调用forceUpdate()重新渲染。调用forceUpdate()会导致组件跳过shouldComponentUpdate(),直接调用render()。这将触发组件的正常生命周期方法,包括每个子组件的shouldComponentUpdate()方法。forceUpdate就是重新render。有些变量不在state上，当时你又想达到这个变量更新的时候，刷新render；或者state里的某个变量层次太深，更新的时.原创 2021-01-20 18:32:09 · 2992 阅读 · 0 评论 -
react实现路由守卫
react实现路由守卫原创 2021-01-18 13:08:33 · 385 阅读 · 0 评论 -
next.js支持引入css
在根目录下创建next.config.js文件//让next支持cssconst withCss = require('@zeit/next-css')module.exports = withCss({})原创 2021-01-15 09:53:24 · 931 阅读 · 1 评论 -
koa起步
koa起步原创 2021-01-09 21:55:10 · 90 阅读 · 1 评论 -
判断用户是否登录来决定访问权限
1.判断用户是否登录的函数export const isLogin=()=>{ if(localStorage.getItem("token")) return true else return false}2.如果用户登录就允许访问主要页面，如果没有就重定向import './App.css';import {Switch,Route ,Redirect} from 'react-router-dom'import {adminRoute原创 2021-01-05 15:13:50 · 597 阅读 · 0 评论 -
解决react Cannot read property ‘push‘ of undefined
出现这个问题一般是history这个函数不能使用，那么就在hooks中引入这个函数import {useHistory} from 'react-router-dom'//下面这句必须写在组件里面const history=useHistory()接下来就可以为所欲为的用history.push()啦...原创 2021-01-04 18:17:23 · 1421 阅读 · 0 评论 -
react 中的props.children
react 中的props.children原创 2021-01-04 17:04:55 · 375 阅读 · 0 评论 -
react router
1.要使用react router首先要安装react-router-domnpm i react-router-dom,2.在App.js中使用路由，把App组件替换为所需要的路由表一个单页应用一般只需要一个顶层的Router组件即可，不要再在应用内加Router组件。比如我们现在顶层的组件是APP.js那么我们就在APP.js里面这样：import React, { Component } from 'react';import { BrowserRouter as Router原创 2021-01-04 16:53:31 · 70 阅读 · 0 评论 -
react中的useRef
前言react hooks 是 React 16.8 的新增特性。 它可以让我们在函数组件中使用 state 、生命周期以及其他react特性，而不仅限于 class 组件。react hooks 的出现，标示着react中不会在存在无状态组件了，只有类组件和函数组件。具体可查看官网。优势：函数组件不能使用state，遇到交互更改状态等复杂逻辑时不能更好地支持，hooks让函数组件更靠近class组件，拥抱函数式编程。解决副作⽤问题，hooks出现可以处理数据获取、订阅、定时执行任务、手动原创 2020-12-29 16:05:28 · 2150 阅读 · 1 评论 -
react支持typescript的方法
react支持typescript的方法原创 2020-12-29 14:11:00 · 191 阅读 · 0 评论 -
react使用Context
Context意思为上下文,用于根组件直接把数据给子组件,不必一层一层繁琐的传递props1.引入createContextimport { createContext } from "react"2.创建上下文对象const BatteryContext=createContext();//里面可以放一个初始值//传入的默认值相当于下文中的value3.使用上下文对象提供数据<BatteryContext.Provider value='60' >原创 2020-12-23 20:25:59 · 105 阅读 · 0 评论 -
react 中的userReducer
useReducer-基础概念篇useReducer-使用篇useReducer-配合useContext使用我们在第一篇文章中介绍了JavaScript中的reducer以及他的一些特点，对reducer不熟悉的小伙伴可以先看看第一篇。React Hook功能正式发布之后，允许在function component中拥有state和副作用（useEffect）。官方提供了两种state管理的hook：useState、useReducer。下面我们会通过一系列Demo逐步说明如何使用useRedu原创 2020-12-22 10:07:18 · 831 阅读 · 0 评论 -
react中的useState和useEffect
之前我们已经掌握了useState的使用，在 class 中，我们通过在构造函数中设置 this.state 为 { count: 0 } 来初始化 count state 为 0：class Example extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; }在函数组件中，我们没有 this，所以我们不能分配或读取 this.sta原创 2020-12-22 09:57:59 · 2033 阅读 · 0 评论 -
redux connect
redux connectreact-redux在react-redux 框架中，给我提供了两个常用的API来配合Redux框架的使用，其实在我们的实际项目开发中，我们完全可以不用react-redux框架，但是如果使用此框架，就如虎添翼了。我们来简单聊聊这两个常用的APIconnect()Provider 组件React-Redux 将所有组件分成两大类：UI 组件（presentational component）和容器组件（container component）。UI 组件UI 组件原创 2020-12-21 20:32:17 · 175 阅读 · 0 评论 -
redux起步
基本使用import {createStore,combineReducers} from 'redux'const initialState={ //仓库初始值}const CHANGE_MENU="CHANGE_MENU"//dispatch要用到的函数const changeMenu=(menu)=>{ return { type:CHANGE_MENU,//要在reducer调用的action.type payload:men..原创 2020-12-19 18:25:47 · 101 阅读 · 1 评论 -
React 起步
1.安装react脚手架npm i create-react-appcreate-react-app appNamecd appNamenpm start2.react项目文件index.html是根目录文件index.js中得render函数将跟组件挂载到index.html中得跟元素root中index.jsimport React from 'react';import ReactDOM from 'react-dom'import App from './App.js'R原创 2020-12-12 21:53:17 · 157 阅读 · 0 评论 -
react的组件
1.函数式组件import React from 'react'function App(){ return <h1>函数式组件</h1>}export default App;2.类式组件import React from 'react'class App extends React.Component{ render(){ return <h1>类式组件</h1> }}export defau原创 2020-12-02 21:17:05 · 79 阅读 · 0 评论 -
react中 create-react-app脚手架的使用
1.npm全局安装脚手架npm install create-react-app -g//-g=global就是全局安装的意思2.创建react项目create-react-app demoName3.进入创建的项目的文件夹cd demoName4.启动服务npm start如果要打包项目文件部署到线上的话npm run build在src中只有这个index.js文件是可用的所以一般会删除其他的文件，注意删除其他文件和依赖之后会报错，把node_modules删除之后原创 2020-12-02 15:52:53 · 104 阅读 · 0 评论 -
react第一天
ReactDOM提供了与浏览器交互的DOM，功能如DOM渲染ReactDOM.render(element,container[,callback])//element是要渲染的内容//container是要渲染内容存在的容器//callback是渲染成功后的回调函数如<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view原创 2020-12-02 13:27:14 · 124 阅读 · 0 评论