非受控组件
受控组件和非受控组件的区别 ----- 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