從零開始學習 React 高階元件

React · 發表 2019-03-25 09:17:04

摘要： React 高階元件也叫做 React HOC(High Order Component), 它是react中的高階技術, 用來重用元件邏輯。但高階元件本身並不是React API。它只是一種模式，這種模式是由react自身的組合性質必然產生的。那麼在學習高階元件之前有...

React 高階元件也叫做 React HOC(High Order Component), 它是react中的高階技術, 用來重用元件邏輯。
但高階元件本身並不是React API。它只是一種模式，這種模式是由react自身的組合性質必然產生的。
那麼在學習高階元件之前有一個概念我們必須清楚，就是高階函式。

02、高階函式

概念：高階函式是一個函式，它接收函式作為引數或將函式作為輸出返回

舉個栗子:

接收函式作為引數

function a(x) {
x();
}
function b() {
alert('hello');
}

a(b);
複製程式碼

將函式作為輸出返回

function a() {
function b() {
alert('hello');
}
return b;
}

a()();
複製程式碼

以上函式a就是一個高階函式, 用法非常簡單, 那麼實際開發中又有哪些是高階函式呢？
- Array 的 map 、reduce 、filter 等方法
- Object 的 keys 、values 等方法

03、高階元件

概念：高階元件就是一個函式，且該函式接受一個元件作為引數，並返回一個新的元件

舉個栗子：

// WrappedComponent 就是傳入的包裝元件
function withHoc(WrappedComponent) {
return class extends Component {
render () {
return (
<WrappedComponent />
)
}
}
}
複製程式碼

withHoc 函式就是一個高階元件。那麼高階元件到底有什麼神奇的魔力，值得我們為之著迷？
開發元件時，我們會遇到相同的功能，使用高階元件則能減少重複程式碼

04、高階元件實訓1

目的: 定義高階元件

元件 Login -- 登陸頁面

// 受控元件
class Login extends Component {
state = {
username: '',
password: ''
}

onUsernameChange = (e) => {
this.setState({username: e.target.value});
}

onPasswordChange = (e) => {
this.setState({password: e.target.value});
}

login = (e) => {
// 禁止預設事件
e.preventDefault();
// 收集表單資料
const { username, password } = this.state;
alert(`使用者名稱: ${username}, 密碼: ${password}`);
}

render () {
const { username, password } = this.state;
return (
<div>
<h2>登陸</h2>
<form onSubmit={this.login}>
使用者名稱: <input type="text" name="username" value={username} onChange={this.onUsernameChange}/> <br/>
密碼: <input type="password" name="password" value={password} onChange={this.onPasswordChange}/> <br/>
<input type="submit" value="登陸"/>
</form>
</div>
)
}
}
複製程式碼

元件 Register -- 註冊頁面

// 受控元件
class Register extends Component {
state = {
username: '',
password: '',
rePassword: ''
}

onUsernameChange = (e) => {
this.setState({username: e.target.value});
}

onPasswordChange = (e) => {
this.setState({password: e.target.value});
}

onRePasswordChange = (e) => {
this.setState({rePassword: e.target.value});
}

register = (e) => {
// 禁止預設事件
e.preventDefault();
// 收集表單資料
const { username, password, rePassword } = this.state;
alert(`使用者名稱: ${username}, 密碼: ${password}, 確認密碼: ${rePassword}`);
}

render () {
const { username, password, rePassword } = this.state;
return (
<div>
<h2>註冊</h2>
<form onSubmit={this.register}>
使用者名稱: <input type="text" name="username" value={username} onChange={this.onUsernameChange}/> <br/>
密碼: <input type="password" name="password" value={password} onChange={this.onPasswordChange}/> <br/>
確認密碼: <input type="password" name="rePassword" value={rePassword} onChange={this.onRePasswordChange}/> <br/>
<input type="submit" value="註冊"/>
</form>
</div>
)
}
}
複製程式碼

頁面效果

