React 中傳遞組件的三種方式

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

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

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

// 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 組件無法控制 Icon 組件的 props。那么有沒有一種方式可以讓 Icon 組件獲取到 Button 組件的內(nèi)部 state 呢？答案是肯定的，那就是下面要介紹的第二種方式。

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

這種方式，我們傳遞的是組件的函數(shù)，而不是組件本身。這樣一來，我們就可以在組件內(nèi)部控制傳遞進(jìn)來的組件的 props 了。我們可以通過這種方式來實(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 就是一個組件函數(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 了。那么有沒有一種方式可以讓 Icon 組件既能獲取到 Button 組件的內(nèi)部 state，又能獲取到外部環(huán)境（APP）的 state 呢？答案是肯定的，那就是下面要介紹的第三種方式。

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

這種方式，我們傳遞的是一個函數(shù)，通過函數(shù)的參數(shù)，我們可以獲取 Button 組件的內(nèi)部狀態(tài)。因?yàn)楹瘮?shù)是在外部環(huán)境（APP) 內(nèi)聲明的，所以也很容易獲得外部狀態(tà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é)

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

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

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

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

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

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

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

最新評論