React高阶组件

React组件的生命周期

React高阶组件

1. 高阶函数

• 函数可以被作为参数传递

// 时间函数的应用
	setTimeout()
	setInterval()
// ajax的应用
	$.get(url, handle)
// 数组的应用
	some(), every(), filter(), map(), forEach()

• 函数可以被作为返回值输出

2. 高阶组件

定义：接受一个组件作为参数并返回一个新组件的函数，高阶组件是个函数不是组件

组件A
function a(Wrappedcomponent) {
	return class A extends Component {
		render() {
			return (<div><Wrappedcomponent /></div>)
		}
	}
}

export default a

组件B中
A(B)

多个组件都需要某个相同的功能，使用高阶组件减少重复实现
示例：react-redux中的connect

• 编写高阶组件

  1. 实现普通组件
  2. 将普通组件用函数包裹

• 使用高阶组件

  1. 在组件中使用，高阶函数（组件名）
  2. 装饰器模式@ 高阶组件

在creat-react-app中使用装饰器前准备

1. package.json 中eject命令npm run eject将criat中的命令项输出 运行后多一个config目录
2. 安装依赖

		cnpm i -D babel-preset-stage-2
		cnpm i -D babel-preset-react-natice-stage-0

3. 根目录下创建.babelrc

   {
   	"presets": ["react-native-stage-0/decorator-support"]
    }
   

3. 高阶组件应用

代理方式（推荐）： 返回的新组件继承于React.Component类

export default () => Wrappedcomponent => class A extends Component {
	render() {
		const {...otherPorps} = this.props_
		return <Wrappedcomponent {...otherPorps}/>
	}
}

• 操纵prop：修改、增加或删除prop中的属性
• 抽取状态 ： 高阶组件中定义公共的属性和方法，通过props传给被包裹组件
• 访问ref： 高阶组件可以通过ref属性获取被包裹组件的属性和方法（容易出问题，不建议使用）

     <Wrappedcomponent ref = {this.refc.bind(this)}/>
     refc(instance) {
		instance.属性/方法
	}

• 包装组件

继承方式：返回的组件继承于Wrappedcomponent

export default () => Wrappedcomponent => class A extends Wrappedcomponent {
	render() {
		const {user, ...otherPorps} = this.props_
		this.props = otherPorps_
		return super.render()
	}
}

• 操纵prop：修改、增加或删除prop中的属性

export default () => Wrappedcomponent => class A extends Wrappedcomponent {
	render() {
		const element = super.render();
		const newStyle = {
			color:element.type==='div'?'red':'green'
		}
		const newProps = {...this.props,style:newStyle}
		return React.cloneElement(element,newProps,element.props.children)
	}
}

• 操纵生命周期函数

export default () => Wrappedcomponent => class A extends Wrappedcomponent {
   componentWillMount(){
   	alert('');
   }
   render() {
   	const element = super.render();
   	const newStyle = {
   		color:element.type==='div'?'red':'green'
   	}
   	const newProps = {...this.props,style:newStyle}
   	return React.cloneElement(element,newProps,element.props.children)
   }
}

高阶组件显示名getDisplayName（调试时使用）
被包裹组件的名称被修改，在调试工具中不能显示

export default () => Wrappedcomponent => class A extends Wrappedcomponent {
	static displayName = `A(${getDisplayName(Wrappedcomponent)})`
	render() {
	}
}
function getDisplayName(Wrappedcomponent) {
	return Wrappedcomponent.displayName || Wrappedcomponent.name || 'Component'
}