2020年05月_hsany330

转载翻译：在 React Hooks 中使用 Typescript 小记

在 React Hooks 中使用 Typescript 小记最近在关注 Typescript 和 react hook 相关的知识，看到了这篇文章，还不错，get 到了。感谢作者的分享。原文：Notes on TypeScript: React Hooks原文作者简介：A. Sharif：专注于质量。软件开发。产品管理。https://twitter.com/sharifsbeat@busypeoplesgithubbusypeoples简介这些笔记有助于更好.

2020-05-29 17:53:12 403

转载 TypeScript 中使用React Hook

从 React V 16.8.0 和 React Native 0.59.0 版本开始, 引入了React Hook的概念。React Hook 在开发支持就考虑到了类型，所以很多Hook函数可以直接推断出他们的参数、返回值等类型，但也有一些场景需要我们显示声明类型。阅读本文前你需要了解React Hook 的基本用法，参考这里。下面会总结一下我们如何在 TypeScript 中使用React Hook。useState大多数情况下，useState 的类型可以从初始化值推断出来。但当我们初始化值为

2020-05-29 17:52:06 228

转载 typescript中使用type,class,interface定义数据结构的区别

typescript中声明一个类型，我们通常会有3种做法,他们都可以去继承：1.interfaceinterface User { name: string age: number}interface SetUser { (name: string, age: number): void;}interface SetUser extends User { age: number;}2.type type 可以声明基本类型别名，联合类型，元组等类型type...

2020-05-29 17:24:19 3665

转载 typescript中interface和type的区别

https://github.com/SunshowerC/blog/issues/7大家使用 typescript 总会使用到 interface 和 type，官方规范稍微说了下两者的区别An interface can be named in an extends or implements clause, but a type alias for an object type literal cannot.An interface can have multiple merged dec.

2020-05-29 17:22:45 700

转载 typescript - 一种思维方式（推荐阅读）

转载：https://segmentfault.com/a/1190000018953855电影《降临》中有一个观点，语言会影响人的思维方式，对于前端工程师来说，使用 typescript 开发无疑就是在尝试换一种思维方式做事情。其实直到最近，我才开始系统的学习 typescript ，前后大概花了一个月左右的时间。在这之前，我也在一些项目中模仿他人的写法用过 TS，不过平心而论，在这一轮系统的学习之前，我并不理解 TS。一个多月前，我理解的 TS 是一种可以对类型进行约束的工具，但是现在才发现 T

2020-05-29 13:57:51 316

转载从零搭建React+TypeScript的后台项目(二)

https://www.cnblogs.com/lodadssd/p/12587694.html里面的路由嵌套值得借鉴

2020-05-28 17:46:14 395

转载 react中配置代理解决跨域问题（推荐阅读）

在papackage.json里配置(目前不推荐了)//方法一：create-react-app脚手架低于2.0版本时候，可以使用对象类型，否则会报错//后面2项（pathRewrite，secure）可以不写"proxy":{ "/api":{ "target":"http://m.kugo.com",//目标服务器 "changeOrigin": true//默认false，是否需要改变原始主机头为目标URL "pathRewrite": {"^/api

2020-05-28 15:30:10 2588

转载小技巧：使用useContext和useReducer构建小型redux（实践可行推荐阅读）

对于两个子组件间的通信，相信我们开发中并不少见，基于我们都不怎么喜欢redux的坚持…...其实我一直在用团队老大此前写的globalBus持续真香，我在上一篇文章也有讲到那玩意的原理和实现，但是老大说现在可以不用啦，新版hooks两个api联用，更香，于是我简单的实践了一番，发现…真香。首先你需要在两个子组件之上的一层架设你的context chilFirst和ChildSecond是我建立的两个组件，我们将会从first组件发dipatch，在second组件展示变化的数据，这个场景开发中经常使用。

2020-05-28 14:27:57 1409

转载 React redux-react-hook

