react
关注
分享
扫一扫
文章平均质量分 67
自学react之路
前端探险家
路漫漫其修远兮，吾将上下而求索...
展开
-
react项目中ant-ui表格用下拉滚动条加载数据
实现需求：在react项目中，在满足表格头部列可以拖动改变的情况下，还要表格利用滚动条下拉来加载表格数据？如下图：**方案一：**利用react-infinite-scroll-component插件，但是表头无法固定，一旦样式固定定位写死，就无法满足拖动，如果你的表格列不需要拖动的话，可以使用，比较方便；**方案二：**先实现ant-ui表格组件的滚动，然后监控表格滚动条，快到达底部后触发加载数据接口来实现下拉加载，比较麻烦，但是表头固定，也不会破坏表头列的拖动；最后我选择了方案二，下面我就.原创 2022-04-15 17:37:34 · 2709 阅读 · 0 评论 -
用react-resizable插件来拖动改变ant-ui表格的列宽
项目需求：react项目中，做一个可以通过鼠标拖动改变列宽的表格第一步：安装react-resizable插件npm install react-resizable --save第二步：在项目中封装Resizable组件Resizable.jsimport * as React from "react";import { Table } from "antd";import "antd/dist/antd.css"; import { Resizable } from "react-.原创 2022-04-15 16:32:49 · 1989 阅读 · 0 评论 -
浅谈React项目中 Immutable Data
Immutable是什么?Immutable，不可改变的，在计算机中，即指一旦创建，就不能再被更改的数据；对 Immutable对象的任何修改或添加删除操作都会返回一个新的 Immutable对象；Immutable 实现的原理是 Persistent Data Structure（持久化数据结构）：用一种数据结构来保存数据当数据被修改时，会返回一个对象，但是新的对象会尽可能的利用之前的数据结构而不会对内存造成浪费也就是使用旧数据创建新数据时，要保证旧数据同时可用且不变，同时为了避免 deep原创 2021-08-25 10:46:15 · 475 阅读 · 0 评论 -
React学习笔记十二——组件之间的通信方式
前言前面我们直接介绍了用redux来进行组件通信。如果是一些小型的项目，其实我们无需用到redux，那组件之间要如何来通信呢，父传子我们都知道用pros，兄弟组件和一些不相干的组件之间呢？接下来我们就详细的介绍一下组件通信的所有方式。父组件 => 子组件props父组件利用props把值或者函数传给子组件，子组件通过this.prorps.xx去获取；import React from "react";import PropTypes from 'prop-types';class C原创 2021-08-18 17:16:18 · 1278 阅读 · 0 评论 -
React学习笔记十一——扩展知识点（setState / lazyLoad / Hook / Fragment / Context）
setState()简单案例：案例代码如下：import React from "react";//UI组件export default class Person extends React.Component{ state = {count:0} increment = () => { const {count} = this.state this.setState({count:count+1}) console.log(this.state.coun原创 2021-07-05 14:28:04 · 1328 阅读 · 6 评论 -
React学习笔记十——用react-redux实现多组件数据共享案例
在笔记八和九介绍了react结合redux在组件内的使用方法，接下来我们就要真正的取利用redux实现多组件之间的数据共享；下面我们八笔记九Count组件和redux通信的案例代码拿过来，再新增个Person组件，实现两个组件的数据共享；多组件数据共享案例只引入组件和redux相关文件代码，App和index.js入口文件就不引入了；需要添加Person容器组件，person_action.js和person_reducer.js文件；Count容器组件import React from "r原创 2021-07-02 11:26:59 · 886 阅读 · 4 评论 -
React学习笔记九——React-redux的使用详解
react-redux模型图所有的UI组件都应该包裹一个容器组件，他们是父子关系容器组件是真正和redux打交道的，里面可以随意的使用redux的apiUI组件中不能使用任何redux的api容器组件会传给UI组件：1.redux中所保存的状态；2.用于操作状态的方法容器组件给UI组件传递状态和操作状态的方法均通过props传递react-redux核心知识点1.利用connect创建一个容器组件连接UI组件和reduximport {connect} from 'react-redu原创 2021-07-01 16:49:25 · 780 阅读 · 0 评论 -
React学习笔记八——Redux的使用详解
1.Redux是什么Redux专门用于做状态管理的JS库，不是React插件库它可以用在React、vue和angular等项目中，但是基本与React配合使用集中式管理React应用中多个组件共享的状态2.什么情况下需要使用Redux某个组件的状态，需要让其他组件可以随时拿到（共享）一个组件需要改变另一个组件的状态（通信）能不用就不用，如果不用比较吃力才考虑使用3.Redux的工作流程效果案例：组件内count（0）状态保存在Redux，通过组件中【+1按钮】，来改变count原创 2021-06-30 18:35:08 · 717 阅读 · 1 评论 -
React学习笔记七——React-router-web的使用详解
1.拆分组件拆分界面，抽取组件1.设计一个组件需要专一性，即一个组件只负责一个功能，跟封封逻辑功能的思路一致，遵循的原则是就是：一个组件只专注的做一件事，并且要把这件事做好；2.一个组件的功能如果可以拆封成多个功能点，应将每个功能点设计成一个个小组件，但并不是颗粒度越小越好，只要将一个组件内的功能和逻辑控制在一个可控的范围内即可；2.实现静态组件使用组件先实现静态页面效果3.实现动态组件3.1动态显示初始化数据数据类型数据名称保存在那个组件3.2交互（从绑定事件监听开始原创 2021-06-29 18:44:47 · 398 阅读 · 1 评论 -
React学习笔记六——用creact-react-app脚手架创建项目
全局安装create-react-appnpm install -g create-react-app切换到想要创建的目录下，输入命令create-react-app my-react-project进入项目，启动项目进入项目：cd my-react-project启动项目：npm/yarn start创建成功，如下图：React脚手架项目结构...原创 2021-06-24 18:00:11 · 505 阅读 · 0 评论 -
React学习笔记五——组件的生命周期
生命周期的理解组件从创建到死亡会经历一些特定的阶段React组件中包含了一系列的钩子函数（生命周期回调函数），会在特定的时刻调用我们在定义组件时，会在特定的生命周期函数中，做特定的工作组件的生命周期（旧）初始化挂载时按顺序触发的钩子函数constructor–构造器componenetWillMount–组件将挂载render–页面渲染componenetDidMount–组件已挂载更改状态( setState() )时按顺序触发的钩子函数shouldComponentUp原创 2021-06-24 15:35:03 · 344 阅读 · 0 评论 -
React学习笔记四——受控组件和非受控组件
受控组件页面中所有输入类的DOM，随着输入的值同步的维护到状态中，如需要使用时，直接从状态中获取推荐使用受控组件，可以避免对ref的使用受控组件案例代码<head> <div id="test"></div></head>//引入一些react核心库和babel<script type="text/javascript" src="..."></script><script type="text/ba原创 2021-06-24 11:16:36 · 874 阅读 · 1 评论 -
React学习笔记三——组件三大属性state、props和refs详解
state1.类中方法this的指向constructor和render里的this指向类组件的实例对象在类组件内部定义的普通函数，作为onClick的回调，不是通过实例调用的，是直接调用，并且类组件内部默认开启了局部严格模式，所以this指向undefind2.将类组件内部定义的函数内部this指向类组件的实例对象利用箭头函数在构造器中通过bind改变函数this指向，赋值于实例对象的新函数3.初始化状态写法初始化状态写在构造器中 this.state = {}如果类组件省略构原创 2021-06-23 17:44:44 · 615 阅读 · 2 评论 -
React学习笔记二——组件的理解和使用
函数式组件（简单组件）函数名首字母必须大写ReactDOM.render()的第一个参数必须是首字母大写的闭合标签，<head> <div id="test"></div></head>//引入一些react核心库和babel<script type="text/javascript" src="..."></script><script type="text/babel"> //1.创建一个函原创 2021-06-22 18:17:27 · 335 阅读 · 0 评论 -
React学习笔记一——JSX语法规则
之前看过两遍关于react基础的视频，每次看完感觉非常懂，但是过一段就会忘记，所以这次再学习自己会做一些笔记记录下来，方便日后的学习，如果对你有帮助，再好不过；通过以下代码来总结以下JSX的语法规则定义虚拟DOM，不要写引号标签中混入JS要使用花括号{}样式的类名指定不要用class，要用className内联样式，要用style={{key:value}}的形式去写虚拟DOM必须只有一个根标签标签必须闭合标签首字母如果为小写字母，则将标签改为html中同名标签，若没有该标签，则报错；.原创 2021-06-22 17:10:30 · 369 阅读 · 0 评论 -
2021年React常见的面试题以及答案(持续更新中...)
React常见的面试题以及答案区分Real DOM和Virtual DOM什么是JSX和它的特性？类组件和函数组件之间有什么区别？了解 Virtual DOM 吗？解释一下它的工作原理。React组件生命周期有几个阶段详细解释 React 组件的生命周期方法react在哪个生命周期做优化受控组件和非受控组件的区别为什么虚拟 dom 会提高性能react的diff算法是怎么完成的react组件之间如何通信什么是高阶组件？React context是什么？什么是Redux？Redux遵循的三个原则是什么？数据如原创 2021-05-18 12:40:39 · 40016 阅读 · 12 评论