React
文章平均质量分 63
chen_晨风
Talking is cheap,show me a code
展开
-
[面试基础题]控制红绿灯
js版 实现红绿灯题目:默认情况下,红灯亮20秒,并且最后5秒闪烁绿灯亮20秒,并且最后5秒闪烁黄灯亮10秒,次序为:红-绿-黄-红-绿-黄灯的个数、颜色、持续时间、闪烁时间、灯光次序都可配置,如:lights=[{color: ‘#fff’, duration: 10000, twinkleDuration: 5000}, … ]js版function sleep(duration) { return new Promise((resolve) => { setTimeo原创 2021-03-26 12:44:56 · 668 阅读 · 0 评论 -
[Hox库状态管理思考 二] 类实现组件的数据订阅
上文我们分析了hox 如何将 custom hooks提升到全局阅读hox对状态管理的思考类组件的数据订阅前篇首先我们来说下HOC。它是一种复用组件逻辑技巧。高阶组件是参数为组件,返回值为新组件的函数const EnhancedComponent = higherOrderComponent(WrappedComponent);下面举例说明:首先我们有一个Counter类组件如下:interface IProps{ count:number; add:()=>.原创 2021-03-19 17:58:22 · 699 阅读 · 0 评论 -
[必须要了解的React状态管理]阅读hox对状态管理的思考
阅读 hox对状态管理的思考对于react 状态管理已经是老生畅谈的话题,官方没有给出最佳实践因此市面上关于状态管理的探索从未停止过。本文就 hox库探索做一个总结,建议按本文顺序阅读。开篇组件状态定义对于 hooks推出之后,对于状态定义也更加灵活,下面关于组件定义状态如下:function Counter() { const [count, setCount] = useState(0) return ( <div> <p>count:{cou原创 2021-03-15 17:50:29 · 785 阅读 · 2 评论 -
【需要了解的FLIP】FLIP动画在 react中的应用
本文翻译自 FLIP animation in react[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a4YHrSjn-1604052655260)(https://github.com/aholachek/react-flip-toolkit/raw/master/example-assets/listanimations.gif)][外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-21L53RZZ-1604052655262)(htt.翻译 2020-11-01 23:17:24 · 1151 阅读 · 0 评论 -
React项目中 那些实用的TS技巧
⚠️⚠️⚠️ 文章来源与网络中知识总结与提炼,想要了解更多点击文末中链接自行了解文章目录组件默认值联合类型应用函数组件中应用范型渲染children自定义hooks返回值links组件默认值//function componenttype GreetProps = { age: number } & typeof defaultProps;const defaultProps = { age: 21,};const Greet = (props: GreetProps) =&.原创 2020-09-06 22:03:45 · 3536 阅读 · 0 评论 -
Redux源码学习篇(二) -- react-redux实现
本文会逐步探索redux到应用分为3个系列redux 实现react-redux 实现redux中间件的应用与实现文章目录作用核心实现ProviderConnect反思作用它帮助我们连接UI层和数据层。即帮我们合并一些重复操作即获取状态getState、修改状态dispatch、订阅更新subscribe。因此提供了两个核心API:Provider: 接收 store,并将其挂载到context上,目的是为了后代组件获取状态Connect: 将 state、props传递组件并自动.原创 2020-06-21 20:55:51 · 236 阅读 · 0 评论 -
React 设计模式与最佳实践 个人总结
React 设计模式与最佳实践 个人总结高阶组件高阶组件即接受组件返回组件,形式如下:const HoC=Component=>EnhanceComponent案例: 对获取数据封装对数据获取渲染,我们会这么做…export default class UserList extends Component { state = { list: [] ...原创 2019-07-19 20:29:31 · 664 阅读 · 0 评论 -
[20年必须要了解的] graphQL
什么是GraphQL?新的API标准、它由Facebook 2015年开源声明式数据获取GraphQL服务公开单个端点并相应查询可以与任何编程语言和框架一起使用与 REST对比优势按需获取数据前端的快速产品迭代对于后端请求的数据有更细致的了解强类型系统定义API的功能???? 要了解有关使用GraphQL的主要原因更多信息 click this...原创 2020-01-08 10:11:33 · 1226 阅读 · 0 评论 -
React Hooks 版实现 Redux
React-hook版 状态管理使用React Hooks和Context API模拟实现 Redux在React世界中,考虑状态管理时想到第一个想法就是使用Redux库。Redux提供了一个可预测的状态容器来集中应用程序的全局存储。借助connect,mapStateToProps,mapDispatchToProps和bindActionsCreator。Redux可以轻松创建和管理...翻译 2019-12-27 17:37:24 · 1819 阅读 · 0 评论 -
react 常用的组件设计模式
本仓库主要是学习 react patterns 搭建的个人仓库,下面是我的一些模式总结仓库地址文章目录基础使用(callback)复合组件(Compound component)进一步讨论render PropsFunction as Child Componentstate Reducer搭建基础toogle 组件添加 state ReducerProvider Pattern高阶组件(...原创 2019-10-20 22:21:49 · 746 阅读 · 0 评论 -
learning react depth
文章目录parcelinstallusecss in jsinstallusetypescipttest** 可以根据我提交记录去查看相关内容** click here学习原地址和文档地址如下:原仓库地址原文档地址parcelinstallnpm install -g parcel-bundler.babelrc{ "presets": ["@babel/preset-...原创 2019-10-06 18:09:57 · 275 阅读 · 0 评论 -
React 轮播图的正确打开姿势
下面只关注 react 轮播图中的知识点,并不会去关注样式实现在 components 目录下创建 slideShow文件import React, { Component, Children } from 'react'export default class SildeShow extends Component { interval: any; state = ...原创 2019-09-17 16:24:17 · 1368 阅读 · 0 评论 -
Redux 源码解读(三)之 中间件机制
什么是中间件中间件其实是对某些功能的一个增强,类似前置处理,在Redux中是将 dispatch 增强改造的函数(中间件)先存起来,然后提供Redux.Redux 责依次执行 这样每一个中间件都对dispatch 依次进行改造,并将改造后的dispatch next 向下传递,即将控制权转移给下一个中间件,完成进一步的增强。redux中使用import { createStore, ...原创 2019-09-16 19:46:31 · 426 阅读 · 0 评论 -
Redux源码学习篇(一) -- redux实现
关于redux 源码学习系列文章,是通过阅读 《react 状态管理与同构》后的读书笔记和心得。简单入手案例场景: 现在有一个计数器,+、-(或者点赞场景),现在用redux如何记录呢? import {createStore,combineReducers } from 'redux' //actionconst LIKE = "LIKE";const UNLIKE = "UNL...原创 2019-09-16 16:18:32 · 200 阅读 · 0 评论 -
React 生命周期函数执行顺序
目录一、数据加载时二、数据更新时三、组件销毁一、数据加载时constructor-->componentWilMount-->render-->componentDidMount注:在版本16.4之后,废除了componentWillMount,则顺序如下:constructor()-->static getDerivedStateFromPro...原创 2018-11-14 15:33:34 · 581 阅读 · 0 评论 -
关于React中数据的更新操作
关于数据更新操作,如果首次接触React的话,我们可能会想到给将更新的数据写到定时器中,让数据不断改变,像这样做:function tick() { const element = ( <div> <h1>Hello, world!</h1> <h2>It is {new Date().toLocaleTim...原创 2018-11-12 21:19:51 · 9035 阅读 · 1 评论 -
React --- TypeScript使用 antd 中 from 与Modal的一次总结
目录前言表单的使用模态框的使用模态框中接受表单信息前言最近在学React、项目中选择了ts、与antd来开发项目。第一次结束,难免会碰到许多坑,在这里记录一下,希望会对需要的朋友有所帮助。Node:(React 版本选择的是hooks,所以代码中会有所不同,有兴趣的可以先去官网 看下Hooks )表单的使用关于form中代码可以去antd直接选择自己需要的cop...原创 2018-11-23 10:44:33 · 5651 阅读 · 1 评论 -
关于React-Router4.x中获取参数总结
目录前言React-router与React-router-dom的选择路由跳转获取参数的方法准备工作一、配置动态路由二、get传值前言React-router与React-router-dom的选择React-router React-router提供一些router的核心api,包括Router,Route,Switch等,但是没有提供dom操作进行跳转...原创 2018-11-26 22:46:53 · 1464 阅读 · 0 评论 -
Redux入门与小案例
目录Redux基础Redux介绍Redux工作流Redux安装Redux集成(React)案例应用1.创建相应的文件夹2. Action模块内容3. Reducer内容4. store内容5.使用Provider作为项目根组件 index.tsx6. 将react组件与redux连接redux中使用装饰器Redux调试工具Redux基础...原创 2018-12-18 00:37:09 · 316 阅读 · 0 评论 -
redux-thunk使用
什么是thunk?被 dispatch 的 function 会接收 dispatch 作为参数,并且可以异步调用它。这类的 function 就称为 thunk安装redux-thunk npm install redux-thunk --save在react运用import {counter} from './redux/index.redux'import {...原创 2019-01-06 23:06:56 · 322 阅读 · 0 评论 -
深入学习react和redux 之 redux 总结
文章目录Redux的基本原则容器组件和木偶组件React和Redux应用规范和要点模块化应用要点代码文件的组织方式按角色组织按功能组织模块接口状态树的设计React组件在React-redux中性能优化样式写法优化props 函数传递方式React组件访问服务器的优缺点异步操作的终止测试篇构建测试目录和文件测试代码测试套件(describe函数)Redux的基本原则1. 唯一数据源2. 保持...原创 2019-01-15 15:15:06 · 226 阅读 · 0 评论 -
构建 react 中可重用灵活的表单组件
构建 react 中可重用灵活的表单组件受控组件与非受控组件非受控即 组件内部不存在状态,组件的状态由父组件传入;一般该类型组件用来做数据展示,但不可控制非受控组件通常我们会写成纯函数想这样:import React from 'react'export default function UncontrollForm({user}){ return( &amp;lt;d...原创 2019-01-23 12:22:13 · 286 阅读 · 0 评论 -
hook 写一个Loading案例
原文地址我们在实际的业务场景下,遇到一个需求:对于一些加载比较慢的资源,组件最初展示标准的Loading效果,但在一定时间(比如2秒)后,变为“资源较大,正在积极加载,请稍候”这样的友好提示,资源加载完毕后再展示具体内容。对于一个展示的组件来说,我们希望的逻辑就是这样的:const PureDisplay = ({isLoading, isDelayed, data}) =&amp;amp;gt; {...翻译 2019-02-14 12:06:12 · 1096 阅读 · 0 评论 -
next.js 集成antd 小结
开篇关于next集成Ant Design,网上方案不全也有可能由于next升级导致不能使用,在这里推荐next官方demo案例,如果你想直接使用则下载demo即可,下面是我在摸索中的一些总结。集成import style files首先无论你引入那种UI,在next中是不支持加载.css、.scss、.less文件,下面采用官方方案,以css为例:npm install --save ...原创 2019-08-12 23:46:02 · 1447 阅读 · 0 评论 -
react 手把手写一个登录界面,还能从中能学到什么?
需求作为一个前端码农,对于登录页面和相关业务已经熟烂于心。今天我们一起从登录出发,看我们能学到什么?提示:下面采用 react+typescirpt 环境书写结果截图如下原始做法从react视角出发,我们可能会在pages文件夹下创建如下结构:sin-in.component.tsximport React from 'react'import './sign-in.styl...原创 2019-08-13 10:49:26 · 4353 阅读 · 3 评论 -
关于React 中父子组件通信
目录目录一、父组件与子组件通信1.父组件给子组件传值2.父组件给子组件传方法3.父组件给子组件传自己本身的组件4. 父组件获取子组件的数据二、子组件对父组件值类型的设置三、通过context传递定义步骤使用一、父组件与子组件通信1.父组件给子组件传值 1.在调用子组件的时候定义一个属性 <Header msg="我是子组件 首页"&g...原创 2018-11-14 14:10:26 · 333 阅读 · 0 评论