分类：React

2021
04-07

react获取input输入框的值的方法示例

react获取input输入框的值的多种方式第一种方式非受控组件获取第二种方式受控组件获取非受控组件获取refimportReact,{Component}from'react';exportdefaultclassAppextendsComponent{search(){constinpVal=this.input.value;console.log(inpVal);}render(){return(<div><inputtype="text"ref={input=>this.input=input}defaultValue="Hello"/><buttononClick={this.search.bind(this)}... 继续阅读 >
2021
04-07

react实现Radio组件的示例代码

本文旨在用最清楚的结构去实现一些组件的基本功能。希望和大家一起学习，共同进步效果展示：测试组件：classTestextendsComponent{constructor(props){super(props)this.state={active:1}}onGroupChange(value){this.setState({active:value})}render(){return(<div><RadioGrouponChange={this.onGroupChange.bind(this)}active={this.state.active}>... 继续阅读 >
2021
04-07

React Router 如何使用history跳转的实现

在react-router中组件里面的跳转可以用<Link>但是在组件外面改如何跳转，需要用到react路由的historyreplace方法和push方法使用形式一样，replace的作用是取代当前历史记录go，此方法用来前进或者倒退，history.go(-1);goBack，此方法用来回退，history.goBack();goForward，此方法用来前进，history.goForward();1.hookimport{useHistory}from'react-router-dom';functiongoPage(e){history.push({pathname:"/home",stat... 继续阅读 >
2021
04-07

聊一聊我对 React Context 的理解以及应用

前言Context被翻译为上下文，在编程领域，这是一个经常会接触到的概念，React中也有。在React的官方文档中，Context被归类为高级部分(Advanced)，属于React的高级API，但官方并不建议在稳定版的App中使用Context。Thevastmajorityofapplicationsdonotneedtousecontent.Ifyouwantyourapplicationtobestable,don'tusecontext.ItisanexperimentalAPIanditislikelytobreakinfuturereleasesofReact... 继续阅读 >
2021
04-07

react hooks入门详细教程

StateHooks案例：import{useState}from'react';functionExample(){const[count,setCount]=useState(0);//count:声明的变量；setCount：改变count值的函数；0：count的初始值return(<div><p>Youclicked{count}times</p><buttononClick={()=>setCount(count+1)}>Clickme</button></div>);}useState是react自带的一个hook函数，它的作用就是用来声明状态变量。useState这个函数接收的参数... 继续阅读 >
2021
04-07

使用 React 和 Threejs 创建一个VR全景项目的过程详解

最近我在学习使用React配合Three.js来搭建一个可以浏览720全景图片的项目实现的是加载一张2:1的720全景分享一下我的创建过程一、搭建框架并安装需要的插件npxcreate-react-appparano//创建一个React项目npminstall-Stypescript//安装typescript，这个是类型辅助插件，与全景项目关系不大npminstall-S@types/three//安装typescript支持的three.js插件二、创建Pano组件Pano组件用来加载720全景图impor... 继续阅读 >
2021
04-07

React中使用setInterval函数的实例

本文是基于Windows10系统环境，学习和使用React：Windows10一、setInterval函数(1)定义setInterval()方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。setInterval()方法会不停地调用函数，直到clearInterval()被调用或窗口被关闭。由setInterval()返回的ID值可用作clearInterval()方法的参数。(2)实例importReact,{Component}from'react';import{Radio,Button,Icon}from'antd';classListex... 继续阅读 >
2021
04-07

React html中使用react的两种方式

基本使用<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>hello</title></head><body><divid="app"></div><scriptcrossoriginsrc="https://unpkg.com/react@16/umd/react.production.min.js"></script><scriptcrossoriginsrc="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script><scrip... 继续阅读 >
2021
04-07

详解对于React结合Antd的Form组件实现登录功能

一、React结合Antd实现登录功能引入所需的Antd组件，代码如下所示：import{Form,Icon,Input,Button,message}from'antd'在Login.jsx中，创建一个Login组件。当对外暴露组件时，需要使用Form组件进行包装，包装Form组件生成一个新的组件Form(Login)，同时新组件会向Form组件传递一个强大的对象属性form，这样就可以取到Form表单的值，这也是高阶组件和高阶函数的体现，代码如下所示：classLoginextend... 继续阅读 >
2021
04-07

浅谈React Router关于history的那些事

如果你想理解ReactRouter，那么应该先理解history。更确切地说，是history这个为ReactRouter提供核心功能的包。它能轻松地在客户端为项目添加基于location的导航，这种对于单页应用至关重要的功能。npminstall--savehistory存在三类history，分别时browser，hash，与memory。history包提供每种history的创建方法。import{createBrowserHistory,createHashHistory,createMemoryHistory}from'history'如果你使用ReactRo... 继续阅读 >
2021
04-07

React利用路由实现登录界面的跳转

React利用路由实现登录界面的跳转 上一篇在配置好了webpack和react的环境后，接下来开始写登录界面，以及接下来的跳转到主页的功能。1、首先看一下总体的目录结构。因为很多时候在看别人写的例子的时候因为目录结构不熟悉后边会出现意想不到的岔子。2、大体流程：1）webpack配置入口文件src/index.js2）运行index.html后首先加载入口文件src/index.js3）加载路由表src/router/index.js4）根据路由表中的配置会首先加载登录界面src/login.js5）当在登录界面登录成功... 继续阅读 >
2021
04-07

React实现登录表单的示例代码

作为一个Vue用户，是时候扩展一下React了，从引入antd、配置less、router，终于实现了一个简单的登录表单。代码如下：importReactfrom'react';import{Input,Button,message}from"antd";import{UserOutlined,LockOutlined,EyeInvisibleOutlined,EyeTwoTone}from'@ant-design/icons';import'./index.less'classLoginextendsReact.Component{constructor(props){super(props)this.state={username:'',... 继续阅读 >
2021
04-07

React Hook的使用示例

这篇文章分享两个使用ReactHook以及函数式组件开发的简单示例。一个简单的组件案例Button组件应该算是最简单的常用基础组件了吧。我们开发组件的时候期望它的基础样式能有一定程度的变化，这样就可以适用于不同场景了。第二点是我在之前做项目的时候写一个函数组件，但这个函数组件会写的很死板，也就是上面没有办法再绑定基本方法。即我只能写入我已有的方法，或者特性。希望编写Button组件，即使没有写onClick方法，我也希望能... 继续阅读 >
2021
04-07

深入理解React Native核心原理(React Native的桥接（Bridge)

深入理解React Native核心原理(React Native的桥接（Bridge) 在这篇文章之前我们假设你已经了解了ReactNative的基础知识，我们会重点关注当native和JavaScript进行信息交流时的内部运行原理。主线程在开始之前，我们需要知道在ReactNative中有三个主要的线程：shadowqueue：负责布局工作mainthread：UIKit在这个线程工作（译者注：UIManager线程，可以看成主线程，主要负责页面交互和控件绘制的逻辑）JavaScriptthread：运行JS代码的线程另外，一般情况下每个native模块都有自己... 继续阅读 >
2021
04-07

React+Koa实现文件上传的示例

背景最近在写毕设的时候，涉及到了一些文件上传的功能，其中包括了普通文件上传，大文件上传，断点续传等等服务端依赖koa(node.js框架)koa-router(Koa路由)koa-body(Koabody解析中间件，可以用于解析post请求内容)koa-static-cache(Koa静态资源中间件，用于处理静态资源请求)koa-bodyparser(解析request.body的内容)后端配置跨域app.use(async(ctx,next)=>{ctx.set('Access-Control-Allow-Origin','*');ct... 继续阅读 >
2021
04-07

基于react hooks,zarm组件库配置开发h5表单页面的实例代码

基于react hooks,zarm组件库配置开发h5表单页面的实例代码 最近使用ReactHooks结合zarm组件库，基于js对象配置方式开发了大量的h5表单页面。大家都知道h5表单功能无非就是表单数据的收集，验证，提交，回显编辑，通常排列方式也是自上向下一行一列的方式显示，所以一开始就考虑封装一个配置化的页面生成方案，目前已经有多个项目基于此方式配置开发上线，思路和实现分享一下。使用场景任意包含表单的h5页面（使用zarm库，或自行适配自己的库）目标代码实现简单和简洁基于配置新手... 继续阅读 >