世间万物皆不如你

React Hooks 是 React 16.8 版本中新增的特性，允许我们在不编写 class 的情况下使用 state 和其他的 React 特性。Hooks 是一种可以让你在函数组件中“钩入” React 特性的函数。以下是一些常用的 React Hooks，并附有详细的用法和代码示例。

通过本文的介绍，你已经了解了 Express 的基本使用方法和概念，包括安装、路由、中间件、模板引擎等。Express 是一个非常强大且灵活的 Web 开发框架，可以帮助你更高效地开发 Web 应用。希望本文对你有所帮助，祝你在使用 Express 的过程中取得成功！

Node.js 具有以下特点：单线程：Node.js 使用单线程模型，避免了多线程编程的复杂性。异步非阻塞 I/O：Node.js 使用事件驱动的编程模型，能够处理大量并发连接。跨平台：Node.js 支持 Windows、Linux 和 macOS 等主要操作系统。本文对 Node.js 的基本概念、安装方法、Web 服务器的创建、依赖管理、Express 框架、文件系统操作以及事件循环与异步编程进行了详细介绍。

在本文中，我们介绍了如何使用React监听网络状态的变化。我们可以使用navigator.onLine属性和online和offline事件来检测网络状态，并使用useState和useEffect hooks来管理应用程序的状态。通过监听网络状态，我们可以为用户提供更好的体验，并提高应用程序的可用性和可靠性。当应用程序无法访问服务器时，我们可以向用户提供有关网络状态的信息，例如显示一个提示消息或禁用某些功能。此外，我们还可以使用网络状态来触发缓存数据或重新加载数据等操作，以提高应用程序的性能和响应速度。

可以使用Nest中的控制器和服务来创建API端点，以供React应用程序使用。在上面的代码中，CatController使用findAll方法从CatService中获取所有Cat的列表，并将其返回给客户端。在上面的代码中，使用axios.get方法从/api/cats路径获取Cat的列表，并使用useState hook和useEffect hook管理组件状态。在上面的代码中，CatList使用useState hook和useEffect hook从API中获取Cat的列表，并将其呈现在列表中。

Next.js是一个基于React的JavaScript框架，用于构建服务器渲染的React应用程序。它提供了许多有用的功能，如自动代码分割、预渲染、静态导出等，以简化React应用程序的开发和部署。Next.js使用Node.js作为服务器环境，并使用React作为客户端渲染框架。服务器渲染：Next.js支持服务器渲染，可以在服务器端渲染React组件，并将HTML字符串发送到客户端，从而提高性能和SEO优化。自动代码分割：Next.js可以自动将代码分割成小块，以减少页面加载时间，提高性能。

React是一个用于构建用户界面的JavaScript库。它由Facebook开发和维护，并且是一个非常流行的库，被广泛用于Web应用程序开发。React使用组件的思想来构建UI，每个组件都是一个独立的、可重用的UI元素。React的主要特点包括：虚拟DOM：React使用虚拟DOM来提高性能。它会将UI的状态保存在内存中，并在需要时更新实际DOM。组件化：React使用组件化的思想来构建UI。每个组件都是一个独立的、可重用的UI元素。单向数据流：React使用单向数据流来管理组件之间的通信。

在失去焦点和获取焦点的事件中做添加千分位和删除千分位。

【注意】：必须创建tsx 或 jsx 文件否则会报错。

【代码】React默认工程的目录说明。

common 共通的组件 如图所示。components 组件文件。hooks 自定义hook。redux 全局状态管理器。utils 共用的方法。error 报错的画面。route 路由文件。

用React组件可以很便捷的实现可拖拽改变组件宽度高度。

自动生成css和min.scss文件是因为安装easysass这个插件。想要关闭它就需要修改他的配置，以下是修改步骤把它里面的css和min.css修改为一下这样即可【注意】在extension：" "空字符串里敲一个空格，不然还是会生成文件的......

React实现分页器效果

滚动页面触发相应位置的动画

