浩星

前言： 在react16.8版本后新增加了hook，这里来记录下hook里面的State Hook具体使用：1、引入import React, { useState } from 'react'2、定义一个变量digitalFlopData ，并提供更改他的方法为setData，注意，这里的setData不是固定的，是可以自己定义的export default () => { const [digitalFlopData, setData] = useS...

摘自官网：入口目录：Hook 简介Hook 概览使用 State Hook使用 Effect HookHook 规则自定义 HookHook API 索引Hooks FAQHook 简介Hook是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。import React, { useState } from 'react';function Example() { // .

来源：XJBT的https://www.jianshu.com/p/fd17ce2d7e46本文是阅读A Complete Guide to useEffect之后的个人总结，建议拜读原文理解hooks工作机制可以这样说，在使用了useState或是useEffect这样的hooks之后，每次组件在render的时候都生成了一份本次render的state、function、effects，这些与之前或是之后的render里面的内容都是没有关系的。而对于class component来说，sta

想必近几年前端的数据可视化越来越重要了，很多甲方爸爸都喜欢那种炫酷的大屏幕设计，类似如下这种：随便找的.jpg遇到的这样的项目，二话不说，echarts或者antv，再搭配各种mvvm框架（react，vue），找二次封装过的组件，然后开始埋头开始写了，写着写着你会发现，如何适配不同屏幕呢？css媒体查询吧，用vw吧，哪个好点呢。其实写到最后，我觉得都不好对于这种拿不定主意的情况呢，最好还是参考大厂的做法，于是去找了网易有数，百度suger等，他们是如何写这样的页面的提供2个他们的

前言： react中实现取色器的效果官网地址：入口源码：https://github.com/casesandberg/react-color.git实现效果：步骤：第一：引入npm install react-color --save第二：注册import React from 'react'import { SketchPicker } from 'react-color'class Component extends React.Comp...

前言： react有一个第三方插件 ReactFileReader 可以实现这个功能。实现步骤：1.安装插件npm install react-file-reader --save2.代码引入import ReactFileReader from "react-file-reader";3.写页面方法<ReactFileReader fileTypes={[".png",".jpg",".gif", "jpeg"]} base...

前言： 摘取网上资料react-router没有vue-router 的beforeEach钩子函数，可以使用react-router-config这个库去实现权限控制。：所用react-router版本4.Ximport React from 'react'import { Route, Redirect, Switch } from 'react-router-dom'const renderRoutes = (routes, authed, authPath = ...

前提React Router再v3版本之前 是有onEnter钩子函数的，也支持静态路由配置；，但到了v4版本后钩子函数被移除，官方说是为了将此提供给开发者，由开发者自由发挥。既然如此我们就只能自己实现，目前网上有很多版本，大多都是差不多的，这里做一个总结并深化一下。同时提供钩子函数或者vue中叫路由守卫和静态化路由配置。钩子函数实现钩子函数实现比较简单，只需要包装一下官方的路由即可实现，这里我们允许钩子支持Promise异步，就需要一个异步组件；代码如下异步组件代码...

前言: 在使用react时发现，react对sass的支持程度比less大多了，当然这里罗列下两种方法，可以使用自己想要的方法。一、sass（支持）1、安装命令cnpm i node-sass --saveyarn add node-sass2、新建scss文件.header{ width:100%; height:60px; display: flex; justify-content: space-between; ba...

前言： 在装antd的时候在根目录下建立了一个.babelrc,又下载sass时报错，问题：这个问题是create react app 里面的package.json里面已经配置了"babel":{"presets":["react-app"]}这样的配置，但是又在根目录下建立了一个babelrc的文件，所以导致重复解决办法：把.babelrc删了...

前言： 整理一些react使用的框架，序号不代表排名1、Material-UI2、React Desktop3、Semantic-UI-React4、Ant-design5、Blueprint6、React-BootstrapReact-Bootstrap是一款基于ReactJS对Bootstrap进行封装的库。7、React-Toolbox允许你只需要引入CSS，而不需要使用像Purify-CSS这样的工具。另外React-toolbox还是包括了30...

前言： 但是在react中，不能直接使用@，需要更改webpack的相关配置。前提： 先把build文件夹弄出来，如果没有，一定注意本地不能有任何文件，必须提交完，最好新建项目直接输入效果最好npm run eject操作步骤： config/webpack.config.js文件的alias中插入代码 '@': path.resolve('src')...

前言： 在react中使用react-redux的报错解决办法：npm install --save redux react-redux

前言： 我们用creat-react-app创建项目的时候是没有显示config这个文件夹的，为了让他显示有两种办法。其中一种是npm run eject，但是我这边执行的时候报错下面：报错原因：本地有未提交文件解决办法：先都提交到git上在执行，或者先提交到本地，也可以...

前言： 在写移动端时，有个问题是300毫秒点击延迟问题，解决办法：引入fastclick步骤：1、下载插件cnpm install fastclick --save 2、vue-main.js react-index.js中注册import FastClick from 'fastclick' FastClick.attach(document.body);...

前言： react中改变默认3000端口号方法在项目的 package.json里面找到start， 加上set PORT=9600 &&最终效果：

前言： react中子组件和父组件直接的数据传递class Son extends React.Component { render() { return <input onChange={this.props.onChange}/>; }}class Father extends React.Component { constructor() { super(); this.state = { son: "" ...

前言： 在学习react时老是希望有个模板可以让我们来参考，优化自己的代码，遍寻百度无效果，后来发现 zzh1918 大大自己写了个类似vue中iview-admin, vue-element-admin 那种后台模板的项目，虽然不是很大，但是还是很感动的，就是他的git地址下载实在太慢了，我这边下载好几个小时，断了3次才下载下来，所以在这里分享下，给需要的小伙伴提供些便...

入口：https://blog.youkuaiyun.com/twodogya/article/details/86065090