react——高階元件
引入及概念
1.js中高階函式：一個函式就可以接收另一個函式作為引數，這種函式就稱之為高階函式。
function add(x, y, f) { return f(x) + f(y); } //當呼叫add(-5, 6, Math.abs)時，引數x，y和f分別接收-5，6和函式Math.abs，根據函式定義，可以推導計算過程為： //x = -5; //y = 6; //f = Math.abs; //f(x) + f(y) ==> Math.abs(-5) + Math.abs(6) ==> 11; //return 11; //用程式碼驗證一下： add(-5, 6, Math.abs); // 11
2.類似於高階函式，高階元件（Higher-Order Components）概念如下：高階元件就是一個函式，且該函式接受一個元件作為引數，並返回一個新的元件
const EnhancedComponent = higherOrderComponent(WrappedComponent);
3.應用場景
（1）react-redux的connect函式~
//把redux的state和action傳進去用來建立高階函式， //通過props注入給了Component。 //被包裝後的Component可以直接用this.props去呼叫redux state和action建立函數了。 ConnectedComment = connect(mapStateToProps, mapDispatchToProps)(Component);
即分解如下：
// connect是一個返回函式的函式（就是個高階函式）
const enhance = connect(mapStateToProps, mapDispatchToProps);
// 返回的函式就是一個高階元件，該高階元件返回一個與Redux store
// 關聯起來的新元件
const ConnectedComment = enhance(Component);
（2）antd中form表單包裝
const WrappedNormalLoginForm = Form.create()(NormalLoginForm);
4.高階元件的意義
高階元件就是一個沒有副作用的純函式。
最普通的元件哦。
welcome函式轉為react元件。
import React, {Component} from 'react'
class Welcome extends Component {
constructor(props) {
super(props);
this.state = {
username: ''
}
}
componentWillMount() {
let username = localStorage.getItem('username');
this.setState({
username: username
})
}
render() {
return (
<div>welcome {this.state.username}</div>
)
}
}
export default Welcome;
goodbey函式轉為react元件。
import React, {Component} from 'react'
class Goodbye extends Component {
constructor(props) {
super(props);
this.state = {
username: ''
}
}
componentWillMount() {
let username = localStorage.getItem('username');
this.setState({
username: username
})
}
render() {
return (
<div>goodbye {this.state.username}</div>
)
}
}
export default Goodbye;
問題：上面兩段程式碼相同，都市從localstorange中拿到username，解決：寫一個通用的高階元件。
import React, {Component} from 'react'
export default (WrappedComponent) => {
class NewComponent extends Component {
constructor() {
super();
this.state = {
username: ''
}
}
componentWillMount() {
let username = localStorage.getItem('username');
this.setState({
username: username
})
}
render() {
return <WrappedComponent username={this.state.username}/>
}
}
return NewComponent
}
使用高階函式封裝元件：
import React, {Component} from 'react';
import wrapWithUsername from 'wrapWithUsername';
class Welcome extends Component {
render() {
return (
<div>welcome {this.props.username}</div>
)
}
}
Welcome = wrapWithUsername(Welcome);
export default Welcome;
import React, {Component} from 'react';
import wrapWithUsername from 'wrapWithUsername';
class Goodbye extends Component {
render() {
return (
<div>goodbye {this.props.username}</div>
)
}
}
Goodbye = wrapWithUsername(Goodbye);
export default Goodbye;
高階元件就是把username通過props傳遞給原始元件了。原始元件只管從props裡面拿來用就好了。
使用注意
1.不要在render裡使用高階元件。
原因：效能問題+重新載入一個元件會引起原有元件的所有狀態和子元件丟失
解決：元件外使用（推薦）、建構函式裡、生命週期裡使用
render() {
// 每一次render函式呼叫都會建立一個新的EnhancedComponent例項
// EnhancedComponent1 !== EnhancedComponent2
const EnhancedComponent = enhance(MyComponent);
// 每一次都會使子物件樹完全被解除安裝或移除
return <EnhancedComponent />;
}
2.必須將靜態方法做拷貝
當使用高階元件包裝元件，原始元件被容器元件包裹，也就意味著新元件會丟失原始元件的所有靜態方法。
解決：
（1）將原始元件的所有靜態方法全部拷貝給新元件：
function enhance(WrappedComponent) {
class Enhance extends React.Component {/*...*/}
// 必須得知道要拷貝的方法 :(
Enhance.staticMethod = WrappedComponent.staticMethod;
return Enhance;
}
點評：你需要清楚的知道都有哪些靜態方法需要拷貝
（2）使用hoist-non-react-statics自動拷貝所有非React的靜態方法：
import hoistNonReactStatic from 'hoist-non-react-statics';
function enhance(WrappedComponent) {
class Enhance extends React.Component {/*...*/}
hoistNonReactStatic(Enhance, WrappedComponent);
return Enhance;
}
（3）分別匯出元件靜態方法
// 替代……
MyComponent.someFunction = someFunction;
export default MyComponent;
// ……分別匯出……
export { someFunction };
// ……在要使用的元件中匯入
import MyComponent, { someFunction } from './MyComponent.js';
3.不能傳遞refs屬性
refs是一個偽屬性，React對它進行了特殊處理。如果你向一個由高階元件建立的元件的元素新增ref應用，那麼ref指向的是最外層容器元件例項的，而不是內層包裹元件。
使用例子後續補充。。。_
參考連結：
http://react-china.org/t/react-higher-order-components/14949
https://doc.react-china.org/docs/higher-order-components.html