重覆是不可能的，這輩子都不可能寫重覆的代碼 當然，這句話分分鐘都要被產品打臉，天天喊著改需求，老哥，這裡改下可好？ 所以，我們需要抽象，封裝重覆的功能或者邏輯，這樣改需求，也不用到處改 那麼這次我們來講講 React 里的高級組件 React 高級組件有兩種方式: 1. 使用高階組件( Higher ...
重覆是不可能的，這輩子都不可能寫重覆的代碼
當然，這句話分分鐘都要被產品打臉，天天喊著改需求，老哥，這裡改下可好？
所以，我們需要抽象，封裝重覆的功能或者邏輯，這樣改需求，也不用到處改
那麼這次我們來講講 React 里的高級組件
React 高級組件有兩種方式:
- 使用高階組件( Higher Order Component ==> HOC )
- 子組件作為函數的模式( Render Props )
高階組件
首先來說說高階組件，它不是 React 的提供的 API，它是模式，一種增強組件的模式，簡單來說其實就是高階函數，高階函數大家應該不陌生
高階函數 : 把函數作為參數傳入，返回一個新的函數，這樣的函數稱為高階函數
而所謂的高階組件也就是傳入一個現有組件作為參數，返回一個新的組件，高階租價也分為代理方式和繼承方式
我們先來看看一個簡單的 HOC :
import React from 'react';
function addNameProp(WrapperComponent) {
return class extends React.Component {
render() {
const { name, ...props } = this.props;
return <WrapperComponent {...props} name={name || 'cnyballk'} />;
}
};
}
export default addNameProp;在上面的代碼里我們定義了一個 addNameProp。 函數，它的作用就是為沒有傳入 name 的 prop 傳入的組件添加一個 name 的 prop ，然後渲染出來
這個高階組件就完成了對傳入組件的增強，這也是一個代理方式的高階組件，
那麼繼承方式是怎麼樣的呢
import React from 'react';
function addNameProp(WrapperComponent) {
return class extends WrapperComponent {
render() {
this.props = {
...this.props,
name: this.props.name || 'canyballk',
};
return super.render();
}
};
}
export default addNameProp;和上面的高階組件 一樣的效果，而繼承模式和代理模式最大的區別就是一個是返回傳入的組件，一個是調用繼承的父組件的 render 方法
⚠️ 在代理模式下 WrapperComponent 經歷了完整的生命周期，返回的組件也有一次完整的生命周期，而繼承模式 則是調用了 WrapperComponent 的 render ，只有返回的組件的一個生命周期
如果我們用過 react-redux 的 connect 也就知道 connect 也是一個代理模式的高階組件
⚠️ 高階組件可以這麼使用
@Wrapper
class Index extends Component {
...略
}emmmm...這個涉及到 js 的裝飾器，各位自己去搜來學習哈
Render Props
那麼我們已經認識了高階組件的重用方法，也認識到了高階組件的優點。
但是高階組件的缺點是什麼呢？
相信你們也能看到了，我們傳遞一個 name 的 Prop ，那是不是得傳入的組件能夠處理才可以，而且還有命名的衝突危險，畢竟有些組件的 props 命名各有不同，或者說子組件需要同一份數據處理方式卻不一樣，所以說這個時候就不適用 HOC 了
HOC 對於使用者來說是一個黑盒，還需要去看他們的實現
而 Render Props 則是 數據給你，其他的你自己來
我們來看一個簡單的例子
import React from 'react';
class AddNameProp extends React.Component {
render() {
const name = 'cnyballk';
return this.props.children(name);
}
}
export default AddNameProp;簡單的使用
<AddNameProp>{name => <div>我叫 {name}</div>}</AddNameProp>想傳遞給組件
<AddNameProp>
{name =>
<Hello name={name}/>;
}
</AddNameProp>或者是其他的 prop 名
<AddNameProp>
{name =>
<Hello myName={name}/>;
}
</AddNameProp>我們可以看到，這個方式很靈活，因為子組件是一個函數，一切皆有可能，所以現在有很多 Render Props 黨，但是 Render Props 也有缺點就是難以做性能優化，高階組件可以利用 SCU 來避免重覆渲染。雖然這樣， Render Props 卻是一個非常好的一個模式，我也非常喜歡
程式員可以懶，但不能是複製粘貼的懶
固然有很多人喜歡偷懶複製粘貼，但俗話說的好，複製粘貼一時爽，代碼重構火葬場，一旦需要修改需求或者出現 bug，到處改顯然是不行的，我們應該做好封裝
小結
本文介紹了 React 的高級組件的兩個方式，各有優缺點，但它們都是為了重用代碼，我們可以自己選擇喜歡的模式去做
高階組件代理模式可以更好的控制和實現，繼承模式則可以控制特定組件的生命周期，與高階組件相比， Render Props 模式更加靈活，有函數，我們可以更自由
