React Javascript中高階函數中的兩個箭頭是什么

Question

以下是我正在查看的一個示例 HOC 函數，但在兩個箭頭方面沒有得到它的含義，特別是第二個我們正在解構兒童和道具的地方。

const HOCFunction = (PassComponent) => ({children, ...props}) => {
  return (<PassComponent {...props}>
    {children.split("").reverse().join("")}
  </PassComponent>)
}

從 React 文檔中提到的定義：

高階組件是一個函數，它接受一個組件並返回一個新組件。

那么這第二個參數到底是做什么用的呢？

全碼：

const reverse = (PassedComponent) =>
  ({ children, ...props }) =>
    <PassedComponent {...props}>
      {children.split("").reverse().join("")}
    </PassedComponent>

const name = (props) => <span>{props.children}</span>
const reversedName = reverse(name)
<reversedName>Hello</reversedName>

Answer 1

像這樣定義的 HOC 實際上只是高階函數。 返回函數的函數。 在這種情況下，第一個函數接受一個要裝飾的 react 組件，並返回一個函數組件，其參數是最終將使用的組件的 props。

或許把圖解分解一下會更好。

// decorate some passed component
const reverse = (PassedComponent) => {
  // define a new functional component
  const WrappedComponent = ({ children, ...props}) => {
    ...
    return (
      <PassedComponent {...props}>
        {children.split("").reverse().join("")}
      </PassedComponent>
    );
  }

  // return new wrapped component with reversed children
  return WrappedComponent;
}

Answer 2

高階組件是一個函數，它接受一個組件並返回一個新組件。

讓我們分解你的代碼來理解這兩個函數是什么，props 和 children 是什么

const Name = (props) => <span>{props.children}</span>

Name現在只是一個函數組件，所以調用它就像

<Name>Stack OverFlow<Name/>

將<span>Stack OverFlow</span>渲染到 dom。

現在讓我們看看 hoc，

const reverse = (PassedComponent) =>
  ({ children, ...props }) =>
    <PassedComponent {...props}>
      {children.split("").reverse().join("")}
    </PassedComponent>

reverse 只是返回另一個函數的函數。 寫它的好老方法是

var reverse = function reverse(PassedComponent) {
  return function (props) {
    var children = props.children,
        propsWithoutChildren = _objectWithoutProperties(props, ["children"]); //some function to remove children from props

    return (
      <PassedComponent {...propsWithoutChildren}>
        {children.split("").reverse().join("")}
      </PassedComponent>
     )
  };
};

現在，當您調用const reversedName = reverse(name) ，反向名稱將是一個新組件，它是從 HOC 返回的函數，相當於

const ReversedName = ({ children, ...props }) =>
  <Name {...props}> //the component you passed is used here
    {children.split("").reverse().join("")}
  </Name>

傳遞{...props}允許你將任何額外的 props 傳遞給 name 組件。 例如，如果您使用這樣的反向名稱，

<ReversedName className='class-for-name-component'>name</ReversedName>

className道具將傳遞給 name 組件。 整個想法是實現可重用性，因為在這里您渲染相同的組件名稱以直接和反向格式渲染名稱。 希望這可以幫助。

Answer 3

首先，您的代碼在語法上是錯誤的。 因為 React 組件名稱應該以大寫字母開頭。 現在，

你的基礎組件是這樣的。

const Name = props => <span>{props.children}</span>;

它將 Props 對象作為輸入，其中包含具有屬性 nae children 的子級。 控制台記錄以下內容，
<Name>Hello</Name>在你會得到

props: {children: "Hello"}

所以 Name 組件采用包含 children 的 props 對象，即字符串並使用 {props.children} 包含它

現在 HOF 是一個函數，它將函數作為參數並返回另一個函數。 在 React 語言中，它被命名為 HOC，是一個函數，它接受一個 React 組件作為參數並返回另一個 React 組件。 為避免傳播運算符混淆，您可以修改 reverse 如下。

const reverse = PassedComponent => props => {
  return (
    <PassedComponent>
      {props.children
        .split("")
        .reverse()
        .join("")}
    </PassedComponent>
  );
};

const ReversedName = reverse(Name);

在上面的代碼中，從 HOC 返回的組件將 props 作為輸入對象。 所以這里<ReversedName>Hello</ReversedName> ，Hello 將作為 props.children。 所以它反轉 props.children 並將其作為子級傳遞給傳遞的組件<Name> 。 所以它轉換如下。

<Name>"olleH"</Name>, which will appended inside <span> tag and be displayed on screen.

所以我的建議是學習記錄任何 JSX 並查看對象的結構，這將避免所有道具兒童混淆並提高您的反應知識。