随笔分类 -  08-01. React

setState 是同步还是异步 测试
摘要：class 类组件中的 setState 和 hooks 函数组件中的 useState 的 状态修改函数 是一样的，有时同步，有时异步。 结论： setState 只在合成事件和钩子函数中是“异步”的，在原生事件和 setTimeout 中都是同步的。 setState 的“异步”并不是说内部由异 阅读全文
posted @ 2022-04-29 11:31 真的想不出来 阅读(308) 评论(0) 推荐(0)
react 开发中，报错分析
摘要：一. 报错：Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. 原因分析：React 只对内部的 DOM 树及状态负 阅读全文
posted @ 2021-12-08 16:13 真的想不出来 阅读(3520) 评论(0) 推荐(0)
react 项目中的优化
摘要：react v16.6之后 的按需加载（2019.07.04更新） React这个版本新加了lazy和Suspense这两个功能。 对于上面的按需加载，可以修改代码为： import React, { Suspense } from 'react'; import Loading from './m 阅读全文
posted @ 2021-03-15 00:09 真的想不出来 阅读(110) 评论(0) 推荐(0)
redux 相关的基础知识及用法，包括中间件redux-thunk的使用
摘要：基础知识点巩固 redux三大原则 单一数据源：整个应用的state被存储在一个对象数中，并且这个对象数只存在于唯一的store中。 State是只读的：唯一改变state的方法是出发action，action是一个描述已发生事件的普通对象。 使用纯函数来执行修改：编写reducer来描述actio 阅读全文
posted @ 2020-12-17 19:14 真的想不出来 阅读(213) 评论(0) 推荐(0)
react 高阶组件如何写，一个高阶组件的小demo
摘要：高级组件 higherOrderComponent （HOC） 是个纯函数，接收一个组件，返回一个组件 例子： 效果图 js部份 import React, { Component } from "react"; import "./Blackboard.less"; const defaultPa 阅读全文
posted @ 2020-10-22 22:56 真的想不出来 阅读(656) 评论(0) 推荐(0)
react 增加@connect装饰器
摘要：前言： 以下内容能不能用正在尝试， 添加装饰器支持@connect $ npm install babel-plugin-transform-decorators-legacy --save-dev $ npm install @babel/plugin-proposal-decorators -- 阅读全文
posted @ 2020-07-16 18:10 真的想不出来 阅读(384) 评论(0) 推荐(0)
用脚手架 create-react-app 搭建 react 项目及各种组件库的安装
摘要：create-react-app，官方推荐脚手架 配置及安装方式： 1.搭建 react ： npx create-react-app my-app （my-app 自己起的文件名，如果一直安装失败，试着清一下缓存：npm cache clean --force） 1.1： npm i react- 阅读全文
posted @ 2020-07-14 11:48 真的想不出来 阅读(806) 评论(0) 推荐(0)
React 中的 suspense 、lazy 。异步加载页面，和遇到的问题。
摘要：React 中平时一般引入组件都是： import Demo from "../pages/Demo/Demo"; 注意：import ... 一定要写在文件的最上方，不然会报错 我们也可以使用 React.lazy 提供的懒加载方法动态加载组件，例如： import React, { lazy, 阅读全文
posted @ 2020-03-11 16:49 真的想不出来 阅读(2494) 评论(0) 推荐(0)
9.React Context 上下文
摘要：1.Context 在 react 中，我们会遇到这么一个情况，如果爷爷想传东西给孙子，那么就需要这么做：爷爷 传给 父亲，父亲再传给自己的儿子。 如果层级嵌套的特别深，怎么传递呢？这时候就要引出我们今天的知识点 context 上下文，可以通过设置上下文，让参数容易读取，不需要层层传递。 // 在 阅读全文
posted @ 2020-01-16 16:01 真的想不出来 阅读(657) 评论(0) 推荐(0)
8.React 组件封装
摘要：最近一直没有合适的时间整理笔记，今天抽空，大致写点 -- 2020/1/16 16:05 周四 直接上代码： import React from "react"; import { connect } from "react-redux"; import PropTypes from "prop-t 阅读全文
posted @ 2020-01-10 09:12 真的想不出来 阅读(764) 评论(0) 推荐(0)
7.react 导入中的 as / 2. export和export default的区别
摘要：1. react 导入中的 as import React from 'react' // 只导入 是 React。 import * as React from 'react' //（* 所有），导入所有，并命名为 React。 import hash as Router from 'react' 阅读全文
posted @ 2019-12-12 09:56 真的想不出来 阅读(1401) 评论(0) 推荐(0)
6.React Hook 概述（开发中遇到的问题与解决）
摘要：hooks 函数是做什么用的？ 让静态组件动态化 React Hook 概述 什么是 Hook： Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 如果你在编写函数组件并意识到需要向其添加一些 state，以前的 阅读全文
posted @ 2019-11-27 18:58 真的想不出来 阅读(3303) 评论(0) 推荐(0)
3.React-router/BrowserRouter/withRouter/Switch/history/exact/strict/Link/Redirect/PropTypes
摘要：先了解下基础知识 路径可能的样子： http://localhost:9000/static/index/posts/edit?name=张三&age=12&gender=man#zh/en/年龄 一段完整的地址： 协议 端口 路径（/...） search（?key=value&k=v&...） 阅读全文
posted @ 2019-01-20 22:51 真的想不出来 阅读(493) 评论(0) 推荐(0)
2.React数据传递 之☞ 父子之间数据传递 / React生命周期
摘要：组件的信息传递的方式： 1.props （父子之间的时候使用） 2.上下文 （有共同祖先，多层或平行之间需要操作数据的时候使用 ） 3.redux （有没有共同祖先 都可以实现状态管理、信息共享） this.state = {} 状态初始化 初始化必须放在 constructor 下 只要更新 st 阅读全文
posted @ 2019-01-17 16:46 真的想不出来 阅读(454) 评论(0) 推荐(0)
1.React （基础篇）
摘要：React介绍： 专门构建于用户界面的js库（顶多它是mvc中的v层框架） 核心思想，通过数据操作视图。 官方（推荐使用）脚手架：create-react-app 中文网：https://react.docschina.org/ 难点：英文、webpack 背景：react 是 Facebook 出 阅读全文
posted @ 2019-01-15 19:51 真的想不出来 阅读(286) 评论(0) 推荐(0)