react高阶组件其实就是一个函数，函数里面返回一个组件
下面用代码来解释：
a.js是普通组件
import React,{Component} from 'react'
import D from './d'
@D
class A extends Component{
render(){
return(
<div>
<p>AAAA</p>
我的名字:{this.props.name}
我的年龄:{this.props.age}
</div>
)
}
}
export default A
d.js是外层高阶组件，本身是函数，里面返回继承Component的子组件
import React, { Component } from 'react'
//1.普通组件2包裹3.传入普通组件参数4.高阶组件必须大写
function d(WrappedComponent){
return class D extends Component {
render() {
console.log(this.props)
return (
<div>
<h1>高阶组件</h1>
<WrappedComponent />
</div>
)
}
}
}
export default d
App.js调用普通组件
import React, { Component } from 'react';
import A from './components/a'
import B from './components/b'
import C from './components/c'
export default class App extends Component {
render() {
return (
<div>
<A name={'wzq'} age ={18}/>
<B />
<C name={'wzqc'} age ={19} />
</div>
)
}
}
操纵props
给A组件加props，发现props在d.js中可以找到
image.png
但是在页面上，A组件和B组件却没有显示
image.png
使用代理方式的高阶组件，可以改变
<WrappedComponent {...this.props}/>
代理
这时就普通组件就可以拿到props了。
还可以从高阶组件给普通组件传入props，实现对普通组件属性的增加
<WrappedComponent {...this.props} sex={'男'}/>
image.png
当然增加之外还可以删减属性。比如取出age属性，就在d.js的函数改为：
function d(WrappedComponent){
return class D extends Component {
render() {
console.log(this.props)
const {age,...otherprops} = this.props
return (
<div>
<h1>高阶组件</h1>
<WrappedComponent {...otherprops} sex={'男'}/>
</div>
)
}
}
}
这样普通组件a.js和c.js就取不到age的值了
image.png
访问ref
代理组件第二个特点ref,就是能获得整个子组件
修改b.js
import React,{Component} from 'react'
import D from './d'
@D
class B extends Component{
getName(){
return 'bbbb'
}
render(){
return(
<div>BBBB</div>
)
}
}
export default B
修改d.js
function d(WrappedComponent){
return class D extends Component {
refc=(instance)=>{
//instance获得子组件，先判断子组件是否有这种方法。
instance.getName&&console.log(instance.getName())
}
render() {
console.log(this.props)
const {age,...otherprops} = this.props
return (
<div>
<h1>高阶组件</h1>
<WrappedComponent {...otherprops} sex={'男'} ref={this.refc}/>
</div>
)
}
}
}
可以通过instance获取子组件，但是会出现很多不必要的问题，所以一般不要使用
image.png
抽取状态
修改a.js变成受控组件
class A extends Component{
state={
value:''
}
changeInput=(e)=>{
console.log(e.target.value)
this.setState({
value:e.target.value
})
}
render(){
return(
<div>
<p>AAAA</p>
<input type='text' value={this.state.value} onChange={this.changeInput}/>
<br/>
我的名字:{this.props.name}
我的年龄:{this.props.age}
我的性别:{this.props.sex}
</div>
)
}
}
如果有很多子组件，那么就可以提取到高阶组件。
所以改变a.js中代码：
class A extends Component{
state={
value:''
}
render(){
console.log(this.props)
return(
<div>
<p>AAAA</p>
<input type='text' {...this.props}/>
</div>
)
}
}
全靠this.props也就是高阶组件传值
那么高阶组件怎么改变呢：
function d(WrappedComponent){
return class D extends Component {
refc=(instance)=>{
//instance获得子组件，先判断子组件是否有这种方法。
instance.getName&&console.log(instance.getName())
console.log('instance',instance)
}
state={
value:''
}
handleChange=(e)=>{
this.setState({
value:e.target.value
})
}
render() {
const newProps = {
value:this.state.value,
onChange:this.handleChange
}
console.log(this.props)
const {age,...otherprops} = this.props
return (
<div>
<h1>高阶组件</h1>
<WrappedComponent {...otherprops} sex={'男'} {...newProps} ref={this.refc}/>
</div>
)
}
}
}
定义一个newProps，其中的value和onChange就是之前普通组件A里的value和事件，在高阶组件中，定义并传入给子组件，以此使子组件变成受控组件
