- 编 曲
- 黒うさP
- 歌曲时长
- 4:52
- 歌曲原唱
- 初音未来,镜音双子
- 谱 曲
- 黒うさP
- 外文名称
- React
- 歌曲语言
- 日语
- 填 词
- 黒うさP
-
React的React.FC与React.Component的初步认识
2020-04-13 16:11:06一、React.FC<>{}react.fc是什么 React.FC<>的在typescript使用的一个泛型,在这个泛型里面可以使用useState,个人觉得useState挺好用的,例子如下: const SampleModel: React.FC<{}> = () =>...React 的组件可以定义为 函数(
React.FC<>
)或class(继承React.Component
) 的形式。一、React.FC<>
1.
React.FC
是函数式组件,是在TypeScript使用的一个泛型,FC就是FunctionComponent的缩写,事实上React.FC
可以写成React.FunctionComponent
:const App: React.FunctionComponent<{ message: string }> = ({ message }) => ( <div>{message}</div> );
2.
React.FC
包含了PropsWithChildren
的泛型,不用显式的声明props.children
的类型。React.FC<>
对于返回类型是显式的,而普通函数版本是隐式的(否则需要附加注释)。3.
React.FC
提供了类型检查和自动完成的静态属性:displayName
,propTypes
和defaultProps
(注意:defaultProps
与React.FC结合使用会存在一些问题)。4.我们使用
React.FC
来写 React 组件的时候,是不能用setState的,取而代之的是useState()
、useEffect
等 Hook API。例子(这里使用阿里的Ant Desgin Pro框架来演示):
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
如需定义 class 组件,需要继承
React.Component
。React.Component
是类组件,在TypeScript中,React.Component
是通用类型(akaReact.Component<PropType, StateType>
),因此要为其提供(可选)prop和state类型参数:例子(这里使用阿里的Ant Desgin Pro框架来演示)::
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.FC
。 -
使用 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+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中使用路由进行父子组件的通信
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未来导航者:react-navigation 使用详解(基础篇)
2017-05-17 11:30:25欢迎大家关注【跨平台开发那些事】公众号,定期推...基于最新版本React Native实现JsBundle预加载,界面秒开优化 一、开源库介绍 今年1月份,新开源的react-natvigation库备受瞩目。在短短不到3个月的时间,gith... -
完全征服React Native
2016-08-22 11:47:32React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识... -
-
react连接钉钉
2019-07-28 16:03:27今天我们就来说一下react如何连接钉钉。 步骤: 一: 首先npm钉钉 $ npm install dingtalk-jsapi --save 二: 指定文件引入钉钉 import * as dd from 'dingtalk-jsapi'; // 此方式为整体加载,也可按需进行加载 三... -
react项目的常用插件简介
2019-04-16 13:15:40今天主要介绍react项目中有可能用到的插件 -
2019 react入门至高阶实战,含react hooks
2019-01-23 12:22:53这是2019 react入门到高级新课程 学习react,不仅能带来技术提升,同时提高开发效率和体验,更能带来好的就业机会。 本课程主要分为以下几个部分: 一,前端工程化基础? 主要学习node和npm、... -
React的父子组件通信
2019-05-10 17:59:01首先要知道React的组件间通讯是单向的。 -
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-08-11 01:22:31笔者是众多React开发者之一,编写react已有不少时日了,面试的时候遇到了很多自己不懂的东西,每次面试后都会把自己感觉蛮重要的内容总结下来,于是便有了此篇文章。希望此文章能够帮助到大家。 React面试题正文: ... -
react函数式组件和类组件创建ref的方法
2019-06-30 15:34:08在react开发过程中,有时会碰到一些需求需要我们去操控dom,那么我们就可以给组件挂载一个ref属性,然后就可以通过ref调用这个组件的方法或者属性之类的。 接下来我们就来看看函数组件和类组件都是如何去挂载创建ref... -
搭建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底层原理解析之fiber
2019-04-20 22:59:29React Fiber是react执行渲染时的一种新的调度策略,JavaScript是单线程的,一旦组件开始更新,主线程就一直被React控制,这个时候如果再次执行交互操作,就会卡顿。 React Fiber就是通过对象记录组件上需要... -
react学习-react页面缓存:React Keep Alive和React-Keeper
2019-08-21 10:09:50vue中有keep-alive进行页面缓存,react提倡尽可能少的api以减少开发者的使用成本,并没有提供相关的api(我觉得这样更麻烦了),需要自己手写,我从git找到两种评价较高的对应插件分析给大家。(这两种插件不仅仅在... -
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 应用最好用的脚手架 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组件创建的3种方法
2019-04-21 10:23:52今天给朋友们带来React创建组件的三种方式介绍。 1. 函数式无状态组件 2. es5方式React.createClass组件 3. es6方式extends React.Component 三种创建方式的异同: 1.函数式无状态组件: 1. 语法: function ... -
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 获取input 输入框的值
2018-08-03 11:11:27react 获取input 输入框的值 第一种方式 非受控组件获取 第二种方式 受控组件获取 非受控组件获取 ref import React , {Component} from 'react'; export default class App extends Component{ search(){ ... -
React学习手册 React学习手册中文版 React学习手册pdf React学习手册中文版pdf
2019-03-20 10:57:54React学习手册,React学习手册PDF React学习手册中文版,React学习手册中文版PDF React学习手册,React学习手册pdf,React学习手册-14393339,React学习手册-14393339pdf Alex,Banks,Eve,Porcello 著,邓世超 ... -
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
-
MySQL 高可用工具 heartbeat 实战部署详解
-
朱老师c++课程第3部分-3.5STL的其他容器讲解
-
企业为提高团队协作,一般都会使用什么办公工具?
-
python 实现归并排序
-
鸿蒙系统Harmonyos源码架构分析-第1期第2课
-
2021年 系统架构设计师 系列课
-
Unity ILRuntime框架设计
-
1-linear_mpc.pdf
-
写程序与民主集中制
-
FTP 文件传输服务
-
按日期建文件路径1记录.vi
-
基于51单片机的排队叫号系统
-
wordpress主题开发代码-源码
-
windows环境变量修改后需不需要重启
-
MySQL 性能优化(思路拓展及实操)
-
动态着陆页-源码
-
No such file or directory: ‘c:xxxx\jieba\dict.txt’
-
微信小程序外卖平台,免费下载小程序外卖源代码
-
Keil UV4 Sublime Molokai Theme V1.0.zip
-
Galera 高可用 MySQL 集群(PXC v5.7+Hapro)