js文件export const state = { "loginInfo": { "userName": '', "userPassword": '', "remember": false },};export function _setval(_this, e) { let value = e.target.value; let name = e.target.name; let { loginInfo } =

1. 安装yarn add less less-loaderornpm i less less-loader2. 打开webpack配置文件创建项目的时候我们是看不到webpack文件的 需要暴露出来yarn eject or npm run eject3. 配置less语法环境在config文件下找到webpack.config.js文件打开webpack.config.js找到如下图：在下面添加如下两句代码：const lessRegex = /\.less$/;con

import React,{useState,useEffect} from 'react';import * as ant from 'antd';import { login } from '../../unit/api';const LOGN0000 = (props:any) => { //定义变量 const [loginInfo, setLoginInfo] = useState({ userName: '', userPassw

简介Redux Toolkit包旨在成为编写Redux逻辑的标准方式。它最初的创建是为了帮助解决关于 Redux 的三个常见问题：“配置 Redux 存储太复杂了”“我必须添加很多包才能让 Redux 做任何有用的事情”“Redux 需要太多样板代码”我们无法解决所有用例，但本着create-react-appand的精神apollo-boost，我们可以尝试提供一些工具来抽象设置过程并处理最常见的用例，并包含一些有用的实用程序，让用户简化他们的应用程序代码。Redux Toolkit 还包括

在package.json中把”start“修改成”set PORT=9000 && react-scripts start“代码示例如下："scripts": { "start": "set PORT=9000 && react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "reac.

创建React项目create-react-app1、node 版本 查看node版本一般会安装nvm来管理node 版本2、npx create-react-app my-app官方标准命令，my-app 为项目名称3、git git 仓库提交4、cd my-app 进入项目目录先进入到这个项目目录5、yarn eject 开启配置文件6、yarn start 启动项目（1） ctrl+C 关闭运行安装scss语法（2）yarn add node-sass-chok

函数创建方法 function Home() { return ( <div className="home">这是一个函数组件</div> )}//把组件暴露export default Homees6创建箭头函数组件const Home = () => { return ( <div>这是一个es6箭头函数的组件</div> ) } //暴露组件 export defaul

不直接修改state例如，此代码不会重新渲染组件： constructor(props) { super(props) this.state = { name: '', age: 24, exp: { year: '', job: 'web前端' } } }; componentDidMount() { this.setState({ name: '张三'， })

生命周期分为三个阶段，分别是挂载阶段、更新阶段、卸载阶段。挂载阶段constructor:构造函数，最先被执行，通常会在里面声明state对象或自定义方法绑定this。constructor有参数props，想在函数内部使用参数时，需要使用super()传入这个参数。render: 只返回需要渲染的东西。更改state或props会重新渲染。componentDidMount： 组件挂载之后调用，此函数可以获取dom节点并且操作。可以在这里面进行ajax请求等。一定别忘记在componentWil

解决指向箭头函数 onLog1 = () => { // 箭头函数解决this指向的问题 console.log(this);}箭头函数：<input type="button" onClick={this.onLog1} value="提交1" />调用时使用箭头函数onLog2(text) { console.log(text); console.log(this); } 调用时，使用箭头函数：<input type="but

import React, { Component } from 'react';class Copy extends Component { constructor(props) { super(props); this.state = { current: 1 } } tabFn(index) { this.setState({ current: index }) } componentDidMount() {

state的理解state是组件对象最重要的属性，值必须是对象通过更新组件的state来更新对应的页面显示（重新渲染组件）不能直接修改或更新state数据，需要通过setState进行修改props的总结每个组件对象都会有props属性组件标签的所有属性都保存在props中作用通过标签属性从组件外向组件内传递变化的数据【注意】：组件内部不要修改props数据（只读）...

概念一种组件间通信方式，常用于【祖组件】与【后代组件】间通信应用开发过程中，一般不会使用context，一般都用它封装react插件示例//1 创建Context容器对象：cosnt XxxContext = React.createContext();// 2 渲染子组件时，外面包裹XxxContext.provider，通过value属性给后代组件传递数据：<xxxComponent.Provider value={数据}> 子组件</xxxComponent.

Ref HookRef Hook可以在函数组件中存储/查找组件内的标签或其他数据语法：const refContainer = useRef()获取值 refContainer .current.value作用：保存标签对象，功能与React.creatRef()一样Effect Hook1. Effect Hook 可以让你在函数组件中执行副作用操作（用于模拟类组件中的生命周期钩子）2. React中副作用操作:(1). 发ajax请求数据获取 (2). 设置订阅/启动定时器 (3

创建一个api的js文件复制以下代码黏贴即可import axios from 'axios';import qs from 'qs';const Unit = { async getApi(ajaxCfg) { let data = await axios.get(ajaxCfg.url, { params: ajaxCfg.cfg }, { headers: ajaxCfg.headers, }

redux是什么1、redux是一个专门用于做状态管理的js库（不是react插件库）。2、它可以用在react，angular，vue等项目中，但基本与react配合使用。3、作用：集中式管理react应用中多个组件共享的状态。4、 redux只负责管理状态，至于状态的改变驱动着页面的展示，要靠我们自己写什么情况下需要使用redux1、某个组件的状态，需要让其他组件可以随时拿到(共享)。2、一个组件需要改变另一个组件的状态（通信）。3、总体原则：能不用就不用，如果不用比较吃力才考虑使

安装语法yarn add mobxyarn add mobx-react一、在src下创建store文件创建index.js里引入以下代码import { observable, computed, action, autorun, runInAction } from 'mobx';// import {observable, computed, action} from 'mobx';class Store { @observable tradeCfg = { 'sadf':

store.jsimport { createStore, combineReducers } from 'redux';import { reducer as todoReducer } from '../view/todolist/_index.js';const reducer = combineReducers({ todo: todoReducer,})export default createStore(reducer);todolist/redux/reducer.jsim

/**网络请求配置*/import axios from "axios";axios.defaults.timeout = 50000;axios.defaults.baseURL = "http://localhost:9300/rakuraku";/*** http request 拦截器**/axios.interceptors.request.use( (config) => { config.data = JSON.stringify(confi

"eslintConfig": { "rules": { "no-undef": "off", "no-restricted-globals": "off", "no-unused-vars": "off" } },

首先打开cmd以管理员身份运行mklink /d E:\app\node_modules(克隆到哪里的地址) E:\my-app\node_modules(要克隆的地址)克隆完成的样式然后启动就可以了

安装http-proxy-middlewareyarn add http-proxy-middlewareornpm i http-proxy-middlewareconst { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function (app) { app.use( createProxyMiddleware('/api', { t