react组件之非受控组件和高阶组件
非受控组件
受控组件和非受控组件的区别 ----- value
import React, { Component } from 'react'
export default class extends Component {
constructor (props) {
super(props);
this.state = {
username: '吴大勋',
password: '123465'
}
}
render () {
return (
<div>
<h1>非受控组件</h1>
<input type="text" defaultValue = { this.state.username} ref="username" onChange={ () => {
if(this.refs.username.value.length < 6) {
console.log('111111111')
} else {
console.log('ok')
}
this.setState({
username: this.refs.username.value
})
}}/>
<input type="password" defaultValue = { this.state.password} ref="password" onChange={ () => {
this.setState({
password: this.refs.password.value
})
}}/>
<input type="file" ref="file" multiple/>
<button onClick= { () => {
console.log(this.refs.username.value)
console.log(this.refs.password.value)
// .files可以获取文件的信息
/**
* lastModified: 1572398893933
lastModifiedDate: Wed Oct 30 2019 09:28:13 GMT+0800 (中国标准时间) {}
name: "2.png"
size: 24396
type: "image/png"
webkitRelativePath: ""
*/
console.log(this.refs.file.files)
} }>获取表单信息</button>
</div>
)
}
}
高阶组件
高阶组件其实就是一个纯函数，接收一个组件作为参数，返回一个新的组件
高阶组件1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body> </body>
<script src="test.js"></script>
<script> </script>
</html>
function welcome(){
}
function goodbye(){
}
// 高阶函数
function func (fn) { // fn为一个参数
return function () {
let username = localStorage.getItem('username');
console.log(username)
}
}
welcomeFn = func(welcome)
goodbyeFn = func(goodbye)
// console.log(welcomeFn)
goodbyeFn()
goodbyeFn()
高阶组件2
import React, { Component } from 'react'
import Welcome from './Welcome'
import Goodbye from './Goodbye'
export default class extends Component {
constructor (props) {
super(props);
}
render () {
return (
<div>
<h1>高阶组件</h1>
<Welcome />
<Goodbye />
</div>
)
}
}
welcome.js
import React, {Component} from 'react'
class Com extends Component {
constructor (props) {
super(props)
this.state = {
username: ''
}
}
componentDidMount () {
let username = localStorage.getItem('username')
this.setState({
username
})
}
render () {
return (
<div>
welcome { this.state.username }
</div>
)
}
}
export default Com
goodbye.js
import React, {Component} from 'react'
class Com extends Component {
constructor (props) {
super(props)
this.state = {
username: ''
}
}
componentDidMount () {
let username = localStorage.getItem('username')
this.setState({
username
})
}
render () {
return (
<div>
goodbye { this.state.username }
</div>
)
}
}
export default Com
简化高阶组件3
import React, { Component } from 'react'
import Welcome from './Welcome'
import Goodbye from './Goodbye'
export default class extends Component {
constructor (props) {
super(props);
}
render () {
return (
<div>
<h1>高阶组件</h1>
<Welcome />
<Goodbye />
</div>
)
}
}
welcome.js
import React, {Component} from 'react'
import higherorderfn from './higherorderfn'
// console.log(higherorderfn)
class Com extends Component {
render () {
return (
<div>
welcome ---- { this.props.username }
</div>
)
}
}
const NewCom = higherorderfn(Com)
export default NewCom
goodbye.js
import React, {Component} from 'react'
import higherorderfn from './higherorderfn'
// console.log(higherorderfn)
class Com extends Component {
render () {
return (
<div>
goodbye --- { this.props.username }
</div>
)
}
}
const NewCom = higherorderfn(Com)
export default NewCom
higherorderfn.js
import React, {Component} from 'react'
import higherorderfn from './higherorderfn'
// console.log(higherorderfn)
class Com extends Component {
render () {
return (
<div>
goodbye --- { this.props.username }
</div>
)
}
}
const NewCom = higherorderfn(Com)
export default NewCom
react组件之非受控组件和高阶组件的更多相关文章
- React 精要面试题讲解(五) 高阶组件真解
说明与目录 在学习本章内容之前,最好是具备react中'插槽(children)'及'组合与继承' 这两点的知识积累. 详情请参照React 精要面试题讲解(四) 组合与继承不得不说的秘密. 哦不好意 ...
- React躬行记（10）——高阶组件
高阶组件(High Order Component,简称HOC)不是一个真的组件,而是一个没有副作用的纯函数,以组件作为参数,返回一个功能增强的新组件,在很多第三方库(例如Redux.Relay等)中 ...
- React组件重构：嵌套+继承 与 高阶组件
前言 在最近做的一个react项目中,遇到了一个比较典型的需要重构的场景:提取两个组件中共同的部分. 最开始通过使用嵌套组件和继承的方式完成了这次重构. 但是后来又用高阶组件重新写了一遍,发现更好一点 ...
- react.js 高阶组件----很简单的实例理解高阶组件思想
调试代码之前,我设置了两个缓存 分别是username和content 在控制台console设置两个缓存代码 localStorage.setItem('username','老王')localSt ...
- 聊聊React高阶组件(Higher-Order Components)
使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...
- React文档（二十四）高阶组件
高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...
- 函数式编程与React高阶组件
相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...
- React 高阶组件浅析
高阶组件的这种写法的诞生来自于社区的实践,目的是解决一些交叉问题(Cross-Cutting Concerns).而最早时候 React 官方给出的解决方案是使用 mixin .而 React 也在官 ...
- react 高阶组件的 理解和应用
高阶组件是什么东西 简单的理解是:一个包装了另一个基础组件的组件.(相对高阶组件来说,我习惯把被包装的组件称为基础组件) 注意:这里说的是包装,可以理解成包裹和组装: 具体的是高阶组件的两种形式吧: ...
- react高阶组件
高阶组件 为了提高组件复用性,在react中就有了HOC(Higher-Order Component)的概念.所谓的高阶组件,其本质依旧是组件,只是它返回另外一个组件,产生新的组件可以对属性进行包装 ...
随机推荐
- mermaid工具
mermaid支持:流程图.时序图.甘特-等图表的绘制:可在线编辑,保存代码.图片. mermaid :官网.在线编辑器.操作手册
- js小数相加精度不准确
例: 0.1+0.1+0.1+0.7 != 1 0.1+0.2 != 0.3 解决办法: 相加 function addNum(num1, num2) { let sq1, sq2; ...
- 攻防（一）tomcat CVE-2020-1938，ftp 21端口
TOMCAT kali自带POE msf6 > use auxiliary/admin/http/tomcat_ghostcat set RHOST 10.98.xx.xx msf6 auxil ...
- PLC入门笔记11
1.开关? 输入 拨杆开关.点动开关.常开.常闭开关 霍尔接近开关(磁场 N极导通 3线+-DC24V ).电容接近开关(非金属).电感接近开关(金属) 2.输入接线? NPN型,不需要外接电源,直接 ...
- gitbash 本地文件提交为一个新的项目 到 gitlab
此篇操作的环境: 已经配置好一个本地仓库,且可成功的将本地项目提交到gitlab上的对应的远程仓库. 这意味着此时你的电脑已经安装好git,有一个本地仓库存放你的项目,成功配置好一个对应的远程仓库,且 ...
- (十四).CSS3中的多列布局和伸缩盒布局
1 多列布局 ① 设置给包裹元素的 CSS 属性(共 8 个属性) CSS 属性名 含义 值 column-count 设置列数 纯数字 column-width 设置列宽 长度 columns 同时 ...
- 树莓派 wiringPi的BCM与BOARD编码
一.基础命令使用wiringPi库 1.1.获取管教信息 gpio readall ---获取管脚信息 1.2.BOARD编码和BCM一般都在python库中使用 import RPi.GPIO ...
- PASS模型需求分析和原型设计
班级网址 https://edu.cnblogs.com/campus/zjcsxy/SE2020 作业要求 https://edu.cnblogs.com/campus/zjcsxy/SE2020/ ...
- windows环境下本地项目（或gitlab上拉取项目）在Jenkins上自动打包部署 超超超详细！！！！！
一.环境准备 1.下载jdk,官网:http://www.oracle.com/ 2.下载Jenkins,官网:https://www.jenkins.io/ 3.下载Tomcat,官网:http:/ ...
- 虚拟机文件丢失，虚拟机无法启动，通过xx-flat.vmdk和xx-delta.vmdk恢复虚拟机
突然掉电,导致虚拟机文件夹里面的文件丢失,只剩余-flat.vmdk和-delta.vmdk文件,其他文件全部丢失,文件格式原本为"文件"格式.新建虚拟机无法直接使用此文件夹里面的 ...