react组件之非受控组件和高阶组件

Posted 2020-11-22 hy96

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 -- 受控组件和非受控组件

如何让vscode支持react高阶组件写法

react input受控组件——函数柯里化