- 编 曲
- 黒うさP
- 歌曲时长
- 4:52
- 歌曲原唱
- 初音未来,镜音双子
- 谱 曲
- 黒うさP
- 外文名称
- React
- 歌曲语言
- 日语
- 填 词
- 黒うさP
-
React的React.FC与React.Component的初步认识
2020-04-13 16:11:06一、React.FC<>{} React.FC<>的在typescript使用的一个泛型,在这个泛型里面可以使用useState,个人觉得useState挺好用的,例子如下: const SampleModel: React.FC<{}> = () =>{ //React.FC&...一、React.FC<>{}
React.FC<>是在typescript使用的一个泛型,FC就是FunctionComponent的缩写,是函数组件,在这个泛型里面可以使用useState,个人觉得useState挺好用的,例子如下:
const SampleModel: React.FC<{}> = () =>{ //React.FC<>为typescript使用的泛型 const [createModalVisible, handleModalVisible] = useState<boolean>(false); return{ {/** 触发模态框**/} <Button style={{fontSize:'25px'}} onClick={()=>handleModalVisible(true)} >样例</Button> {/** 模态框组件**/} <Model onCancel={() => handleModalVisible(false)} ModalVisible={createModalVisible} /> }
二、class xx extends React.Component{}
这个是类组件,在Javascript可以这样写,这种写法是经典的写法,例子如下:
class SampleModel extends React.Component { state = { createModalVisible:false, }; handleModalVisible =(cVisible:boolean)=>{ this.setState({createModalVisible:cVisible}); }; return { {/** 触发模态框**/} <Button onClick={()=>this.handleModalVisible(true)} >样例</Button> {/** 模态框组件**/} <Model onCancel={() => handleModalVisible(false)} ModalVisible={this.state.createModalVisible} /> }
ps:刚接触react,对很多概念都不清楚,如有错误请指出,谢谢
-
基于React+antd的后台管理模板(可预览)
2018-08-05 13:42:53自己利用业余时间,基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React,页面主要还是展示页面,不涉及后台交互。 特点: 我用自己利用业余时间,基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React,页面主要还是展示页面,比较简单不涉及后台交互。
github地址:基于React+antd实现后台模板
预览地址:预览地址项目重构地址:react+koa实现登陆、聊天、留言板功能后台
重构预览地址:重构预览地址登录的背景图比较大,所以做了一个loading效果,等图载入完毕后再显示登录页面,首次载入可能比较慢
技术栈
- react
- antd
- react-router
- mobx
- canvas
- ES6
- cookie
自己参考了其他优秀的插件,比如动态打字效果、背景粒子效果、shuffle(洗牌),全屏插件等,自己对有些插件封装成类使用
所有路由都需要登录才可进入,自己封装了PrivateRoute组件来实现路由认证,登录信息保存在cookie中,原本是保存在store中,但是刷新页面后登录状态丢失,所以就保存在cookie中
登录背景图太大,使用了TinyPNG进行压缩,并编写了一个loading效果
项目目录结构
assets----存储静态图片资源和共用icon图标
components----存储共用组件
routes----业务页面入口和常用模板
store----状态管理
utils----工具函数
项目截图
问题
整个demo不复杂,主要是熟悉react和路由等,在打包的过程中出现了一点小问题。我打包的文件是放在服务器二级目录下,所以打包的路径要改为相对路径,不能使用绝对路径,我在package.json中添加了homepage:’.'解决了路径问题。然后BrowserRouter加上了 basename=‘二级目录名称’ 属性,结果还是出现js路径错误,我一直以为是webpack打包的问题,找了很久才发现是因为BrowserRouter,将BrowserRouter改为HashRouter就访问正确。
使用react-router(v4)时,如果有服务器端的动态支持,建议使用 BrowserRouter,否则建议使用 HashRouter。
关于BrowserRouter和HashRouter的区别,可以参考:关于 reactrouter 4.0版本中 BrowserRouter和HashRouter的问题、react-router v4中 HashRouter 和 BrowserRouter的使用
最后
demo是我断断续续写的,只有下班和周末有时间。写demo的目的主要是熟悉React和react-router以及antd,整个demo中参考了一些其他人的想法,如动画效果等。另外基于vue的个人项目可以看这个仿制移动端QQ音乐
其他个人项目
觉得不错的给个star鼓励支持!^_^
-
-
-
使用 React 和 Threejs 创建一个VR全景项目
2020-08-17 00:12:36最近我在学习使用 React 配合 Three.js 来搭建一个可以浏览720全景图片的项目 实现的是加载一张 2:1 的720全景 分享一下我的创建过程 一、搭建框架并安装需要的插件 npx create-react-app parano // 创建一个 React...最近我在学习使用
React
配合Three.js
来搭建一个可以浏览720全景图片的项目
实现的是加载一张 2:1 的720全景
分享一下我的创建过程一、搭建框架并安装需要的插件
npx create-react-app parano // 创建一个 React 项目 npm install -S typescript // 安装 typescript,这个是类型辅助插件,与全景项目关系不大 npm install -S @types/three // 安装 typescript 支持的 three.js 插件
二、创建 Pano 组件
Pano 组件用来加载720全景图
import React from 'react' import * as THREE from 'three' // 引入 Three.js 插件 import banner from './img/playground.jpg' // 引入全景图 // props 类型声明接口 interface MyProps { } // state 类型声明接口 interface MyState { } class Pano extends React.Component<MyProps, MyState> { renderer: any = new THREE.WebGLRenderer() // 创建一个渲染器 scene: any = new THREE.Scene() // 创建一个场景 camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) // 创建一个摄像机 geometry = new THREE.SphereBufferGeometry(100, 60, 40) // 创建一个球形的容器,用于贴全景图上去 material: any // 贴图材质 mesh: any constructor(props: any) { super (props) this.state = {} } componentDidMount () { this.geometry.scale(-1, 1, 1) let texture = new THREE.TextureLoader().load(banner) this.material = new THREE.MeshBasicMaterial({map: texture}) this.mesh = new THREE.Mesh(this.geometry, this.material) this.renderer.setSize(window.innerWidth, window.innerHeight) document.body.appendChild(this.renderer.domElement) this.scene.add(this.mesh) this.camera.position.z = 0 window.addEventListener('resize', this.onWindowResize, false) this.animate() } // 实现窗口大小改变的时候改变全景图的显示大小 onWindowResize = () => { this.camera.aspect = window.innerWidth / window.innerHeight this.camera.updateProjectionMatrix() this.renderer.setSize(window.innerWidth, window.innerHeight) } // 逐帧渲染 animate = () => { requestAnimationFrame(this.animate) this.mesh.rotation.y += 0.001 this.renderer.render(this.scene, this.camera) } render () { return ( <div></div> ) } } export default Pano
三、将 Pano 组件添加到 App 组件中
import React from 'react'; import './App.css'; import Pano from './pano'; function App() { return ( <div className="App"> <Pano /> </div> ); } export default App;
此时在项目目录中执行
npm run start
即可看到效果我也是个摄影爱好者,之前自己拍摄过学校的720全景项目,现在想学习一下搭建一个720全景展示的网页,以后就美滋滋啦~
后续还会继续深入学习贴热点图等技术,加油啦! -
React中使用路由进行父子组件的通信
2020-06-19 23:10:08最近我在学习 React.js 框架,在此记录一下我使用 react-router-dom 来实现单页应用(SPA)的路由跳转时,怎么处理父子组件间的通信。本文使用的是 HashRouter。 父组件中的路由配置 /** * 我使用了 react-router...最近我在学习
React.js
框架,在此记录一下我使用react-router-dom
来实现单页应用(SPA)的路由跳转时,怎么处理父子组件间的通信。本文使用的是HashRouter
。父组件中的路由配置
/** * 我使用了 react-router-dom 里面的 Switch 进行页面内的路由更新 * NavPage 是父组件 * Content 是子组件 */ class NavPage extends React.Component { render () { return ( <div className='body'> <Switch> <Route path='/navpage/content' component={Content} /> </Switch> </div> ) } } /** * 在父组件中定义一个方法,实现父组件跳转到子组件并传参数过去 * 注意: 第一次用 push 方法,后面用 replace 方法 * func 里面放置的是让子组件调用的时候可以回调告诉父组件的方法 */ navigateToSon () { this.props.history.replace({pathname: '/navpage/content', data: {这里以对象的方式放置要传递的参数}, func: this.sonCallMe}) } sonCallMe (args) { console.log("My Son Call Me Now: ", args) // 这里接收子组件传递过来的args,输出:"My Son Call Me Now: 我是你儿子" }
子组件中的配置
class Content extends React.Components { // 获取父组件 NavPage 初始化传过来的数据 componentWillMount () { console.log(this.props.history.location.data) } componentWillReceiveProps () { console.log(this.props.history.location.data) } // 触发父组件传递过来的函数去与父组件通信 callFather () { this.props.history.location.func("我是你儿子") } render () { return ( <div className='body'> <div onClick={this.callFather.bind(this)}></div> </div> ) } }
我是刚踏进
React.js
大门的小白,一路上踩了很多坑。希望可以帮助到跟我一样的小白们,有 React 方面的问题可以留言或者私信我们一起交流~ -
React—useRef
2019-10-16 15:53:04相信有过React使用经验的人对ref都会熟悉,它可以用来获取组件实例对象或者是DOM对象。 而useRef这个hooks函数,除了传统的用法之外,它还可以“跨渲染周期”保存数据。 首先来看一下它传统的用法: import React, {... -
完全征服React Native
2016-08-22 11:47:32React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识... -
-
react项目的常用插件简介
2019-04-16 13:15:40今天主要介绍react项目中有可能用到的插件 -
react连接钉钉
2019-07-28 16:03:27今天我们就来说一下react如何连接钉钉。 步骤: 一: 首先npm钉钉 $ npm install dingtalk-jsapi --save 二: 指定文件引入钉钉 import * as dd from 'dingtalk-jsapi'; // 此方式为整体加载,也可按需进行加载 三... -
React的父子组件通信
2019-05-10 17:59:01首先要知道React的组件间通讯是单向的。 -
React一到三年面试题以及进阶题分享
2019-08-11 01:22:31笔者是众多React开发者之一,编写react已有不少时日了,面试的时候遇到了很多自己不懂的东西,每次面试后都会把自己感觉蛮重要的内容总结下来,于是便有了此篇文章。希望此文章能够帮助到大家。 React面试题正文: ... -
react函数式组件和类组件创建ref的方法
2019-06-30 15:34:08在react开发过程中,有时会碰到一些需求需要我们去操控dom,那么我们就可以给组件挂载一个ref属性,然后就可以通过ref调用这个组件的方法或者属性之类的。 接下来我们就来看看函数组件和类组件都是如何去挂载创建ref... -
React Native运行原理解析
2016-09-22 15:54:18Facebook 于2015年9月15日推出react native for Android 版本, 加上2014年底已经开源的IOS版本,至此RN (react-native)真正成为跨平台的客户端框架。本篇主要是从分析代码入手,探讨一下RN在安卓平台上是如何构建... -
2019 react入门至高阶实战,含react hooks
2019-01-23 12:22:53这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分: 一,前端工程化基础? 主要学习node和npm、... -
react底层原理解析之fiber
2019-04-20 22:59:29React Fiber是react执行渲染时的一种新的调度策略,JavaScript是单线程的,一旦组件开始更新,主线程就一直被React控制,这个时候如果再次执行交互操作,就会卡顿。 React Fiber就是通过对象记录组件上需要... -
React.FC和React.ReactNode和JSX.Element和React.ReactNode的区别与使用
2020-04-24 17:02:55一、React.FC import React, { useState } from 'react'; export interface UserProps { updateModalVisible: boolean; } const User: React.FC<UserProps> = () => { let [count, setCount] = useStat... -
react详细介绍性能优化
2019-04-21 09:05:50今天给朋友们详细介绍react如何进行性能优化。 首先要了解网页性能不好的罪魁祸首 浏览器的重绘和重排版(reflows&repaints)(DOM操作都会引起)才是导致网页性能问题的关键。 而React虚拟DOM的目的就是... -
react的this.setState详细介绍
2019-06-30 21:04:33this.setState是react类组件中最常用的一个react API,使用它可以改变state从而改变页面。 比如: import React, { Component } from react; export default class Test extends Component { constructor() { ... -
React-Router实战:重定向Redirect
2019-03-23 18:55:45当用户访问某界面时,该界面并不存在,此时用Redirect重定向,重新跳到一个我们自定义的组件里。...import { Route, Redirect } from 'react-router' <Route exact path="/" render={() => ( ... -
react学习-react页面缓存:React Keep Alive和React-Keeper
2019-08-21 10:09:50vue中有keep-alive进行页面缓存,react提倡尽可能少的api以减少开发者的使用成本,并没有提供相关的api(我觉得这样更麻烦了),需要自己手写,我从git找到两种评价较高的对应插件分析给大家。(这两种插件不仅仅在... -
搭建react脚手架&初识react
2019-05-03 16:24:04一、环境准备&项目搭建 (1)安装最新node.js 中文官网:https://nodejs.org/zh-cn/ ...下载msi,直接安装即可(安装过程中记得勾选 Add to path) ...(2)安装react脚手架工具 create-react-app ... -
react组件创建的3种方法
2019-04-21 10:23:52今天给朋友们带来React创建组件的三种方式介绍。 1. 函数式无状态组件 2. es5方式React.createClass组件 3. es6方式extends React.Component 三种创建方式的异同: 1.函数式无状态组件: 1. 语法: function ... -
开发 react 应用最好用的脚手架 create-react-app
2017-11-29 15:15:431. 介绍 在开发react应用时,应该没有人用传统的方法引入react的源文件(js),然后在html编辑吧。 大家都是用webpack + es6来结合react开发前端...npm install react react-dom --save npm install babel babel-loa... -
react 获取input 输入框的值
2018-08-03 11:11:27react 获取input 输入框的值 第一种方式 非受控组件获取 第二种方式 受控组件获取 非受控组件获取 ref import React , {Component} from 'react'; export default class App extends Component{ search(){ ... -
React进阶
2017-05-28 19:56:12首先来配置一下React的环境,在网上下载react.js和react-dom.js和browser.min.js,其中react.js是react的核心库,react-dom.js是提供与Dom相关的功能,browser.min.js是负责将JSX转换为javascrip... -
react配置less或者sass
2019-04-21 12:54:06react如何配置less(sass与less配置的方法基本一致,如果还是不会的朋友可以私信我) 接下来笔者会一步一步的跟朋友们一起去做配置 生成react项目, create-react-app <你的项目名> 可以将src目录中的文件删... -
vue全家桶和react全家桶
2019-04-21 08:34:53今天笔者就简单的给大家介绍一下一般项目在开发的时候所提到的vue全家桶和react全家桶分别都包括哪些内容。 vue全家桶: vue(整体架构) + vuex(状态管理) + vue-router(路由) + vue_resource || axios... -
React: Create-React-App
2020-06-30 12:56:36Download Node.js ...create-react-app https://github.com/facebook/create-react-app 下载npm npm install 下载create-react-app ...npm install create-react-app react-complete-guide --script-version
-
android笔试面试和实战课程
-
linux开发资源汇总
-
转行做IT-第8章 类与对象、封装、构造方法
-
GETFACE.exe
-
AutoCAD2018_输出与打印
-
【学习笔记-视觉AI-3】
-
npp.7.8.1.bin.x64.rar
-
【2021】UI自动化测试Selenium3
-
pta 1071 C语言
-
我的Python心路历程 第十期 (10.8 股票实战之数据可视化中文显示问题)
-
Laya 2.0 开发3D小游戏 入门教学
-
LED_SW.zip
-
2021-1-23寒假开启
-
转行做IT-第7章 数组
-
gitea-1.5.0-linux-amd64
-
【数据分析-随到随学】Tableau数据分 析+PowerBI
-
Java基础学习
-
android开发培训!Android最强进程保活黑科技实现原理解密及方法,大厂面试题汇总
-
解决iframe跨域跟父级进行通讯问题【postMessage】 重点是跨域进行通讯!
-
Javaweb前后端交互思路分析