Интервьюер: Расскажите о HOC, Render props, Hooks.

JavaScript

В прошлом мы, возможно, видели много статей, анализирующих HOC и реквизиты для рендеринга, но в 2020 году у нас появился новый любимый «крючок».

В этой статье будут проанализированы преимущества и недостатки трех паттернов — хуков, рендеринга и HOC.Позволим вам досконально понять эти три паттерна и расскажем, почему вы должны использовать хуки как можно чаще.

HOC

Как создать ХОК

Чтобы изучить HOC, нам нужно всего лишь запомнить следующие 2 определения:

  1. Создайте функцию, которая принимает компонент в качестве входных данныхКроме компонентов могут передаваться и другие параметры
  2. На основе этого компонента возвращается другой компонент.

код показывает, как показано ниже:

function withSubscription(WrappedComponent, selectData) {
  return class extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        data: selectData(DataSource, props)
      };
    }
    // 一些通用的逻辑处理
    render() {
      // ... 并使用新数据渲染被包装的组件!
      return <WrappedComponent data={this.state.data} {...this.props} />;
    }
  };
}

Преимущества HOC

  • Не влияет на состояние внутренних компонентов, уменьшая сцепление

Недостатки HOC

  • Фиксированные реквизиты могут быть переопределены.
<MyComponent
  x="a"
  y="b"
/>

Если эти два значения совпадают со значениями компонентов более высокого порядка, то x, y будут перезаписаны значениями компонентов более высокого порядка.

// 如果 withMouse 和 withPage 使用了同样的 props, 比如 x , y.
// 则会有冲突.
export default withMouse(withPage(MyComponent));
  • Он не четко определяет источник данных

withMouse(MyComponent) Он не говорит вам, какие реквизиты включены в компонент, что увеличивает время отладки и исправления кода.

render props

Функция: передать состояние в компоненте в качестве реквизита вызывающей стороне, и вызывающая сторона может динамически решать, как выполнять рендеринг.

Как создать реквизит для рендеринга

  1. Получить переданное извне свойство реквизита
  2. Передайте внутреннее состояние в качестве аргумента методу свойства props вызывающего компонента.

код показывает, как показано ниже:

class Mouse extends React.Component {
  constructor(props) {
    super(props);
    this.state = { x: 0, y: 0 };
  }

render() {
return (
<div style={{ height: '100%' }}>
// 使用 render props 属性来确定要渲染的内容
{this.props.render(this.state)}
</div>
);
}
}
// 调用方式:
<Mouse render={mouse => (
<p>鼠标的位置是 {mouse.x}，{mouse.y}</p>
)}/>

недостаток

  • Доступ к данным невозможен вне оператора return

Он не позволяет использовать свои данные вне оператора return.Как и в приведенном выше примере, значения x и y нельзя использовать в хуке useEffect или где-либо еще в компоненте, доступном только в операторе return.

  • вложенный

Это может легко привести к вложенному аду.Следующий код:

const MyComponent = () => {
  return (
    <Mouse>
      {({ x, y }) => (
        <Page>
          {({ x: pageX, y: pageY }) => (
            <Connection>
              {({ api }) => {
                // yikes
              }}
            </Connection>
          )}
        </Page>
      )}
    </Mouse>
  )
};

Исходя из двух вышеперечисленных способов, оба имеют свои недостатки, тогда приходим к самому ароматному решению: крючок

hook

Давайте посмотрим на пример:

const { x, y } = useMouse();
const { x: pageX, y: pageY } = usePage();

useEffect(() => {


}, [pageX, pageY]);

Как видно из приведенного выше кода, хук имеет следующие характеристики: Он устраняет недостатки вышеупомянутых свойств hoc и render.

  • крючки можно переименовывать

Если параметры, предоставляемые двумя хуками, одинаковы, мы можем просто переименовать их.

  • Крюк будет четко обозначать источник

Как видно из приведенного выше примера, x и y являются производными от useMouse, ниже x, y являются производными от usePage.

  • хуки позволяют использовать данные вне возврата
  • хуки не вложены
  • Простой и легкий для понимания Сравнение hoc и render props очень интуитивно понятно и легко для понимания.

Суммировать

При выборе между хуками, реквизитами рендеринга и HOC (компонентами более высокого порядка) по возможности следует использовать хуки.

Справочная статья[1]

наконец

Обратите внимание на «Front-end Jiajia» и получите качественные статьи в первый раз.

использованная литература

[1]

Справочная статья:https://dev.to/bettercodingacademy/react-hooks-vs-render-props-vs-higher-order-components-1al0
Категории