我們發現裡面重複邏輯實在太多了，尤其是 onXxxChange 函數出現太多，我們先優化一下。

// 我們以 Register 元件為例來看
class Register extends Component {
state = {
username: '',
password: '',
rePassword: ''
}
// 最終修改狀態資料的函式
onChange = (stateName, stateValue) => {
this.setState({[stateName]: stateValue});
}
// 高階函式 --> 這樣後面就能一直複用當前函式，而不用重新建立了~
composeChange = (name) => {
return (e) => this.onChange(name, e.target.value);
}
// 統一所有提交表單函式名
handleSubmit = (e) => {
e.preventDefault();
const { username, password, rePassword } = this.state;
alert(`使用者名稱: ${username}, 密碼: ${password}, 確認密碼: ${rePassword}`);
}

render () {
const { username, password, rePassword } = this.state;
return (
<div>
<h2>註冊</h2>
<form onSubmit={this.handleSubmit}>
使用者名稱: <input type="text" name="username" value={username} onChange={this.composeChange('username')}/> <br/>
密碼: <input type="password" name="password" value={password} onChange={this.composeChange('password')}/> <br/>
確認密碼: <input type="password" name="rePassword" value={rePassword} onChange={this.composeChange('rePassword')}/> <br/>
<input type="submit" value="註冊"/>
</form>
</div>
)
}
}
複製程式碼

現在兩個頁面都有 onChange 、 composeChange 、handleSubmit 函式和相關的狀態，我們接下來提取，封裝成 高階元件 ！

// 高階元件 withHoc
export default function withHoc(WrappedComponent) {
return class extends Component {
state = {
username: '',
password: '',
rePassword: ''
}

onChange = (stateName, stateValue) => {
this.setState({[stateName]: stateValue});
}

composeChange = (name) => {
return (e) => this.onChange(name, e.target.value);
}

handleSubmit = (e) => {
e.preventDefault();
const { username, password, rePassword } = this.state;
if (rePassword) {
alert(`使用者名稱: ${username}, 密碼: ${password}, 確認密碼: ${rePassword}`);
} else {
alert(`使用者名稱: ${username}, 密碼: ${password}`);
}
}

render () {
// 抽取方法
const mapMethodToProps = {
composeChange: this.composeChange,
handleSubmit: this.handleSubmit,
}
// 將狀態資料和操作的方法以 props 的方式傳入的包裝元件中
return (
<div>
{/*提取公共頭部*/}
<h2>xxx</h2>
<WrappedComponent {...this.state} {...mapMethodToProps}/>
</div>
)
}
}
}

// 元件 Register
class Register extends Component {
render () {
const { handleSubmit, composeChange, username, password, rePassword } = this.props;
return (
<form onSubmit={handleSubmit}>
使用者名稱: <input type="text" name="username" value={username} onChange={composeChange('username')}/> <br/>
密碼: <input type="password" name="password" value={password} onChange={composeChange('password')}/> <br/>
確認密碼: <input type="password" name="rePassword" value={rePassword} onChange={composeChange('rePassword')}/> <br/>
<input type="submit" value="註冊"/>
</form>
)
}
}
// 向外暴露的是高階元件的返回值~包裝了 Register 元件返回了一個新元件
export default withHoc(Register);
複製程式碼

現在我們提取了公共方法、狀態等資料, 封裝了一個基本的高階元件。但是還有很多需要問題需要解決，現在開始行動~

05、高階元件實訓2

目的: 向高階元件中傳參

修改高階元件

// 再次包裹了一層高階函式, 這個高階函式執行後返回值才是高階元件
// 通過這種方式, 高階元件內部就能獲取引數了~
export default (title) => (WrappedComponent) => {
return class Form extends Component {
...重複程式碼省略...

render () {
const mapMethodToProps = {
composeChange: this.composeChange,
handleSubmit: this.handleSubmit,
}
return (
<div>
{/*獲取到引數值就能正常顯示了~*/}
<h2>{title}</h2>
<WrappedComponent {...this.state} {...mapMethodToProps}/>
</div>
)
}
}
}
複製程式碼

