React.js
关注
分享
扫一扫
文章平均质量分 75
react 全家桶
weixin79893765432...
学而不思则罔，思而不学则殆。
展开
-
Vue 和 React 的对比
Vue 由 EvanYou 开发。React 由 由 Facebook 开发。React 版本Vue 版本。原创 2021-09-06 11:12:00 · 1670 阅读 · 0 评论
-
redux
redux 中文官网React Redux 中文文档Redux 是一个管理全局应用状态的库。Redux 的基本思想：应用中使用集中式的全局状态来管理，并明确更新状态的模式，以便让代码具有可预测性。Redux 期望所有状态更新都是使用不可变的方式——更新原数据的复本。并非所有应用程序都需要 Redux，那么，何时需要考虑使用 Redux 呢？应用中有很多 state 在多个组件中需要使用。应用 state 会随着时间的推移而频繁更新。更新 state 的逻辑很复杂。原创 2022-02-09 16:50:57 · 615 阅读 · 0 评论 -
react 学习
react 避免了 jQuery 时代按照 DOM 节点细粒度的更新的方式，采用组件式开发，整体刷新组件。react 是单向数据流。react 的 4 个核心 API：ReactDOM.render 方法让 React 组件渲染到某个具体的 DOM 节点。组件的 render 方法组件的 setState 方法，用于改变组件状态，触发 render如何通过 props 给 React 组件传递参数。react 组件理解 react 组件：react 组件以数据驱动视图的改变。原创 2022-04-19 17:32:11 · 261 阅读 · 0 评论 -
react router
react-router-redux：在 react-router 的基础上的扩展，新增了 React Router 和 Redux 的集成。在浏览器上，我们只需引用 react-router-dom 这一个包就行，因为：react-router-dom 里包含了 react-router 的依赖。react-router-native： 在 react-router 的基础上的扩展，新增了 react-native 运行环境下的一些功能。文档：react-router-redux - npm。原创 2021-09-16 17:08:51 · 1589 阅读 · 0 评论 -
React 之 function 组件里使用 Hooks
Sortable.js 是一款优秀的 js 拖拽库，支持ie9及以上版本ie浏览器和现代浏览器，也可以运行在移动触摸设备中。不依赖jQuery。支持 Meteor、AngularJS、React、Vue、Knockout框架和任何CSS库，如Bootstrap、Element UI。你可以用来拖拽div、table等元素。Sortable.js 是基于 H5 的新特性 - 拖拽属性 来实现的。sortable.js中文文档...原创 2021-10-20 19:03:30 · 1756 阅读 · 0 评论 -
React 组件的生命周期
React 组件的生命周期图（新旧对比）原创 2021-06-02 12:01:00 · 2126 阅读 · 1 评论 -
react 与 DOM
因为 React 处理更新DOM以匹配您的渲染输出，所以您的组件不需要经常操作 DOM。然而，有时你可能需要访问由 React 管理的 DOM 元素。在 React 中没有内置的方法来做这些事情，所以你需要一个DOM 节点的 ref。原创 2021-10-22 14:43:29 · 1364 阅读 · 0 评论 -
给 vite 创建的 React 项目配置 ESLint
最新的react-router 中采用了 vite + react。原创 2022-03-29 11:17:17 · 3039 阅读 · 0 评论 -
react 使用 PropTypes 进行类型检查
https://www.npmjs.com/package/prop-typeshttps://cloud.tencent.com/developer/article/1684723https://segmentfault.com/a/1190000016182458https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.htmlhttps://zhuanlan.zhihu.com/p/35344200原创 2021-05-17 20:55:37 · 2037 阅读 · 0 评论 -
react lazy + Suspense / loadable 实现路由懒加载
目录前言为什么要代码分割？第三方库方案——react-loadble“lazy 方法 +Suspense 组件”方案前言在 16.6 版本之前，代码分割通常是由第三方库来完成的，比如 react-loadble(核心思路为: 高阶组件 + webpack dynamic import)。在 16.6 版本中提供了 Suspense 和 lazy 这两个方法来实现代码分割。为什么要代码分割？React 项目打包时，如果不进行异步组件的处理，那么所有页面所需要的 js 都..原创 2021-04-21 18:00:27 · 648 阅读 · 0 评论 -
react 之 shouldComponentUpdate / PureComponent / memo 减少组件的渲染次数
目录shouldComponentUpdate 钩子函数PureComponent 类memo 方法总结shouldComponentUpdate 钩子函数在react中，父组件重新渲染会造成其所有子组件都重新渲染。当需要设置其某个子组件不重新渲染时，需要使用shouldComponentUpdate钩子函数——在子组件的该生命周期中做判断，是否需要重新渲染。PureComponent 类React15.3中新加了一个PureComponent类，用来减少不必要的ren.原创 2021-04-21 16:30:45 · 338 阅读 · 0 评论 -
React setState 的异步与同步
目录先看一个例子setState为什么不会同步更新组件？探秘setState 源码事务整体流程回顾：再看一个例子：结语写业务代码的时候 需要经常用到setState, 前几天review代码的时候， 又想了一下这个API， 发现对它的了解不是很清楚， 仅仅是setState是异步的, 周六在家参考了一些资料，简单整理了下，写的比较简单， 通篇阅读大概耗时 5min, 在这简单分享一下， 希望对大家有所帮助 ；）。先看一个例子假如有这样一个点击执行累加场景：...转载 2021-04-21 14:32:32 · 654 阅读 · 0 评论 -
在内置事件除自带参数外额外传递自定义参数
react 版：<input onChange={function (num) { const e = e || window.event; return handleChange(e, num) }.bind(this, 110)}/>vue 版：原创 2021-03-18 18:47:43 · 838 阅读 · 0 评论 -
redux 常见问题
Redux 常见问题目录为何组件没有被重新渲染、或者 mapStateToProps 没有运行？ 为何组件频繁的重新渲染？ 怎样使 mapStateToProps 执行更快？ 为何不在被连接的组件中使用 this.props.dispatch ？ 应该只连接到顶层组件吗，或者可以在组件树中连接到不同组件吗？React Redux为何组件没有被重新渲染、或者 mapStateToProps 没有运行？目前来看，导致组件在 action 分发后却没有被重新渲染，最常见的原因是对 s转载 2021-03-09 08:30:07 · 286 阅读 · 0 评论 -
Redux 异步数据管理
前言redux 只处理同步数据流，异步数据流交给 “中间件” 处理。redux 中间件经历了三次发展：redux-thunk redux-promise redux-saga一、中间件的概念“中间件的概念”引自阮一峰老师的博客《Redux 入门教程（二）：中间件与异步操作》，欲进一步学习请自行加餐阮老师准备的盛宴。为了理解中间件，让我们站在框架作者的角度思考问题：如果要添加功能，你会在哪个环节添加？（1）Reducer：纯函数，只承担计算 State 的功能，不合适承担.原创 2021-03-01 19:57:11 · 1196 阅读 · 0 评论 -
React useEffect清理：如何以及何时使用它
原文：https://dev.to/otamnitram/react-useeffect-cleanup-how-and-when-to-use-it-2hbm译文如下。React useEffect清理的语法：您是否遇到以下错误？消息很简单。我们正在尝试更改组件的状态，即使该组件已卸载且不可用。Can't perform a React state update on an unmounted component. This is a no-op, but it indicate..转载 2021-02-25 10:53:20 · 7606 阅读 · 0 评论 -
react 通过 ref 获取 dom 节点的信息
import { useRef, useState, useEffect } from "react";const constructionHeight = useRef();const { current } = constructionHeight;const [constructionFormHeight, setConstructionFormHeight] = useState(0);useEffect(() => { if(current) { setCo...原创 2021-02-22 19:08:41 · 1575 阅读 · 0 评论 -
react 带你了解下 Fragments
React.Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。例如：render() { return ( <React.Fragment> <ChildA /> <ChildB /> <ChildC /> </React.Fragment> );}你也可以使用一种新的，且更简短的语法来声明 Fragments。它看起来像空标签。例如：ren原创 2021-02-22 11:31:13 · 170 阅读 · 0 评论 -
React Router v5.1（翻译）
如果您想抢先升级到 React Router 的下一个主要版本，假设您同时使用 React >= 16.8 和 React Router 5.1，那么您今天可以做一些事情。让我们一个一个地探索新的钩子，我们将跟进一些关于如何充分利用这个版本的技巧，同时为 React Router 的未来做好准备。同样，所有这些步骤都是可选的，但它们应该有助于让您的应用为我们的下一个主要版本做好准备。道具的情况下，您可以传入自定义道具，但您必须手动将从回调中获得的值传递给您的元素。你已经知道如何输入常规的 React 了。转载 2021-01-25 17:15:02 · 500 阅读 · 0 评论 -
react 函数组件使用了 hook 后闪屏问题的分析与解决
将useEffect 换成useLayoutEffect 即可。useEffect和useLayoutEffect的区别原创 2021-01-21 19:10:30 · 2178 阅读 · 0 评论 -
用 react + “ant-design-pro 的 Tabs“ 实现顶部菜单·记
1、页面顶部添加 tab，点击切换 tab 时，可切换2、将 tab 与路由双向绑定3、调整样式（1）、水平垂直居中（2）、还原 tab 字体的样式原创 2021-01-15 19:40:47 · 5011 阅读 · 6 评论 -
react+ant-design-pro 解决报错：Warning: Instance created by `useForm` is not connected to any Form elemen
解决报错：Warning: Instance created by `useForm` is not connected to any Form element. Forget to pass `form` prop?在 Modal 弹框里加入forceRender 即可。举个例子：<Modal forceRender visible={visible} onOk={onClose} onCancel={onClose}> <.原创 2021-01-14 15:40:29 · 563 阅读 · 0 评论 -
函数之JavaScript、Vue 与 React+JSX
一、函数之 JavaScript<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>test</title></head><body&g原创 2021-01-13 14:59:12 · 229 阅读 · 0 评论 -
如何创建一个 react 项目
前言构建React项目的几种方式：create-react-app 脚手架快速搭建 react 项目（推荐）。 generator-react-webpack 脚手架搭建 react 项目。 webpack 一步一步构建 react 项目。一、create-react-app 脚手架快速搭建 react 项目要求：Node>=8.10 并且 npm>=5.61、安装 create-react-appnpm install -g create-react-app .原创 2020-12-17 17:54:56 · 38271 阅读 · 5 评论 -
手动搭建 React 项目
目录一、 初始化项目二、 Webpack 配置2.1 基础配置设置2.2 安装基础插件包2.3 测试2.4 总结三、 添加对 scss 样式文件的支持3.1 TODO3.2 webpack 配置修改3.3 安装依赖3.4 代码测试四、 添加对图片的支持4.1 webpack 修改4.2 依赖安装4.3 测试五、 esling 配置5.1 webpack 配置修改5.2 项目下添加.eslintrc.js配置文件5.3 项目下添加..转载 2020-11-30 14:36:10 · 770 阅读 · 0 评论 -
React 组件
在一个典型的 React 应用中，数据是通过 props 属性自上而下（由父及子）进行传递的，但此种用法对于某些类型的属性而言是极其繁琐的，这些属性是应用程序中许多组件都需要的。这样，使用 FancyButton 的组件可以获取底层 DOM 节点 button 的 ref ，并在必要时访问，就像其直接使用 DOM button 一样。它们都是用来保存信息的，这些信息可以控制组件的渲染输出。react 的高阶组件可以看作是一个工厂函数，接收一个组件作为参数并返回一个具有新功能或特性的组件。原创 2020-11-25 11:17:10 · 1141 阅读 · 1 评论 -
react 跨域—— jsonp 跨域
一、使用crossorigin属性解决 jsonp 跨域如果你通过 CDN 的方式引入 React，我们建议你设置 crossorigin属性：<script crossorigin src="..."></script>同时建议你验证使用的 CDN 是否设置了Access-Control-Allow-Origin: *HTTP 请求头。...原创 2020-11-23 17:43:36 · 769 阅读 · 2 评论 -
react 四种视角入门
一、react 的三种使用方法1、在html中使用react（1）、创建并使用 react 组件<!DOCTYPE html><html>// html 中<head> <meta charset="UTF-8" /> <title>第一次使用 react</title></head><body> <h2>初识 react</h2> <...原创 2020-11-23 08:33:02 · 481 阅读 · 0 评论