React学习笔记
自己React的学习笔记,不定时更新,记录自己的学习过程
所有代码可以在我的GitHub中找到:https://github.com/LaoChen1994/React_Learning
月半叫做胖
好好学习 冲鸭
展开
-
React+Nodejs中间层(一):环境搭建+实现接口转发
Koa+React+Webpack环境配置1. 初衷最近,因疫情在家写了一些东西.想到之前去实习的时候,公司用的Nodejs做中间层,实现数据格式的处理,请求转发,SSR等功能,想自己也折腾下这么个东西,刚好最近或多或少的学了一些Webpack,就从webpack搭一个Koa作为中间层,页面路由,同时使用React的这么一个脚手架吧,只是一个自己的玩具吧,哈哈哈哈.2. 使用中间层的作用我...原创 2020-03-18 16:04:42 · 4073 阅读 · 0 评论 -
学习笔记:SKU组件(React版)
SKU组件(React版)源码起因今天看掘金的时候看到前端SKU算法实现,因为公司也有涉及到SKU的业务,记录一下自己写SKU的一个例子吧,刚好他有提供后端的API接口数据,mock一下干起来,但是在做的时候还是有很多问题的,这里做一下记录实现效果mock数据export const simulatedSku = { id: 2, title: "林间有风自营针织衫", ...原创 2020-03-16 16:12:03 · 3594 阅读 · 0 评论 -
开发随笔:React使用IntersectionObserver实现无限下拉
17. 无限下拉的例子参考博文1. 工具介绍IntersectionObserver: 一个元素是否在视窗中可见, 通过该对象实现对于DOM元素的异步监听功能的实现。基本使用方法:创建一个IntersectionObserver的类函数,在类函数创建时,传入需要监听事件的回调处理函数主要用用于当元素和视窗发生交互时候,调用回调函数回调中的entities是所有监听对象组成的数组...原创 2020-03-02 01:37:16 · 5225 阅读 · 0 评论 -
日常随笔: 实现拖拽上传文件并展示
19. 拖拽上传图片并展示上传图片1. 解决思路:通过利用,监听drop方法,从dataTransfer中得到上传的源文件利用FileReader类中的readAsDataURL将二进制文件转换成base64字符串将该字符串放入img的src中即可上传功能使用FormData进行处理,利用append方法添加内容之后利用post上传到服务器,获取文件地址1. 核心处理详细内容...原创 2020-02-24 15:47:12 · 453 阅读 · 0 评论 -
练手的React静态博客项目
React练手博客项目如果被人看到了觉得还行的话进去点个star把有什么问题的话可以直接评论,希望大家多批评指正,作为前端小菜鸟的我还是要多多学习鸭...原创 2020-02-07 20:00:59 · 733 阅读 · 2 评论 -
开发随笔: useRef获取之前状态以及useEffect的坑小记
16. useEffect中的坑以及利用useRef记录之前的状态1. 场景描述用法在使用useEffect这个hooks的时候,我们通过会通过给他增加一个依赖项,来完成当某个或某些依赖发生改变的时候,完成一些副作用的操作,其正常用法如下:import React, { useEffect, useState } from "react";import "./styles.css";c...原创 2020-01-20 16:39:31 · 8491 阅读 · 0 评论 -
开发随笔:React异步加载组件封装
React异步载入组件封装作者正在开源一个基于React+Typescript+node.js的博客系统,源码在练手开源项目, 有想一起学习的或者有空的大佬可以帮我看看代码,提提意见,顺便给个star最好不过拉。谢谢大家1. 场景叙述今天,碰到这样一个问题,就是当表单重载修改的时候,需要根据接口返回的数据来实现表单的初始化,如果是自己封装的受控组件的话,其实很简单,直接通过value赋值,然...原创 2020-01-18 22:28:06 · 574 阅读 · 0 评论 -
React Hook: 使用Context和useReducer代替Redux (Typescript)
14. React Hook: useContext + useReducer代替redux0. 背景当组件嵌套很深,通过一直传参的方法来实现会非常麻烦,为了共享一些参数,一般可以通过Context来实现参数的托管,如果要对部分参数进行修改,可以通过redux或者mobx来做状态的集中管理。在有了React hooks之后,通过Context + useReducer完成Redux的功能,这里...原创 2020-01-13 11:42:40 · 3188 阅读 · 1 评论 -
开发随笔:在react中使用带参的防抖节流回调
12. 在react中使用防抖和节流1. 原理为什么要使用防抖节流,以及防抖节流的原理可以细看防抖和节流2. 在React中使用防抖节流错误的例子import React from "react";import { debounce } from "lodash";export function ErrorInput() { const onChange = e => {...原创 2020-01-11 12:09:29 · 1152 阅读 · 3 评论 -
开发随笔:React传递图片文件到后端的文件上传组件封装过程
10 . React 图片或者文件上传问题通过 base64 前端处理图片为 base64 的解决方案利用 FileReader 对数据进行读取,如果是图片会将图片读取为 base64 的形式将得到的 base64 的字符串传给后端后端直接保存该html字符串,之后调用接口查询该数据直接前端通过img标签完成自动解析即可参考博文代码实现function App() {...原创 2020-01-09 10:40:41 · 2969 阅读 · 0 评论 -
开发随笔:富文本编辑器简单原理
1. 参考博文富文本编辑器的简单原理2. 所用API文档mdn document.execCommand3. 原理简述通过将div标签设置其contentEditable之后会得到一个可编辑的区域,之后该区域就会获得一个类似4. 简单实现代码import React, { useRef, useState } from "react";import "./styles.css"...原创 2020-01-08 10:29:24 · 362 阅读 · 0 评论 -
React Hooks: useRef, useImperativeHandle, forwardRef的使用方法
1. 三者用处useRef: 用于获取元素的原生DOM或者获取自定义组件所暴露出来的ref方法(父组件可以通过ref获取子组件,并调用相对应子组件中的方法)useImperativeHandle:在函数式组件中,用于定义暴露给父组件的ref方法。React.forwardRef: 将ref父类的ref作为参数传入函数式组件中,本身props只带有children这个参数,这样可以让子类转发...原创 2020-01-03 11:32:41 · 13167 阅读 · 0 评论 -
React学习笔记之十三:React-Router之基础语法和嵌套路由
1.React-Router的基本用法react-router的几个重要工具Router (BrowserRouter)RouteLinkRouter路由器Router: 主要用于包裹整个路由信息和路由跳转信息的容器Route路由规则: 用于识别特定的URL后,将页面导向特定的组件(URL -> Component)Link路由链路:类似于a标签,将页面跳转到特定的U...原创 2019-08-04 20:56:38 · 366 阅读 · 1 评论 -
React学习笔记之十二:通过TodoList学Mobx
Mobx学习笔记1. mobx的作用官网描述React 通过提供机制把应用状态转换为可渲染组件树并对其进行渲染。MobX提供机制来存储和更新应用状态供 React 使用简单点: React -> 把数据映射到页面上进行渲染Mobx -> 提供存储和更新状态的方法(状态管理)2. mobx-react 装饰器环境搭建创建一个react应用并添加mobx-reac...原创 2019-08-04 17:26:29 · 320 阅读 · 0 评论 -
React学习笔记之十一:高阶组件(HOC)
11.高阶组件(HOC)什么是HOC怎么封装一个HOCHOC的小栗子HOC的用法深入博文推荐1. 什么是HOC高阶组件(HOC)不是React的API是一种基于组件的编程方法,是为了组件更好的复用而存在的。高阶组件!!!就是一个函数 不要慌!比如获取博客信息列表组件和获取评论列表,虽然可能评论列表在博客信息列表之间有一些差距,比如博客可能有转发等功能,而评论列表可能要有自动...原创 2019-07-28 12:06:37 · 516 阅读 · 0 评论 -
React学习笔记之十: Context的使用方法
10. React的上下文Context1. Context的作用组件间的参数传递是单向数据流(父->子),那么如果当子组件嵌套的很深层的时候,就会存在每一层嵌套的过程中都需要通过props进行传参,十分麻烦,要是在整个组件树中能有一个公共的“全局变量”那就好了, 每次我们需要相应的参数只要通过访问这个全局变量就可以达到我们想要的目的了,因此我们使用了上下文Context2. Cont...原创 2019-07-21 22:43:08 · 311 阅读 · 0 评论 -
React学习笔记之九:生命周期
9. React的生命周期具体的代码可以参考我的github现在我们已经可以使用React实现一些东西了:这里提供两个例子:todoList评论功能来谈谈JSX和React的生命周期JSXReact生命周期1. 一个简单的React组件的JSX原理// 简单的Headerclass Header extends Component { render() { ...原创 2019-07-21 19:32:43 · 322 阅读 · 0 评论 -
React学习笔记之八:表单数据的双向绑定
7.表单的双向数据绑定具体代码可以参考我的github中的my-app参考博文:React表单事件和取值通常需要获取用户在表单内填写的信息,实现对于用户数据的获取并上传,因此表单数据的绑定十分重要,这次我们将对单选,下拉,输入分别进行数据的绑定class Form extends Component { constructor(props) { super(props);...原创 2019-07-05 11:03:23 · 940 阅读 · 0 评论 -
React学习笔记之七:列表数据的渲染方法
7. 列表数据渲染列表数据非常常见,例如新闻列表,信息列表等,我们在vue中使用v-for对数据列表进行渲染,而react中渲染列表的方式没有语法糖,更为直接,上例子!class ListRender extends Component { constructor(props) { super(props); this.state = { userInfo:...原创 2019-07-03 15:44:25 · 402 阅读 · 0 评论 -
React学习笔记之六:组件间的参数传递
6. 组件间传参父组件向子组件传参子组件向父组件传参0. 上一波目前为止的App.js文件中我们的组件代码!我们来回顾下之前我们做了啥,目前为止完整的代码:import React, { Component } from 'react';import './App.css';class Header extends Component { render() { re...原创 2019-07-03 15:42:14 · 200 阅读 · 0 评论 -
React学习笔记之五:事件绑定监听
5.事件的监听上面我们是通过setTimeout实现对于state中content的变化,我现在通过点击事件来控制其中的参数class Content extends Component { constructor(props) { super(props); this.state = { content: '123', count: 0 ...原创 2019-07-03 15:39:00 · 522 阅读 · 0 评论 -
React学习笔记之四:动态参数绑定
4. 动态参数的设置state查询setState改变参数1.state进行查询// App.jsclass Content extends Component { constructor(props) { super(props); this.state = { content: '123' }; } render() { ...原创 2019-07-03 15:37:35 · 860 阅读 · 0 评论 -
React学习笔记之三:自定义一个React组件
3.自定义一个App.js组件在上一次我们创建的first-react中,我们打开App组件我们对App组件进行一个重写,写一个自己的Header组件!// App.jsimport React, { Component } from 'react';import './App.css';class Header extends Component { render() { ...原创 2019-07-03 15:34:37 · 300 阅读 · 0 评论 -
React学习笔记之十四: React hooks初探
React Hooks本文参考主要博文:阮一峰老师的 React-hooks 教程How to fetch data with React Hooks?useEffect 完整指南React-hooks 的官方文档demoReact hooks 的主要功能是让函数式组件能够模拟出自身的状态 state 和生命钩子函数常用的 React Hooks 函数包括useStateus...原创 2019-09-09 11:46:56 · 395 阅读 · 0 评论 -
React学习笔记之二:认识index.js
2.index.js先创建一个react工程create-react-app first-reactcd first-reactnpm start我们打开目录下的index.js文件,从入口文件开始认识react// index.jsimport React from 'react';// ReactDom用于页面渲染import ReactDOM from 'react-do...原创 2019-07-03 15:32:30 · 6890 阅读 · 1 评论 -
React学习笔记之一:安装和环境配置
1.React 安装脚手架的搭建npm install -g create-react-appcreate-react-app hello-react项目启动cd hello-reactnpm start插件配置Reactjs code snippetsReact代码补全神器,推荐快捷键使用详见:官方文档ES7 React/Redux/GraphQL/Rea...原创 2019-07-03 15:27:10 · 277 阅读 · 0 评论