import React, { useState, useEffect, useCallback } from 'react'import { useDispatch, useMappedState } from 'redux-react-hook';import './styles.less'import { hook } from '@/actions/hook'import _ from 'loadsh'export default function Counter() { co.

2020-05-27 18:36:40 350

转载如何在react的Hook中异步请求数据

如何在react的Hook中请求数据原文：How to fetch data with React Hooks?In this tutorial, I want to show you how to fetch data in React with Hooks by using the state and effect hooks. We will use the widely known Hacker News API to fetch popular articles from the tech

2020-05-27 16:40:12 4050

转载 React Hooks与Redux的配合及状态管理方案(清晰推荐阅读)

Hooks面世已有一段时间，但目前在状态管理方面，还未正式推出官方解决方案。因此目前社区中hooks主要有这么三种方案来解决应用的状态管理问题使用Redux-React-Hook库替代React-redux，与Redux一同配合使用useReducer、useContext等纯hook函数替代react-redux，与Redux一同配合使用useReducer、useContext等纯hook函数完全替代react-redux与Redux，完全通过hooks的方式管理应用的状态在这几个方案之中

2020-05-27 11:48:13 1565

转载 react路由鉴权 / 路由守卫（常用经实践可行推荐阅读）

react路由鉴权 / 路由守卫首先路由鉴权就是在访问一个页面时判断是否需要权限，比如电商App结算账单的时候需要登录用户的账号路由守卫就是在该页面需要登录用户的情况下去判断是否登录总的来说就是判断权限是鉴权判断是否登录就是守卫我那这个电商给大家举个例子项目的不同，要求不同，到时候根据需求去完成就行下面是代码创建一个SafeRouter.js文件import React from 'react';import {Redirect,Route} from 'react-rout.

2020-05-27 10:21:16 1434

转载 react路由守卫的简易实现，以及利用token实现登录和退出（简易不常用）

react由于没有自行设置路由守卫。所以登录和退出时需要自己判断是否获得token值并且做出登录和退出的路由跳转操作。首先我们通过接口获得token值。 window.sessionStorage.setItem('token',res.data.token) // console.log(sessionStorage.getItem('token')); if(sessionStorage.getItem('token')){ //刷新页面用来重新渲染app...

2020-05-27 10:18:39 1135

转载 vue-router中的导航守卫与 axios拦截器的区别

导航守卫的作用导航守卫是在vue-router中的提供的路由跳转的时候做一些事情，根据给定的条件来进行跳转全局守卫 router.beforeEach 主要是用来验证用户的登陆状态。局部导航守卫 router.beforeEnter 主要是用来守卫当前路由。无论是全局守卫还是局部守卫，每个守卫的方法都有三个参数， to, from, nextto: 即将要进入的路由对象from: 当前导航要离开的路由next: 一个回调函数，一定要调用这个方法，不然路由不会继续往下 resolve 类似

2020-05-26 19:37:25 681

转载 React中使用if else 条件判断（转）

在react中用jsx渲染dom的时候经常会遇到if条件判断，然而在jsx中竟是不允许if条件判断的。以下有几种判断方式，可以根据自己的应用场景，挑选适合的。方案一：class HelloMessage extends React.Component {render (){let userMessage;if (this.props.loggedIn) {userMessage = (<span><h2>{ Welcome Back ${ this.props.na

2020-05-26 11:37:54 5672

转载 React Hook使用☾超详细☽详解

Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。同时，它是100% 向后兼容的，不包含任何破坏性改动。在我们讲解React Hook之前，先讲一下为什么要使用它，就好比谈对象，你得先搞清楚你喜欢他什么。我们知道，在没有 hook 之前，我们写一个 react 项目总是避免不了下面的代码： 1 2 3 4 5 6 7 8 9 10 .

2020-05-20 12:35:30 331

转载 React hook 10种 Hook （详细介绍及使用）

Github demo 地址, 掘金地址附上github地址 10个hook demo 点一点star，谢谢咯！github地址：https://github.com/babybrotherzb/React-Hook掘金地址：https://juejin.im/post/5dc421c4e51d45381b281ccfReact Hook是什么？React官网是这么介绍的： Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的

2020-05-20 12:32:38 3589

转载 React-Router v6 新特性解读及迁移指南

https://blog.csdn.net/qiwoo_weekly/article/details/105463089

2020-05-18 19:45:04 203

转载 CSS flex 布局里面的靠右对齐

使用 flex 布局后，利用下面样式靠右显示：justify-content: flex-end;如果需要设置右边距可设置距离右边的距离：margin-right: 20rpx;需要使用绝对定位给子集加一个position:absolute;right:10px;给父级加一个position:relative;（因为absolute定位是相对于最近的一个不为static定位的元素的绝对定位）————————————————版权声明：本文为CSDN博主「前端小绵羊」的原创文章，遵循CC

2020-05-18 19:30:35 28759 2

转载 React-Router 的 Hooks 实现(推荐阅读)

前言Hooks大行天下之后，关于如何使用 Hooks，如何替代Redux实现状态管理等文章甚嚣尘上，甚至介绍Redux-Hooks实现的文章也有很多，唯独少了全家桶三件套之一的React-Router的Hooks方法，让人有点惊异。其实React-Router4.0版本已经是一两年前的产品了，作者发布4.X时候也明确说过，除非React有重大更新，不然他们不会过多改动React-Router的实现，Hooks可以说让他们有一种好久不见的感觉。5.1版本的React-Router，带来了useHisto

2020-05-18 18:17:15 700

转载 React Router 5.1 发布，React 路由解决方案

React Router 一个用于React.js的路由解决方案（routing solution）。它轻松可以同步你的 app 和 URL，同时给嵌套，转换，和服务端渲染一流的支持。5.1版本已经发布，如下：添加了新hook，包括 useParams、useLocation、useHistory和useRouteMatch等在<Link>中添加对forwardRef的支持在<Link to>和<NavLink to>中添加对函数...

2020-05-18 17:10:08 260

转载 React Router 5.1.0使用useHistory做页面跳转导航

从React Router v5.1.0开始，新增了useHistory钩子（hook），如果是使用React >16.8.0，编写以下函数组件，使用useHistory即可实现编程时页面跳转导航。示例：import { useHistory } from "react-router-dom";function HomeButton() { const history = useHistory(); function handleClick() { history.push

2020-05-18 17:07:36 34928 3

转载重置样式reset.less

html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, ca

2020-05-18 16:20:58 1993

转载 react.js Hooks路由跳转

useHistory钩子允许您访问可能用于导航的历史实例。import { useHistory } from "react-router-dom";function HomeButton() { let history = useHistory(); function handleClick() { history.push("/home"); } return ( <button type="button" onClick={handleClick}.

2020-05-18 10:50:55 2773 1

转载 react项目搭建和react devtools安装

转载：https://blog.csdn.net/weixin_36985768/article/details/89355863

2020-05-15 17:05:41 135

转载配置hooks的eslint-plugin-react-hooks

eslint-plugin-react-hooks配置在使用create-react-app脚手架生成项目后，使用hooks特性没有eslint提示报错信息。可安装 eslint-plugin-react-hooks并配置package.json中的eslintConfig即可安装npm install eslint-plugin-react-hooks --save -devyarn add eslint-plugin-react-hooks --dev （或者）配置package.js

2020-05-15 16:06:45 3158

转载 useEffect和useLayoutEffect的区别

useEffect和useLayoutEffect区别useEffect基本上90%的情况下,都应该用这个,这个是在render结束后,你的callback函数执行,但是不会block browser painting,算是某种异步的方式吧,但是class的componentDidMount 和componentDidUpdate是同步的,在render结束后就运行,useEffect在大部分场景下都比class的方式性能更好.useLayoutEffect这个是用在处理DOM的时候,当你的

2020-05-15 15:48:39 1410

转载 react hook 中 useImperativeHandle的使用（React Hooks中父组件中调用子组件方法）

import{useState, useImperativeHandle,forwardRef} from'react';// props子组件中需要接受refletChildComp = (props,ref) => {// 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用useImperativeHandle(ref, () => ({// changeVal 就是暴露给父组件的方法c...

2020-05-15 15:23:12 3132 1

转载 React的Portals的用法插槽（推荐阅读）

ReactDom提供了这样一个apiReactDOM.createPortal(child, container)，也叫插槽(Portals)能将子节点渲染到父组件的 DOM 层次之外child 可以是ReactElement, Arrays, fragments, Portals, String, numbers,Booleans, null, ...container 是dom元素下面代码是创建一个Foo组件（表现为200*200的div），放到body的中央位置。import Rea

2020-05-15 14:49:59 426

转载 react组件中的constructor和super小知识

转载：https://www.cnblogs.com/faith3/p/9219446.html由ES6的继承规则得知，不管子类写不写constructor，在new实例的过程都会给补上constructor。所以：constructor钩子函数并不是不可缺少的，子组件可以在一些情况略去。结论：可以不写constructor，一旦写了constructor，就必须在此函数中写super(),...

2020-05-15 12:38:07 249

转载 React中获取DOM节点的两种方法（了解就行）

React提供的获取DOM元素的方法有两种，一是react-dom中的findDOMNode()，二是refs。1、findDOMNodefindDOMNode通常用于React组件的引用，其语法如下：import ReactDOM from 'react-dom';ReactDOM.findDOMNode(ReactComponent);当组件被渲染到DOM中后，findDOMNode会返回该组件实例对应的DOM节点。示例：componentDidMount()..

2020-05-15 12:08:40 7882

转载 React—useRef

相信有过React使用经验的人对ref都会熟悉，它可以用来获取组件实例对象或者是DOM对象。而useRef这个hooks函数，除了传统的用法之外，它还可以“跨渲染周期”保存数据。首先来看一下它传统的用法：import React, { useState, useEffect, useMemo, useRef } from 'react';export default function App(props){ const [count, setCount] = useState(0);.

2020-05-15 10:09:58 677

转载 React中的受控组件和非受控组件

受控组件假设我们现在有一个表单，表单中有一个input标签，input的value值必须是我们设置在constructor构造函数的state中的值，然后，通过onChange触发事件来改变state中保存的value值，这样形成一个循环的回路影响。也可以说是React负责渲染表单的组件仍然控制用户后续输入时所发生的变化。就像上面这样，input中的value值通过state值获取，onChange事件改变state中的value值，input中的value值又从state中获取。。。非受控

2020-05-15 10:02:31 155

转载复用组件逻辑从HOC 到 Render Props 再到 hook

从React 16.8 稳定版hook发布近一年多，使用hook并不普遍，原因可能有两方面: 一、官方并没有完全取代class；二、迭代项目完全hook话需要成本，官方也不推荐。恰巧新项目伊始，就全面采用hook，这也是写这篇文章的原由，接上一篇全面认识hook，这篇主要是自定义hook的一些实践，不一定是最佳，希望我的一点分享总结，能给认真阅读的你带来收益。源码在这，，，，在线demo。正文下面是项目中一些有代表性的hook，目前也是项目中的一些最佳实践。???? 1. HOC 到 Rend

2020-05-14 17:26:49 282

转载手写8个常用的自定义hooks（推荐阅读）

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。本文是一篇以实战为主的文章，主要讲解实际项目中如何使用hooks以及一些最佳实践，不会一步步再介绍一遍react hooks的由来和基本使用，因为写hooks的文章很多，而且官网对于react hooks的介绍也很详细，所以大家不熟悉的可以看一遍官网。你将收获react hooks核心API使用以及注意事项实现一个小型redux实现自定义的useState

2020-05-14 17:25:09 3843

转载自定义定时器hook(推荐阅读)

1. 通过useRef，useEffect定义一个定时器hookimport { useRef, useEffect } from 'react';export default function useInterval(callback, delay) { const latestCallback = useRef(() => {}); useEffect(() => { latestCallback.current = callback; .

2020-05-14 17:15:27 733

转载 useMemo和useEffect有什么区别？(使用场景推荐阅读)

本文可能会让你感觉到很啰嗦，我想尽量线索清晰，但是好像有点失败...1. 背景先看下面这段代码import React, {Fragment} from 'react'import { useState, useMemo } from 'react'// 产品名称列表const nameList = ['apple', 'peer', 'banana', 'lemon']const example = (props) => { // 产品名称、价格 co.

2020-05-14 16:11:15 14703 7

转载 useMemo与useCallback使用指南

上一篇文章介绍了useEffect的使用，接下来准备介绍useCallback和useMemo。回顾在介绍一下这两个hooks的作用之前，我们先来回顾一下react中的性能优化。在hooks诞生之前，如果组件包含内部state，我们都是基于class的形式来创建组件。当时我们也知道，react中，性能的优化点在于：调用setState，就会触发组件的重新渲染，无论前后的state是否不同父组件更新，子组件也会自动的更新基于上面的两点，我们通常的解决方案是：使用immutable进行比较，在

2020-05-14 15:14:13 450

转载 useMemo和useCallback的使用

useMemoconst memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized 值。这种优化有助于避免在每次渲染时都进行高开销的计算。也就是说useMemo可以让函数在某个依赖项改变的时候才运行，这可以避免很多不必要的开销。举个例子：不使用useMemofunction Example

2020-05-14 15:03:16 571

转载 hooks子组件修改父组件值（推荐阅读）

刚刚学习hooks ，写个dome记录一下，亲测可用父组件import React , { useState ,createContext ,useContext} from 'react';import Zi from './zi'// 创建上下文export const NumContext = createContext();function Fu (){ const [ num ,setNum ] = useState(0); return ( &l...

2020-05-14 14:27:36 3165

symbian 视频播放源码

空空如也