React 中傳遞組件的三種方式

1. React Element as Prop (即我們通常所說(shuō)的組合)

這種方式是最常見的一種方式，我們可以將一個(gè) React Element 作為另一個(gè)組件的 prop，然后在內(nèi)部通過(guò)props.children來(lái)渲染這個(gè) React Element。這種方式的好處是簡(jiǎn)單易用，但是缺點(diǎn)也很明顯，那就是我們不方便對(duì)傳遞進(jìn)來(lái)的 React Element 進(jìn)行控制，比如我們很難對(duì)其 props 進(jìn)行控制。

假如我們?cè)O(shè)計(jì)一個(gè) Button 組件，Button 內(nèi)部的 Icon 區(qū)域交由外部來(lái)控制，那么我們可以這樣設(shè)計(jì)：

// App.js
const App = () => <Button icon={<Icon />}>按鈕</Button>;
// Button.js
function Button(props) {
  return (
    <button>
      {props.icon}
      {props.children}
    </button>
  );
}

如果按鈕 Icon 的顏色要受到 APP 內(nèi)的 state 控制，我們很容易實(shí)現(xiàn)這樣的功能：

// App.js
const App = () => {
  const [color, setColor] = useState("red");
  return (
    <Button
      icon={<Icon color={color} />}
      onClick={() => setColor(color === "red" ? "blue" : "red")}
    >
      按鈕
    </Button>
  );
};

可見，這種方式下，傳遞的組件 Icon 很容易獲取外部環(huán)境 APP 組件的 state。但是如果 Icon 想獲取 Button 組件的內(nèi)部 state ,那么就不太容易了，因?yàn)?Button 組件無(wú)法控制 Icon 組件的 props。那么有沒(méi)有一種方式可以讓 Icon 組件獲取到 Button 組件的內(nèi)部 state 呢？答案是肯定的，那就是下面要介紹的第二種方式。

2. Component Function as Prop(傳遞組件函數(shù))

這種方式，我們傳遞的是組件的函數(shù)，而不是組件本身。這樣一來(lái)，我們就可以在組件內(nèi)部控制傳遞進(jìn)來(lái)的組件的 props 了。我們可以通過(guò)這種方式來(lái)實(shí)現(xiàn)上面的需求：

// App.js
import Icon from "./Icon";
const App = () => {
  return <Button icon={Icon}>按鈕</Button>;
};
// Button.js
function Button(props) {
  const Icon = props.icon; // 這里的 Icon 就是一個(gè)組件函數(shù),注意Icon的首字母要大寫
  const [color, setColor] = useState("red");
  return (
    <button>
      <Icon color={color} />
      {props.children}
    </button>
  );
}

可見，這種組件傳遞方式，我們可以在 Button 組件內(nèi)部控制 Icon 組件的 props，這樣 Icon 組件就可以獲取到 Button 組件的內(nèi)部 state 了。但是，這種方式也有缺點(diǎn)，那就是 Icon 不能獲取外部環(huán)境（APP）的 state 了。那么有沒(méi)有一種方式可以讓 Icon 組件既能獲取到 Button 組件的內(nèi)部 state，又能獲取到外部環(huán)境（APP）的 state 呢？答案是肯定的，那就是下面要介紹的第三種方式。

3. Render Function as Prop(即 render props 渲染屬性)

這種方式，我們傳遞的是一個(gè)函數(shù)，通過(guò)函數(shù)的參數(shù)，我們可以獲取 Button 組件的內(nèi)部狀態(tài)。因?yàn)楹瘮?shù)是在外部環(huán)境（APP) 內(nèi)聲明的，所以也很容易獲得外部狀態(tài)。我們可以通過(guò)這種方式來(lái)實(shí)現(xiàn)上面的需求：

// App.js
import Icon from "./Icon";
const App = () => {
  const [size, setSize] = useState(16);
  return (
    <Button renderIcon={(color) => <Icon color={color} size={size} />}>
      按鈕
    </Button>
  );
};
// Button.js
function Button(props) {
  const [color, setColor] = useState("red");
  return (
    <button>
      {props.renderIcon(color)}
      {props.children}
    </button>
  );
}

總結(jié)

• 看完上面的分析，你可能會(huì)認(rèn)為 render props 是最好的傳遞組件的方式，但是其實(shí)不然，render props 也有缺點(diǎn)：a.組件層級(jí)不清晰，可讀性差；b.re-render 問(wèn)題。所以，我們?cè)趯?shí)際開發(fā)中，應(yīng)該根據(jù)實(shí)際情況來(lái)選擇傳遞組件的方式：

如果傳遞的組件只需要獲取外部環(huán)境的 state，那么我們可以使用 React Element as Prop 的方式；

如果傳遞的組件需要獲取宿主組件的 state，那么我們可以使用 Component Function as Prop 的方式；

如果傳遞的組件需要獲取宿主組件的 state，同時(shí)也需要獲取外部環(huán)境的 state，那么我們可以使用 Render Function as Prop 的方式。

• 其實(shí) React Element as Prop 的方式可以通過(guò) React.cloneElement() 來(lái)獲取宿主組件的內(nèi)部狀態(tài)。Componet Function as Prop 的方式可以通過(guò)高階組件（HOC）的方式來(lái)注入外部狀態(tài)。所以三種組件傳遞方式都可以做到內(nèi)外部狀態(tài)的獲取，只不過(guò)那樣的代碼不夠優(yōu)雅。

• 對(duì)于 Button 組件來(lái)說(shuō)，第一種方式 props.icon 是一個(gè) object, 后面兩種方式 props.icon 都是 function ，可能有些人會(huì)搞不懂他們的區(qū)別，其實(shí)區(qū)別在于 Button 內(nèi)部消費(fèi) props.icon 的方式不同，一種是當(dāng)成函數(shù)來(lái)調(diào)用執(zhí)行，一種是當(dāng)做函數(shù)組件來(lái)聲明。

以上就是React中傳遞組件的三種方式小結(jié)的詳細(xì)內(nèi)容，更多關(guān)于React傳遞組件的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論