Когда использовать HOC. Когда использовать функцию как ребенок

Question

Я совсем запутался. Я не так давно узнал о HOCs. Хотя я еще не смог сделать действительно хороший (полезный) HOC, я понимаю, как это работает. (Ну, если бы кто-то мог дать мне некоторые реальные решения с HOC, я бы поблагодарил это: D). Но потом ... есть вещь, которую я только что прочитал СЕЙЧАС: функционирует как ребенок

return (
    <div>
        {this.props.children(this.state.visible)}
    </div>
)


{(visible) =>
    visible ?
    <Placeholder/> : ''
}

Это выглядит ОЧЕНЬ круто, но, как и в случае с HOC, я не уверен, где я могу его использовать, И где я могу использовать его вместо HOC (и наоборот).

(На самом деле меня больше смущает функция «Ребенок» (знаю, как она работает). Я понятия не имел, где ее использовать и почему над HOC).

Answer 1

Я использую HOC для PrivateRouting. Вот один пример, когда проверяется, прошел ли пользователь аутентификацию с использованием приставки.

import React from 'react';
import { connect } from 'react-redux';
import { Route, Redirect } from 'react-router-dom';
import Header from '../components/Header';

export const PrivateRoute = ({
  isAuthenticated,
  component: Component,
  ...rest
  }) => (
    <Route {...rest} component={(props) => (
      isAuthenticated
        ? (
          <div>
            <Header />
            <Component {...props} />
          </div>)
        : (<Redirect to="/" />)
    )} />
  );

const mapStateToProps = (state) => ({
  isAuthenticated: !!state.auth.uid
});

export default connect(mapStateToProps)(PrivateRoute); 

// ИСПОЛЬЗОВАНИЕ

<PrivateRoute path="/edit/:id" component={SomeEditPage} />

Если пользователь аутентифицирован, то он может пойти и отредактировать что-то, если нет, он направит его к домашнему маршруту ('/')