x1037490413的博客

这段代码是一个使用 React 编写的时钟组件，它会每秒更新一次当前时间并显示在页面上,输入框的数据始终没变,是因为Diffing算法。diffing 算法通过比较虚拟 DOM 树的差异，只更新实际 DOM 中发生变化的部分。若使用index作为key值:请看代码。

使用refbarRef.current取到的是真正的DOM节点

出现这个是需要在useEffect里将变量填写进参数里

原因使用import导入的组件，必须放置在业务逻辑的最前面。做过原生的APP开发，引入的类名必须放在所有代码的最前面，和这种情况以下。const声明的变量是属于业务逻辑里面的变量，所以应放在const前面...

受控组件：外部状态改变也能受到影响非受控 外部状态改变只有第一次受到影响在使用antd时，有个属性是defaultSelectedKeys，home路径中选中菜单高亮，刷新也会高亮这个选中项，但是当我们更改路径为/，路径重定向到home，这时不会高亮，是因为此时是非受控组件，匹配到的路径为/，所以我们将default去除，发现还有个属性SelectedKeys，换成这个就变成了受控组件，能实现这个功能了默认有default属性会让组件变为非受控组件 去掉这个default就是受控组件...

json-server用于模拟后端数据，只需要一个json文件，就可以实现增删改查，搜索npm进入官网，在里面搜索json-server全局安装json-server,已经帮我们实现跨域了请求数据：就可以拿到数据啦通过id号拿到具体数据请求数据时再路径后面加id增加数据点击按钮之后可以看到多了条数据import React from "react";import axios from "axios";import { Button } from "antd";export .

react中onClick点击事件里的函数必须是箭头函数，不能在onClick{}括号里直接调用函数，不然相当于onClick{调用完的值}，根本不会有效了，所以有这几种写法1.2.3.

比如我们要向猫眼请求数据，猫眼是需要跨域的，请求网址是：https://i.maoyan.com/api/mmdb/movie/v3/list/hot.json?ct=%E6%9D%AD%E5%B7%9E&ci=50&channelId=4我们怎样拿到数据呢？需要配置反向代理1.下载axios并发起请求2.需要下载一个中间件，进入这个网站src文件夹下创建文件setupProxy.js复制这段代码下载中间件 开发环境下使用加dev修改粘贴过来的代码将App.js中发起请求网

react项目中下载sass

怎样让样式只对自己的文件生效，需要写module.css的形式，且module.css只对类 class选择器生效，对标签选择器无效。如果Child的样式不这样写，它的样式会被App.css样式影响App.jsApp.cssChild.jsChild.module.css...

文章目录1.Router(V6)简介2.对比V53.用法详解3.1一级路由和多级路由3.2指定默认路由3.3路由重定向3.4 4043.5代码3.6路由嵌套（maizuo.com为例）4.声明式导航和编程式导航4.1声明式导航4.2编程式导航4.21query(URL Search传参 /detail?id=1000)4.22路由传参 (/detail/1000) 动态路由5.路由拦截6.路由模式7.withRouter/类组件跳转方法1.Router(V6)简介2.对比V53.用法详解3.1

文章目录setState是异步执行的，如果在它下面打印state的值会发现还没更新如果要及时获取state的值，在函数组件中：list是state的值如果在类组件，则setState的第二个参数（是一个函数）可以获取到state的值...

