非受控组件

受控组件和非受控组件的区别 ----- 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组件之非受控组件和高阶组件的更多相关文章

  1. React 精要面试题讲解(五) 高阶组件真解

    说明与目录 在学习本章内容之前,最好是具备react中'插槽(children)'及'组合与继承' 这两点的知识积累. 详情请参照React 精要面试题讲解(四) 组合与继承不得不说的秘密. 哦不好意 ...

  2. React躬行记（10）——高阶组件

    高阶组件(High Order Component,简称HOC)不是一个真的组件,而是一个没有副作用的纯函数,以组件作为参数,返回一个功能增强的新组件,在很多第三方库(例如Redux.Relay等)中 ...

  3. React组件重构：嵌套+继承 与 高阶组件

    前言 在最近做的一个react项目中,遇到了一个比较典型的需要重构的场景:提取两个组件中共同的部分. 最开始通过使用嵌套组件和继承的方式完成了这次重构. 但是后来又用高阶组件重新写了一遍,发现更好一点 ...

  4. react.js 高阶组件----很简单的实例理解高阶组件思想

    调试代码之前,我设置了两个缓存 分别是username和content 在控制台console设置两个缓存代码 localStorage.setItem('username','老王')localSt ...

  5. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  6. React文档（二十四）高阶组件

    高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...

  7. 函数式编程与React高阶组件

    相信不少看过一些框架或者是类库的人都有印象,一个函数叫什么creator或者是什么什么createToFuntion,总是接收一个函数,来返回另一个函数.这是一个高阶函数,它可以接收函数可以当参数,也 ...

  8. React 高阶组件浅析

    高阶组件的这种写法的诞生来自于社区的实践,目的是解决一些交叉问题(Cross-Cutting Concerns).而最早时候 React 官方给出的解决方案是使用 mixin .而 React 也在官 ...

  9. react 高阶组件的 理解和应用

    高阶组件是什么东西 简单的理解是:一个包装了另一个基础组件的组件.(相对高阶组件来说,我习惯把被包装的组件称为基础组件) 注意:这里说的是包装,可以理解成包裹和组装: 具体的是高阶组件的两种形式吧: ...

  10. react高阶组件

    高阶组件 为了提高组件复用性,在react中就有了HOC(Higher-Order Component)的概念.所谓的高阶组件,其本质依旧是组件,只是它返回另外一个组件,产生新的组件可以对属性进行包装 ...

随机推荐

  1. Tesstwo9.1.0配置步骤

    一,配置步骤 环境:Tesstwo9.1.0+Android10(华为)+Android11(模拟器) 1.查看tess-two的最新版本(GitHub - rmtheis/tess-two: For ...

  2. nginx二进制安装脚本

    #!/bin/bash NGINX_FILE=nginx-1.22.0#NGINX_FILE=nginx-1.20.2#NGINX_FILE=nginx-1.18.0NGINX_URL=http:// ...

  3. Python pexpect 库的简单使用

    一.Python pexpect 库的使用 在终端中许多命令都有与用户交互的场景,例如切换用户时需要手动输入密码,安装应用有时要输入默认配置等.这对 shell 自动化脚本十分不便.expect 命令 ...

  4. Parallels Desktop 18(Mac虚拟机)v18.0.0(53049)无限试用版+win11系统

    Parallels Desktop 18 for Mac 是一款强大的虚拟机软件,让您无需重启即可在 Mac 上运行 Windows 应用程序不会减慢 Mac 的运行速度,具有速度快.操作简单且功能强 ...

  5. 【Docker】Nginx,SSL

    1.拉镜像 docker pull nginx:latest 2.创建目录 /home/nginx/html /home/nginx/conf /home/nginx/logs 3.创建配置文件文件 ...

  6. AT ARC092F Two Faced Edges

    题意:给定一个有向图,保证无重边自环,求将图中的每条边反向后强联通分量的个数是否会改变. 数据范围:$n$ $≤$ $1e3$,$m$ $≤$ $2e5$. 首先考虑一条边的影响. 因为一条边只能连接 ...

  7. jdbc连接数据库access denied for user 'root'@'localhost'(using password:YES)

    navicat可以进行连接,一般原因为mysql未启用远程连接 以下为解决方案 解决方法-更新用户加密方式: MySQL [mysql]> ALTER USER 'root'@'%' IDENT ...

  8. SQL优化：重新编译存储过程和表

    最近发现原来执行很快的存储过程,突然慢了下来,而很多存储过程每天就运行一次,所以打算把存储过程重新编译,另外,考虑到数据在不断变化,所以也要更新表的统计信息,这样能生成比较好的执行计划. 下面是具体的 ...

  9. opengl编程天天踩的坑

    1. VBO 的 target 是 GL_ARRAY_BUFFER 不是  GL_VERTEX_BUFFER 2. glUniform()用来给uniform传变量 别用成 glProgramUnif ...

  10. Spring Boot 配置文件加载位置及优先级

    内容摘自http://c.biancheng.net/spring_boot/config-order.html 说明如下: /myBoot:表示 JAR 包所在目录,目录名称自定义: /childD ...