+ 代理方式的高階組件
返回的新組件直接繼承自React.Component類,新組件扮演的角色傳入參數組件的一個代理,在新組件的render函數中,將被包裹組建渲染出來,除了高階組件自己要做的工作,其余功能全部轉手給了被包裹的組建
~~~
// 代理方式的高階組件
const A = (title) => WrappedComponent => class A extends Component {
_ref(instance) {
instance.getName&&console.log(instance, instance.getName())
}
render() {
const { age, ...otherProps } = this.props
return (
<div className="container">
{title}
<div>
<WrappedComponent sex={'男'} {...otherProps} ref={this._ref.bind(this)} />
</div>
</div>
)
}
}
export {
A
}
~~~
~~~
// 共享高階組件內的方法和 staate
const A = (title) => WrappedComponent => class A extends Component {
constructor(props) {
super(props);
this.state = {
value: ''
}
}
onInputChange = (e) => {
this.setState({
value: e.target.value
})
console.log(this.state.value)
}
_ref(instance) {
instance.getName&&console.log(instance, instance.getName())
}
render() {
const { age, ...otherProps } = this.props
const newProps = {
value: this.state.value,
onChange: this.onInputChange,
}
return (
<div className="container">
{title}
<div>
<WrappedComponent sex={'男'} {...otherProps} {...newProps} />
</div>
</div>
)
}
}
~~~
+ 繼承方式的高階組件
采用繼承關聯作為參數的組件和返回的組件,假如傳入的組件參數是 WrappedComponent,那么
返回的組件就直接繼承自WrappedComponent
- 第一章:react 基礎
- 1. 關于 react
- 2. react 工作原理
- 0. 開發環境搭建
- 1. 創建并使用一個組件
- 1. 模塊化與組件化
- 2. 虛擬DOM
- 3. Diff 算法
- React 與 Vue 的使用差異
- 1. 組件創建方式
- 2. data 與 state
- 3. 方法使用方式&this
- 4. 數據雙向綁定
- 5. props
- 6. ref
- 7. for 循環元素
- 8. 生命周期
- create-react-app 改為多頁面應用
- react修改打包路徑,直接查看
- redux
- context
- lazy 實現延遲加載靜態屬性
- Memo實現指定組件進行渲染
- React Hooks
- React Hooks 的概念和意義
- 使用 useState
- axios單次切換formdata和payreload
- react 動態綁定 class
- 高階組件
- react設計模式