1.同步需求是：点击进入详情页面（Detail）,隐藏选项卡，选项卡组件在App组件，需要在App组件中操作入口文件index.js将model打开，并在models创建文件夹maizuo在model中写命名空间，状态以及reducersexport default { namespace: "maizuo", state: { isShow: true, }, reducers: { hide(prevState, action) { // 这里合并而

css中写了样式却不显示css代码如下：查看控制台发现，其他样式名字在控制台都显示正常，所以样式没问题最后一个被module.css自动重命名了，所以这一个样式没显示出来所以我们要改变下写法原来的代码修改之后：...

1.方法PureComponent,memo父组件每次更新，甚至是setState空对象，不论是否更改子组件的属性，都会使子组件走一遍更新（创建新的DOM节点，对比老的DOM节点，无变化则不变，否则更新），PureComponent(用于class组件)，memo(用于function组件)能优化，减少无效更新import React, { Component,memo } from 'react'export default class App extends Component { sta.

一 普通用法：import React, { Component } from 'react'export default class App extends Component { mytext=null render() { return ( <div> <button type="button" onClick={()=>{ console.log(this.mytext); this..

用React.lazy(）引入组件在放这两个组件外面要用Suspense包住，并且要有回调函数处理切换组件时进行的停留import React, { Component, Suspense } from "react";const Nowplaying =React.lazy(() => import("./Nowplaying"));const Comingsoon =React.lazy(()=>import('./Comingsoon'))export default cl..

setState的第二个参数是一个回调函数，在函数里可以取到当前state的值放大这段代码，在三个地方都打印state里的isShow的值，看到控制台的执行顺序可以看到setState是异步函数，我们要实时拿到state的值要在setState的第二个参数的函数里拿...

第一个是直接修改了数据，第二个产生了新数据

这个红色部分它的返回函数就相当于componentWillUnmount函数这个return后面的函数就相当于componentWillUnmount

关键代码：import React, { Component } from 'react'export default class Demo extends Component { state = { count: 0 }; //对象式的setState // add = () => { //获取原来的count值，所以在新状态不依赖于原状态时使用，如（count:99) // const { count } = this.state; //更新状态 // .

例子

1.安装react-reduxyarn add react-redux

1.安装reduxyarn add redux2.创建store文件夹，创建store.js //引入createStore 模块import {createStore} from 'redux'//调用createStore 方法const store = createStore();//导出storeexport default store;3.创建reducer.js//定义数据const defaultState = { inputValue:"", list

目录1.redux简介1.redux简介

App.js不引入样式将这行代码删除，我们按需引入antd查看文档

注意state传递参数时需要作下判断||{}

当我们要在路由前加前缀时，比如自己公司的名字或者什么，刷新页面时样式会丢失，打开控制台的网络选项卡却发现bootstrap已经请求回来了请求地址本来应该是下图：结果是这样文件夹的路径本应该是根路径的css下的bootstrap.css由于路径错了，会返回index.html有三种解决办法1.删除这个../和/的区别在于：./是相对路径，是在当前路径下去找/是直接去localhost:3000/css/bootstrap2.绝对路径3.不改css的路径，将index.js中的路由改为

先下包

1.安装axios2.引入3.解决跨域我们在端口3000上，但是服务器是5000，如何解决跨域呢？我们先将服务器的文件夹在vs code上打开，并且启动server1.js在react脚手架文件中，两种方法，第一种在package.json中，只能配置一个代理第二种在src文件夹下创建一个名字为setupProxy.js的文件，这个方法可以配置多个代理，并且使用Common.js改完需要停掉脚手架，重新启动...

目录1.创建项目2.文件执行顺序3.index.js文件4.样式的模块化：5.插件——快速生成代码片段6.修改src名字7.组件化编码流程1.创建项目yarn start 项目启动yarn build 把写完的项目最后进行打包 生成静态文件yarn eject（慎用） 把所有相关webpack命令配置暴露出来，且不能再隐藏了2.文件执行顺序这么多的文件执行顺序是怎样的呢？首先来到src下的index.js入口文件，引入了各种库，q根据root去index.html找到root。至于怎么把in

数据都会重新渲染到页面，效率低下所以应该使用id(数据的唯一标识)作为key

1.非受控组件:现用现取<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <bod

子组件如何给父组件传值父传给子通过props传一个函数父组件传给子组件一个函数，函数能接受参数，子组件在合适的时候调用了该函数，把数据以参数形式交给了父组件，父组件再放入自己的状态里...

一：初始化React脚手架全局安装时进入cmd，我的要用管理员身份运行才行，不然会下载失败我们将文件夹放在桌面上，创建文件夹静静等待…桌面上会有这个文件夹，一般来说package.json里的scripts里面的就是项目运行或者打包需要执行的命令进入桌面上那个文件夹，在路径里直接敲cmd就能进入这个文件夹的路径，然后输入yarn start或者在vs code运行这个项目二：脚手架文件介绍页签图标用ico的后缀<!DOCTYPE html><html lang=

文章目录一：定时器的使用一：定时器的使用我们想要组件挂载到页面，就开启定时器的效果，如果将定时器函数写在render里，这种写法是错误的<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> &lt