react
关注
分享
扫一扫
文章平均质量分 70
react前端学习总结
一杯清泉
坚持初心，不负梦想！！！
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
Android项目接入React Native方案
本篇文章主要介绍在现有的Android项目中接入React Native的接入过程，分析接入过程中的一些问题和解决方案，接入RN的平台为Android，开发环境为Mac，开发工具为Android Studio。原创 2023-01-18 15:09:31 · 6302 阅读 · 1 评论 -
React 自定义组件实现手写签名
【代码】React 自定义组件实现手写签名。原创 2022-12-25 14:19:30 · 524 阅读 · 0 评论 -
H5中常见的 Android 和 iOS 兼容性问题
最好在代码中不要主动focus()，可能会在真机上引起页面布局被iOS 软键盘顶上去，而Android、Google、Safair 中则正常。原创 2022-10-24 13:16:41 · 2529 阅读 · 0 评论 -
React实现优雅的弹窗
实现弹窗的原理关键在于,如何将弹窗组件挂载到任意的dom上，参考weui.js，提供了思路，可以通过append将元素添加到指定的父节点上，来实现弹窗的显示，隐藏的时候在移除该元素即可，如下示例：在react同样可以使用该思路来实现，弹窗的显示和隐藏。原创 2022-09-13 11:35:57 · 6198 阅读 · 0 评论 -
常用hooks总结
1、useEffact参考：https://www.cnblogs.com/guanghe/p/14178482.html2、useState作用：更新变量，触发render。const [loading, setLoading] = useState(true);当loading变化时候会触发render。3、useMemo作用：解决hooks会触发多次无用的渲染问题。如果useMemo(fn, arr)第二个参数匹配，并且其值发生改变，才会多次执行执行，否则只执行一次，如原创 2022-07-25 08:50:18 · 2072 阅读 · 2 评论 -
useEffect、useMemo、useCallback使用场景分析
getName()会在每次组件渲染的时候执行dom，尽管name没有变化，我们需要让name变化的时候才渲染dom，否则保持原有的数据，这时候就用到了useMemo。原创 2022-08-20 21:18:54 · 4098 阅读 · 1 评论 -
React路由6.0
上次介绍了react路由5.0的一些用法，这次介绍最新的路由6.0用法，相比5.0变化还不少。路由5.0：https://blog.youkuaiyun.com/yoonerloop/article/details/124070341ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById('roo......原创 2022-06-08 22:15:45 · 800 阅读 · 0 评论 -
ref使用详解
一、字符串形式的ref（官方已过时）ref可以理解成打一个标识，类似于一个id，最终会收集到this对象的refs里面。<input ref='input1' type='text' placeholder='输入内容点击按钮' /><button onClick={this.showData}>点我提示</button><input ref='input2' onBlur={this.showData2} type='text' pl...原创 2022-05-25 20:24:41 · 4979 阅读 · 0 评论 -
redux使用详解
一个状态管理的JS库，用于数据的共享。结构如下：安装：yarn add redux一、简化版的redux1、src/reducer/store.js//引入createStoreimport {createStore} from 'redux'//引入服务的reducerimport reducer from "./reducer";export default createStore(reducer)2、src/reducer/reducer.j...原创 2022-05-01 16:12:40 · 1623 阅读 · 0 评论 -
React中的路由
react推出了react-router的路由管理插件，实现了路由的核心功能，分别给web、reactnative、anywhere三个平台。 基于react-router实现的react-router-dom是给web端使用的路由，加入了在浏览器运行环境下的一些功能，核心基于history实现，分位hash路由和h5路由，其中h5路由兼容性有点差，需要后端支持，hash路由兼容行非常好，不需要后端支持。本博客介绍react路由基于react-router-dom@5.3.0，v6.0有所变化。一、路由原创 2022-04-23 13:19:30 · 1946 阅读 · 0 评论 -
listTodo项目二次练习
通过该项目熟悉，react的事件绑定、父子之间的数据传递，和分模块设计的理念，没有涉及到太多的东西，相比上次知识点用的比较少，但是更加注重细节和规范，显示效果如下：项目结构如下： 项目划分一个入口，四大组件分别：顶部的输入框、中间的list，list显示的item以及底部的footer，下面分别介绍。一、package.json{ "name": "my-app2", "version": "0.1.0", "private...原创 2022-05-17 20:12:54 · 400 阅读 · 0 评论 -
React脚手架结构介绍
Create React App 是一个官方支持的创建 React 单页应用程序的方法，如下：npx create-react-app my-appcd my-appnpm start结构如下：一、public文件夹 该文件是react项目的入口文件：<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"...原创 2022-04-04 11:49:41 · 1334 阅读 · 0 评论 -
React中表单数据提交获取数据的几种写法
一、非受控组件即：先用现取数据class MyComponent extends React.Component { render() { return ( <div> <form onSubmit={this.handleSubmit}> 用户名：<input ref={(e) => this.username = e} type='tex原创 2022-04-09 23:05:56 · 7168 阅读 · 1 评论 -
React中this指向问题
render() { return ( <div> <h1>{this.state.data}</h1> <button onClick={this.click1}>测试1</button> </div> )}click1() { this.setState({ data:'click1' })}像这.原创 2022-04-04 09:45:12 · 562 阅读 · 0 评论 -
React 使用webpack打包
一、项目创建1、新建一个项目文件夹，打开终端，切换到到项目目录下：npm init -y这时候使用webstorm等高级的编辑器打开项目执行下面步骤效果会更直观。2、新建一个文件夹public，在文件夹内创建index.html文件，添加：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title原创 2022-03-27 11:15:15 · 6526 阅读 · 2 评论 -
React开发CMS总结（路由管理）
页面路由结构图：1、引入routeryarn add react-router-dom2、入口文件indexReactDOM.render( <IRouter/>, document.getElementById('root'));3、路由routerexport default class IRouter extends React.Component { render() { return (原创 2021-04-20 10:43:56 · 366 阅读 · 0 评论 -
React开发CMS总结（基础配置）
1、配置less和antyarn add webpack@4.44.2：注意版本，高版本出现问题yarn add less-loader：less解析插件yarn ejcet：暴露配置信息yarnadd antdconfig/webpack.config.js设置参考：https://blog.youkuaiyun.com/yoonerloop/article/details/1153619982、Promise是异步编程的一种解决方案，其实是一个构造函数，自己身上有all、reject、r.原创 2021-04-17 10:05:45 · 631 阅读 · 0 评论 -
React支持less
1、安装less-loaderyarn add less-loader2、暴露配置信息yarn ejcet3、找打config/webpack.config.js4、添加lessRegex和lessModuleRegex// style files regexesconst cssRegex = /\.css$/;const cssModuleRegex = /\.module\.css$/;const sassRegex = /\.(scss|sass)$/;原创 2021-03-31 22:00:55 · 434 阅读 · 0 评论 -
仿简书网站技术栈总结-练习
一、项目技术1、适配PC半浏览器兼容样式 https://meyerweb.com/eric/tools/css/reset/ 2、引入依赖 yarn add redux yarn...原创 2021-02-19 15:48:04 · 284 阅读 · 0 评论 -
react-redux的reducer的combineReducers
在大型项目开发中，分为很多个组件模块，如果很多个action的处理都放在一个reducer里面，会导致reducer的代码非常的长，看起来也不方便，这时候需要把很长的reducer拆分，分布到各个UI组件或者模块的reducer中，然后通过总的一个reducer进行一个合并。这时候就需要用到了combineReducers。combineReducers 辅助函数的作用是，把一个由多个不同 reducer 函数作为 value 的 object，合并成一个最终的 reducer 函数，然后就可以对这个原创 2021-01-03 17:31:58 · 963 阅读 · 1 评论 -
react-redux的connect优化todolist
在上一节中todolist使用react-redux加上中间件对todolist做了一个优化，使代码扩展性更强，但是在UI组件中存在大量的函数方法和方法的绑定以及props传值，如下：import React, {Component, Fragment} from "react";import store from "./store";import {getDeleteItemClick, getInputChange, getSubmitClick, getTodoList} from "./s原创 2021-01-02 16:15:59 · 221 阅读 · 0 评论 -
react-redux的connect用法详解
一、UI组件和容器组件React-Redux 将所有组件分成两大类：UI 组件和容器组件。UI 组件：只负责 UI 的呈现，不带有任何业务逻辑，没有状态state值的使用，所以的参数是通过this.props获取。容器组件：负责管理数据和业务逻辑，不负责 UI 的呈现，有业务逻辑，并且使用Redux提供的API。对于上面的AppUI就是一UI组件，App就是一个容器组件。二、connectReact-Redux提供connect方法，用于从 UI 组件生成容器组件。connect的意原创 2021-01-02 11:17:03 · 23003 阅读 · 4 评论 -
react-redux实现todolist功能
一、redux介绍2014年 Facebook 提出了 Flux 架构的概念，引发了很多的实现。但是使用中发现很多不完美的地方，2015年，Redux 出现将 Flux 与函数式编程结合一起，关系如下：1、引入reduxyarn add redux2、store即store/index.js，该导出的store对象包含所有数据。如果想得到某个时点的数据，就要对 Store 生成快照。这种时点的数据集合，就叫做 State。当前时刻的 State，可以通过store.getState原创 2020-12-31 10:43:01 · 1045 阅读 · 0 评论 -
React实现todolist功能
一、index.jsReactDOM.render( <React.StrictMode> <TodoList /> </React.StrictMode>, document.getElementById('root'));二、TodoList1、constructor constructor(props) { super(props); this.state = {原创 2020-12-26 09:57:50 · 767 阅读 · 0 评论 -
React常用知识总结
1、状态更新statusimport React from "react";class App1 extends React.Component { constructor(props) { super(props); this.state = { num: 1 } } changeHandler(e) { this.setState({ num: e.tar原创 2020-12-01 23:01:24 · 458 阅读 · 0 评论 -
React hooks函数的使用方法
1、箭头函数import React, {useState} from "react";const App1 = () => { const [count, setCount] = useState(0); return ( <div> <button onClick={event => setCount(count + 1)}>count:{count}</button> &l原创 2020-11-28 10:58:34 · 1934 阅读 · 0 评论