在 Login / Register 元件中使用
- export default withHoc('登陸')(Login);
- export default withHoc('註冊')(Register);

06、高階元件實訓3

目的: 獲取父元件傳遞的 props

修改 App 元件

class App extends Component {
render() {
return (
<div>
{/*父元件向子元件傳遞屬性*/}
<Login name="jack" age={18}/>
<Register />
</div>
);
}
}
複製程式碼

修改高階元件

export default (title) => (WrappedComponent) => {
return class Form extends Component {
...重複程式碼省略...

render () {
const mapMethodToProps = {
composeChange: this.composeChange,
handleSubmit: this.handleSubmit,
}
return (
<div>
{/*獲取到引數值就能正常顯示了~*/}
<h2>{title}</h2>
{/* 將當前元件接受到的props傳給包裝元件~*/}
<WrappedComponent {...this.props} {...this.state} {...mapMethodToProps}/>
</div>
)
}
}
}
複製程式碼

class Login extends Component {
render () {
const { handleSubmit, composeChange, username, password, name, age } = this.props;
return (
<div>
<p>你的名字: {name}</p>
<p>你的年齡: {age}</p>
<form onSubmit={handleSubmit}>
使用者名稱: <input type="text" name="username" value={username} onChange={composeChange('username')}/> <br/>
密碼: <input type="password" name="password" value={password} onChange={composeChange('password')}/> <br/>
<input type="submit" value="登陸"/>
</form>
</div>
)
}
 }
複製程式碼

07、高階元件實訓4

目的: 修改在 React-devtool 中高階元件名稱，方便除錯

修改高階元件

export default (title) => (WrappedComponent) => {
return class Form extends Component {
// 定義靜態方法，修改元件在除錯工具中顯示的名稱
static displayName = `Form(${getDisplayName(WrappedComponent)})`

...省略重複程式碼...
}
}
// 獲取包裝元件的displayName的方法
function getDisplayName(WrappedComponent) {
return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}
複製程式碼

修改之前名稱
修改之後名稱

08、使用裝飾器

目的: 簡化使用高階元件
下載包
- npm i react-app-rewired customize-cra @babel/plugin-proposal-decorators -D

在專案根目錄配置 config-overrides.js

const { override, addBabelPlugins } = require('customize-cra');
// 修改 create-react-app 的 webpack 的配置
module.exports = override(
// 新增 babel 外掛
addBabelPlugins(
[
"@babel/plugin-proposal-decorators",
{
"legacy": true
}
]
)
)
複製程式碼

修改 package.json 的 scripts

// 將 react-scripts 修改為 react-app-rewired
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test"
},
複製程式碼

以上就是使用 decorator 的配置，修改完後就能使用了~

修改 Login 元件

@withHoc('登陸')
class Login extends Component {
...省略重複程式碼...
}
export default Login;
複製程式碼

修改 Register 元件

@withHoc('註冊')
class Register extends Component {
...省略重複程式碼...
}
export default Register;
複製程式碼

react-app-rewired customize-cra 是 create-react-app 2.0以上專門用來修改 webpack 的配置
decorator 還能做很多事，感興趣朋友可以看看阮一峰ES6教程瞭解更多

重複程式碼永遠是我們需要考慮處理的程式碼，所以我們有模組化、元件化、工具類函式等等，在 React 中再次引入了一個高階元件的概念，都是為了去除掉萬惡的重複程式碼，讓我們程式碼變得更加精簡。本篇文章所有原始碼都放在了 git倉庫，如果它對你有幫助的話，歡迎點 star ~~

從零開始學習 React 高階元件

02、高階函式

03、高階元件

04、高階元件實訓1

05、高階元件實訓2

06、高階元件實訓3

07、高階元件實訓4

08、使用裝飾器

您可能也會喜歡…