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
-
编写高阶组件
- 实现普通组件
- 将普通组件用函数包裹
-
使用高阶组件
- 在组件中使用,高阶函数(组件名)
- 装饰器模式@ 高阶组件
在creat-react-app中使用装饰器前准备
- package.json 中eject命令
npm run eject
将criat中的命令项输出 运行后多一个config目录 - 安装依赖
cnpm i -D babel-preset-stage-2
cnpm i -D babel-preset-react-natice-stage-0
-
根目录下创建.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'
}