Введение

ReactКомпоненты высшего порядка (HOC), для многихreactЭто не чуждо разработчикам, оно гибкое в использованииreactМетод компонентов, компонент высшего порядка сам по себе не является компонентом, это функция компонента, параметр которого является компонентом, и возвращаемое значение также является компонентом. Действия высшего порядка используются дляУсильте компоненты, повторно используйте логику, улучшите производительность рендеринга и т. д.эффект. Разобраться в высокоуровневых компонентах не сложно.На самом деле это довольно просто после прикосновения.Далее буду следить,Понимание компонентов высшего порядка?,Как использовать компоненты высшего порядка? Сценарии применения,Расширенная практика компонентов (уровень исходного кода)Для прорыва давайте подробно рассмотрим компоненты высокого уровня. Эта статья относительно длинная, рекомендуется собрать и посмотреть

Начнем сегодняшнюю дискуссию с вопроса:

1 Что такое компонент более высокого порядка и какую проблему он решает?
2 Существует несколько видов компонентов высшего порядка, каковы их преимущества и недостатки?
3 Как написать отличный компонент высокого порядка?
4 hocКак работать со статическими свойствами на разных уровняхrefИ другие вопросы?
5 Как управлять компонентами высококачественного управления и изолирующим рендерингами?
6 Как компонент более высокого порядка контролирует состояние исходного компонента?
...

Компоненты высшего порядка (HOC) — это продвинутая техника в React для повторного использования логики компонентов. HOC сам по себе не является частью React API, это шаблон проектирования, основанный на композиционной природе React.

2. Всесторонний взгляд на высокоуровневые компоненты

1 Несколько способов упаковки компонентов арматуры

① смешанный режим

Прототип

старая версия`react-mixins`

существуетreactИзначально предусмотрен комбинированный подход. пройти черезReact.createClass,Присоединяйсяmixinsсвойства, конкретное использование иvueсерединаmixinsсходство. Конкретная реализация заключается в следующем.

const customMixin = {
  componentDidMount(){
    console.log( '------componentDidMount------' )
  },
  say(){
    console.log(this.state.name)
  }
}

const APP = React.createClass({
  mixins: [ customMixin ],
  getInitialState(){
    return {
      name:'alien'
    }
  },
  render(){
    const { name  } = this.state
    return <div> hello ,world , my name is { name } </div>
  }
})

этоmixinsможет существовать толькоcreateClassв, позжеReact.createClassвместе сmixinsЭтот режим устарел.mixinsбудет иметь некоторые негативные последствия.

1 Mixin вводит неявные зависимости.
2. Могут возникнуть проблемы с последовательностью или даже с охватом конфликтов кода между разными миксинами.
3 Код Mixin может привести к снежному кому сложности

Производный способ

createClassустаревшее, не значитmixinвыход из режимаreactЭтап в компоненте с отслеживанием состоянияclass, мы можем пройтиНаследование цепочки прототиповреализоватьmixins.

const customMixin = {  /* 自定义 mixins */
  componentDidMount(){
    console.log( '------componentDidMount------' )
  },
  say(){
    console.log(this.state.name)
  }
}

function componentClassMixins(Component,mixin){ /* 继承 */
  for(let key in mixin){
    Component.prototype[key] = mixin[key]
  }
}

class Index extends React.Component{
  constructor(){
    super()
    this.state={  name:'alien' }
  }
  render(){
    return <div> hello,world
      <button onClick={ this.say.bind(this) } > to say </button>
    </div>
  }
}
componentClassMixins(Index,customMixin)

②расширяет режим наследования

Прототип

существуетclassПосле того, как компоненты станут популярными, мы сможем дополнительно усилить наши компоненты посредством наследования. Преимущество этого режима в том, что вы можете инкапсулировать основные функциональные компоненты, а затем перейти кextendsНаши основные компоненты, усиливайте компоненты по мере необходимости, но стоит отметить, что вы должны достаточно овладеть базовыми компонентами, иначе это вызовет ряд непредвиденных ситуаций.

class Base extends React.Component{
  constructor(){
    super()
    this.state={
      name:'alien'
    }
  }
  say(){
    console.log('base components')
  }
  render(){
    return <div> hello,world <button onClick={ this.say.bind(this) } >点击</button>  </div>
  }
}
class Index extends Base{
  componentDidMount(){
    console.log( this.state.name )
  }
  say(){ /* 会覆盖基类中的 say  */
    console.log('extends components')
  }
}
export default Index

Режим ③hoc

Прототип

HOCЭто основное содержание этой главы, конкретное использование, мы будем говорить об этом медленно, давайте сначала попробуем простойHOC.

function HOC(Component) {
  return class wrapComponent extends React.Component{
     constructor(){
       super()
       this.state={
         name:'alien'
       }
     }
     render=()=><Component { ...this.props } { ...this.state } />
  }
}

@HOC
class Index extends React.Component{
  say(){
    const { name } = this.props
    console.log(name)
  }
  render(){
    return <div> hello,world <button onClick={ this.say.bind(this) } >点击</button>  </div>
  }
}

④Режим пользовательских хуков

Прототип

hooksРождение большой части причины заключается в том, чтобы решитьНет компонента без гражданстваstateа такжеЛогику сложно использовать повторновопрос.hooksВы можете инкапсулировать часть логики и использовать ее «из коробки», я не буду говорить об этом здесь.react-hooksСтатья о принципах, полнаяreact-hooksТрилогия. Заинтересованные студенты могут прочитать две другие статьи автора, которые подробно знакомятreact-hooksПринципы и схемы повторного использования логики кода.

Портал:

Играйте с реактивными хуками, пользовательскими шаблонами дизайна хуков и их реальной борьбой

Как используются реактивные хуки?

2 Первоначальный замысел компонентов высокого порядка

компонентыpropвизуализировать какUI, И компонент высокого уровня должен преобразовать компонент в другой компонент.На что мы должны обратить больше внимания, так это на то, что упакованный компонент получил эти улучшения, сколько логики сохранено или устранены дефекты исходного компонента.Это компонент высокого уровня Значение компонентов заказа. Давайте сначала подумаем, какую проблему решают компоненты высокого порядка 🤔🤔🤔?

① Логика мультиплексирования: Компоненты более высокого порядка больше похожи на механическую обработку.reactФабрика компонентов, серийная обработка оригинальных компонентовобработка,Упаковкаиметь дело с. Мы можем настроить эксклюзив в соответствии с потребностями бизнесаHOC, который может решить логику мультиплексирования.

② Укрепить реквизит:ЭтоHOCОдно из наиболее распространенных применений — компоненты, возвращаемые компонентами более высокого порядка, могут перехватывать компоненты, переданные с предыдущего уровня.props, затем вмешайте новыйprops, чтобы улучшить функциональность компонента. шедеврreact-routerсерединаwithRouter.

③ Включение компонентов:HOCимеет уникальную особенность, которую можно придатьHOCУпакованные бизнес-компоненты, предоставляющие некоторые расширенные функции, такие какдополнительный жизненный цикл, дополнительное событие, но этоHOC, которые могут нуждаться в тесной интеграции с бизнес-компонентами. Типичный случайreact-keepalive-routerсерединаkeepaliveLifeCycleчерезHOCобразом, добавляя дополнительный жизненный цикл бизнес-компоненту.

④ Контроль рендеринга: угнать рендеринг даhocособенность вwrapComponentПри упаковке компонентов можно выполнять операции над исходными компонентами.条件渲染,节流渲染,懒加载и другие функции, о которых будет подробно рассказано позже, типичные представители выполняютreact-reduxсерединаconnectа такжеdvaсерединаdynamicКомпоненты загружаются лениво.

Я сосредоточусь на первоначальном замысле компонентов более высокого порядка и подробно расскажу об их принципах и использовании. Следите за моими идеями, давайте сначала взглянем на высокоуровневые компоненты.Как это используется в наших бизнес-компонентах.

3 Компоненты более высокого порядка используют и записывают структуры

HOCРуководство по использованию очень простое, просто оберните наш компонент.

Использование: шаблон декоратора и шаблон оболочки функции

дляclassОбъявив компоненты с состоянием, мы можем использовать шаблон декоратора для обертывания компонентов класса:

@withStyles(styles)
@withRouter
@keepaliveLifeCycle
class Index extends React.Componen{
    /* ... */
}

Мы должны обратить внимание на порядок упаковки, чем ближеIndexКомпонент — внутренний слойHOC, вдали от компонентаIndexтакже ближе.

Для компонентов без состояния (объявлений функций) мы можем написать:

function Index(){
    /* .... */
}
export default withStyles(styles)(withRouter( keepaliveLifeCycle(Index) ))

Модель: вложенный HOC

Для тех, кому не нужно передавать параметрыHOC, мы пишем модель, нам нужно только вложить один уровень, напримерwithRouter,

function withRouter(){
    return class wrapComponent extends React.Component{
        /* 编写逻辑 */
    }
}

для параметров, которые требуютHOC, нам нужен слой прокси, как показано ниже:

function connect (mapStateToProps){
    /* 接受第一个参数 */
    return function connectAdvance(wrapCompoent){
        /* 接受组件 */
        return class WrapComponent extends React.Component{  }
    }
}

Мы видим дваhocМодель очень проста.Для прокси-функции может быть один слой, может быть много слоев, но не бойтесь, сколько бы слоев по сути не было одинаковым, нам нужно только отслаивать слой за слоем, проанализировать структуру, всюhocСтруктура и контекст хорошо видны. Пройти черезhocТоже легко.

4 Два разных компонента более высокого порядка

Существует два способа часто используемых компонентов высшего порядка.Прокси-сервер впереда такжеОбратное наследование компонентов, есть некоторые общие черты и различия между ними. Далее будет подробно представлена разница между ними, а конкретная реализация будет подробно представлена в третьей части.

Переадресация прокси-атрибута

Так называемый прямой прокси-атрибут предназначен для обертывания слоя прокси-компонентов компонентами.На прокси-компонентах мы можем выполнять некоторые прокси-операции над исходными компонентами. существуетfiber treeвверх, первыйmountedПрокси-компонент, а затем наш бизнес-компонент. Мы можем понять это как отношение родительского компонента к дочернему, и родительский компонент выполняет ряд операций по усилению над дочерним компонентом.

function HOC(WrapComponent){
    return class Advance extends React.Component{
       state={
           name:'alien'
       }
       render(){
           return <WrapComponent  { ...this.props } { ...this.state }  />
       }
    }
}

преимущество

① Обычный агент атрибутов может иметь низкую связанность и нулевую связь с бизнес-компонентами.条件渲染а такжеprops属性增强, отвечающий только за управление рендерингом дочерних компонентов и передачу дополнительныхpropsЭто нормально, так что вам не нужно знать, что делает бизнес-компонент. Таким образом, прямой прокси-атрибут больше подходит для некоторых проектов с открытым исходным кодом.hoc, в настоящее время с открытым исходным кодомHOCЭто в основном достигается с помощью этого режима.
② То же самое относится кclassобъявление компонентов иfunctionЗаявленные компоненты.
③ Рендеринг бизнес-компонентов может быть полностью изолирован, по сравнению с обратным наследованием используется режим атрибутивного прокси. Вы можете полностью контролировать визуализацию бизнес-компонента или нет, чего можно избежать反向继承Принесите некоторые побочные эффекты, такие как выполнение жизненного цикла.
④ Может быть вложенным, множественнымhocМожет быть вложенным и, как правило, не ограничивает упаковкуHOCпорядок старшинства.

недостаток

① Как правило, статус бизнес-компонентов нельзя получить напрямую, если вы хотите его получить, вам необходимоrefПолучите экземпляр компонента.
② Статические свойства нельзя наследовать напрямую. Если вам нужно наследовать, вам нужно обработать это вручную или ввести стороннюю библиотеку.

пример:

class Index extends React.Component{
  render(){
    return <div> hello,world  </div>
  }
}
Index.say = function(){
  console.log('my name is alien')
}
function HOC(Component) {
  return class wrapComponent extends React.Component{
     render(){
       return <Component { ...this.props } { ...this.state } />
     }
  }
}
const newIndex =  HOC(Index) 
console.log(newIndex.say)

распечатать результат

обратное наследование

Между обратным наследованием и прокси свойств есть определенная разница: упакованный компонент наследует сам бизнес-компонент, поэтому нам не нужно создавать экземпляр нашего бизнес-компонента. Текущий компонент высокого порядка является расширенным бизнес-компонентом после наследования. Этот подход аналогичен усилению защиты компонентов, поэтому вам необходимо знать текущую

class Index extends React.Component{
  render(){
    return <div> hello,world  </div>
  }
}
function HOC(Component){
    return class wrapComponent extends Component{ /* 直接继承需要包装的组件 */

    }
}
export default HOC(Index)

преимущество

① Удобно получать внутреннее состояние компонента, напримерstate,props, жизненный цикл, функции связанных событий и т. д.
②es6Наследование может хорошо наследовать статические свойства. Нам не нужно выполнять дополнительную обработку статических свойств и методов.

class Index extends React.Component{
  render(){
    return <div> hello,world  </div>
  }
}
Index.say = function(){
  console.log('my name is alien')
}
function HOC(Component) {
  return class wrapComponent extends Component{
  }
}
const newIndex =  HOC(Index) 
console.log(newIndex.say)

распечатать результат

недостаток

① Нельзя использовать компоненты без состояния.
② Сильная связь с упакованным компонентом, вам нужно знать внутреннее состояние упакованного компонента, что конкретно он делает?
③ Если множественное обратное наследованиеhocВложенные вместе, текущее состояние переопределяет предыдущее состояние. Скрытые опасности, приносимые этим, очень велики, например, многоcomponentDidMount,токcomponentDidMountперезапишет предыдущийcomponentDidMount. Такие побочные эффекты связаны последовательно и имеют большое влияние.

3 Как писать компоненты высшего порядка

Далее давайте посмотрим, как написать компонент высокого уровня.Вы можете обратиться к следующим сценариям, чтобы написать свой собственныйHOC.

1 Укрепить реквизит

① Добавьте реквизит

Это наиболее часто используемая функция высокоуровневых компонентов, которая берет на себя функции верхнего уровня.props, смешивая в себеprops, для усиления компонента.

Компоненты с отслеживанием состояния (прокси свойства)

function classHOC(WrapComponent){
    return class  Idex extends React.Component{
        state={
            name:'alien'
        }
        componentDidMount(){
           console.log('HOC')
        }
        render(){
            return <WrapComponent { ...this.props }  { ...this.state }   />
        }
    }
}
function Index(props){
  const { name } = props
  useEffect(()=>{
     console.log( 'index' )
  },[])
  return <div>
    hello,world , my name is { name }
  </div>
}

export default classHOC(Index)

Компоненты с отслеживанием состояния (прокси свойства)

То же самое относится и к компонентам без состояния.

function functionHoc(WrapComponent){
    return function Index(props){
        const [ state , setState ] = useState({ name :'alien'  })       
        return  <WrapComponent { ...props }  { ...state }   />
    }
}

Эффект

② Извлеките обновление управления состоянием

Компоненты высокого порядка могутHOCизstateОн работает вместе, чтобы контролировать обновление бизнес-компонентов. Это использование находится вreact-reduxсерединаconnectИспользуется в компонентах более высокого порядка для обработки данных изreduxсерединаstateИзменения, приносящие эффект обновлений подписки.

Мы изменим приведенный выше код.

function classHOC(WrapComponent){
  return class  Idex extends React.Component{
      constructor(){
        super()
        this.state={
          name:'alien'
        }
      }
      changeName(name){
        this.setState({ name })
      }
      render(){
          return <WrapComponent { ...this.props }  { ...this.state } changeName={this.changeName.bind(this)  }  />
      }
  }
}
function Index(props){
  const [ value ,setValue ] = useState(null)
  const { name ,changeName } = props
  return <div>
    <div>   hello,world , my name is { name }</div>
    改变name <input onChange={ (e)=> setValue(e.target.value)  }  />
    <button onClick={ ()=>  changeName(value) }  >确定</button>
  </div>
}

export default classHOC(Index)

Эффект

屏幕录制2021-03-13 下午6.gif

2 Управление рендерингом

Управление рендерингом — очень важная функция компонентов высшего порядка.Упомянутые выше два типа компонентов высшего порядка могут управлять рендерингом компонентов. Конкретная реализация все же отличается, давайте изучим ее вместе.

2.1 Условный рендеринг

① Основы: динамическая визуализация

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

Реализовать HOC, который динамически монтирует компоненты

function renderHOC(WrapComponent){
  return class Index  extends React.Component{
      constructor(props){
        super(props)
        this.state={ visible:true }  
      }
      setVisible(){
         this.setState({ visible:!this.state.visible })
      }
      render(){
         const {  visible } = this.state 
         return <div className="box"  >
           <button onClick={ this.setVisible.bind(this) } > 挂载组件 </button>
           { visible ? <WrapComponent { ...this.props } setVisible={ this.setVisible.bind(this) }   />  : <div className="icon" ><SyncOutlined spin  className="theicon"  /></div> }
         </div>
      }
  }
}

class Index extends React.Component{
  render(){
    const { setVisible } = this.props
    return <div className="box" >
        <p>hello,my name is alien</p>
        <img  src='https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=294206908,2427609994&fm=26&gp=0.jpg'   /> 
        <button onClick={() => setVisible()}  > 卸载当前组件 </button>
    </div>
  }
}
export default renderHOC(Index)

Эффект:

屏幕录制2021-03-13 下午9.gif

② Дополнительно: фрагментированный рендеринг

Вы чувствуете, что это не очень приятно, чтобы укрепить понимание каждогоHOCДля понимания условного рендеринга я сделаю еще одинФрагментированный рендеринг + отложенная загрузкаФункция. Для того, чтобы все поняли, я тоже поломал голову 😂😂😂.

Дополнительно: реализовать HOC с функцией ленивой загрузки, которая может реализовать фрагментированный рендеринг компонентов, который используется для фрагментарного рендеринга страниц, чтобы не отображать большое количество компонентов одновременно и вызывать эффект белого экрана.

const renderQueue = []
let isFirstrender = false

const tryRender = ()=>{
  const render = renderQueue.shift()
  if(!render) return
  setTimeout(()=>{
    render() /* 执行下一段渲染 */
  },300)
} 
/* HOC */
function renderHOC(WrapComponent){
    return function Index(props){
      const [ isRender , setRender ] = useState(false)
      useEffect(()=>{
        renderQueue.push(()=>{  /* 放入待渲染队列中 */
          setRender(true)
        })
        if(!isFirstrender) {
          tryRender() /**/
          isFirstrender = true
        }
      },[])
      return isRender ? <WrapComponent tryRender={tryRender}  { ...props }  /> : <div className='box' ><div className="icon" ><SyncOutlined   spin /></div></div>
    }
}
/* 业务组件 */
class Index extends React.Component{
  componentDidMount(){
    const { name , tryRender} = this.props
    /* 上一部分渲染完毕，进行下一部分渲染 */
    tryRender()
    console.log( name+'渲染')
  }
  render(){
    return <div>
        <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=294206908,2427609994&amp;fm=26&amp;gp=0.jpg" />
    </div>
  }
}
/* 高阶组件包裹 */
const Item = renderHOC(Index)

export default () => {
  return <React.Fragment>
      <Item name="组件一" />
      <Item name="组件二" />
      <Item name="组件三" />
  </React.Fragment>
}

Эффект

Общий процесс, при инициализации,HOCВ функции рендеринга, которая будет отображать реальный компонент, поместите его вrenderQueueПоставьте в очередь, затем инициализируйте рендеринг один раз, затем каждый компонент элемента, завершитеdidMountedПосле состояния следующая функция рендеринга будет взята из очереди, и будет рендериться следующий компонент, пока не будут выполнены все задачи рендеринга, очередь рендеринга не будет очищена и эффективно не будет выполнен фрагментированный рендеринг.Этот метод очень эффективен для отображения массивные данные..

использоватьHOCРеализована функция условного рендеринга - сегментированного рендеринга. Фактический условный рендеринг прост для понимания. Он заключается в управлении тем, монтировать ли компоненты через переменные для удовлетворения потребностей самого проекта. Условный рендеринг может развиваться во многих режимах. Здесь я представляю условный рендеринг.Двумя способами,надеюсь всем понятна суть.

③ Дополнительно: асинхронные компоненты (ленивая загрузка)

Я не знаю, использовали ли вы егоdva,внутриdynamicэто приложениеHOCКомпоненты, реализованные режимом, загружаются асинхронно, здесь я упростил его и уточнил основной код следующим образом:

/* 路由懒加载HOC */
export default function AsyncRouter(loadRouter) {
  return class Content extends React.Component {
    state = {Component: null}
    componentDidMount() {
      if (this.state.Component) return
      loadRouter()
        .then(module => module.default)
        .then(Component => this.setState({Component},
         ))
    }
    render() {
      const {Component} = this.state
      return Component ? <Component {
      ...this.props
      }
      /> : null
    }
  }
}

использовать

const Index = AsyncRouter(()=>import('../pages/index'))

hocТакже можно комбинировать с другимиAPI, выполните производную функцию. Совпадение, как указано вышеimportРеализовать функцию асинхронной загрузки.HOCС очень гибким,

④ Обратное наследование: перехват рендеринга

Режим обратного наследования HOC, который может обеспечить перехват гранулированного рендеринга, то есть может управлять компонентами базового класса.renderфункцию, вы также можете вмешиваться в реквизит илиchildren, давайте посмотрим, как использовать компоненты более высокого порядка в этом состоянии.


const HOC = (WrapComponent) =>
  class Index  extends WrapComponent {
    render() {
      if (this.props.visible) {
        return super.render()
      } else {
        return <div>暂无数据</div>
      }
    }
  }

⑤ Обратное наследование: изменить дерево рендеринга

Изменить состояние рендеринга (захватить рендеринг, чтобы заменить дочерние узлы)

class Index extends React.Component{
  render(){
    return <div>
       <ul>
         <li>react</li>
         <li>vue</li>
         <li>Angular</li>
       </ul>
    </div>
  }
}

function HOC (Component){
  return class Advance extends Component {
    render() {
      const element = super.render()
      const otherProps = {
        name:'alien'
      }
      /* 替换 Angular 元素节点 */
      const appendElement = React.createElement('li' ,{} , `hello ,world , my name  is ${ otherProps.name }` )
      const newchild =  React.Children.map(element.props.children.props.children,(child,index)=>{
           if(index === 2) return appendElement
           return  child
      }) 
      return  React.cloneElement(element, element.props, newchild)
    }
  }
}
export  default HOC(Index)

Эффект

Мы используем угон рендеринга для манипулированияsuper.render()ПослеReact.elementэлементы, затем вяжитеcreateElement , cloneElement , React.ChildrenЖдатьapi, можно гибко манипулировать, реальный рендерингreact.element, Можно сказать, что это день и день, и это радость.

2.2 Регулирование рендеринга

hocВ дополнение кусловный рендеринг,рендеринг угонаВ дополнение к функции, он также может выполнять троттлинговый рендеринг, то есть может оптимизировать производительность.Как это сделать, пожалуйста, не отставайте от моего ритма и смотрите вниз.

① Основы: принцип дросселирования

hocможет сотрудничатьhooksизuseMemoЖдатьAPIПри совместном использовании он может реализовать управление рендерингом бизнес-компонентов, сократить количество рендерингов и добиться эффекта оптимизации производительности. В следующем случае мы ожидаем тогда и только тогда, когдаnumПри изменении визуализируйте компонент, но не влияйте на полученныйprops. Мы должны написать нашHOC.

function HOC (Component){
     return function renderWrapComponent(props){
       const { num } = props
       const RenderElement = useMemo(() =>  <Component {...props}  /> ,[ num ])
       return RenderElement
     }
}
class Index extends React.Component{
  render(){
     console.log(`当前组件是否渲染`,this.props)
     return <div>hello,world, my name is alien </div>
  }
}
const IndexHoc = HOC(Index)

export default ()=> {
    const [ num ,setNumber ] = useState(0)
    const [ num1 ,setNumber1 ] = useState(0)
    const [ num2 ,setNumber2 ] = useState(0)
    return <div>
        <IndexHoc  num={ num } num1={num1} num2={ num2 }  />
        <button onClick={() => setNumber(num + 1) } >num++</button>
        <button onClick={() => setNumber1(num1 + 1) } >num1++</button>
        <button onClick={() => setNumber2(num2 + 1) } >num2++</button>
    </div>
}

Эффект:

Как показано на рисунке, когда мы только нажимаемnum++Когда дочерний компонент перерисовывается, нажимаются другие кнопки, и он отвечает только за передачуprops, для достижения желаемого эффекта.

② Дополнительно: индивидуальный процесс рендеринга

Мышление: 🤔 Вышеприведенный случай просто вводит принцип. В реальных проектах невозможно количественно оценить производство. Причина в том, что нам нужно ориентироваться на разныеpropsизменить, написать другоеHOCкомпоненты, это не запустится вообщеHocреальное использование, т.HOCисходное намерение. Поэтому нам нужноhocДля преобразования и обновления компонент может визуализировать компонент в соответствии с настроенным направлением. то естьHocПри генерации рендеринг выполняется по определенному контракту.

function HOC (rule){
     return function (Component){
        return function renderWrapComponent(props){
          const dep = rule(props)
          const RenderElement = useMemo(() =>  <Component {...props}  /> ,[ dep ])
          return RenderElement
        }
     }
}
/* 只有 props 中 num 变化 ，渲染组件  */
@HOC( (props)=> props['num'])
class IndexHoc extends React.Component{
  render(){
     console.log(`组件一渲染`,this.props)
     return <div> 组件一 ： hello,world </div>
  }
}

/* 只有 props 中 num1 变化 ，渲染组件  */
@HOC((props)=> props['num1'])
class IndexHoc1 extends React.Component{
  render(){
     console.log(`组件二渲染`,this.props)
     return <div> 组件二 ： my name is alien </div>
  }
}
export default ()=> {
    const [ num ,setNumber ] = useState(0)
    const [ num1 ,setNumber1 ] = useState(0)
    const [ num2 ,setNumber2 ] = useState(0)
    return <div>
        <IndexHoc  num={ num } num1={num1} num2={ num2 }  />
        <IndexHoc1  num={ num } num1={num1} num2={ num2 }  />
        <button onClick={() => setNumber(num + 1) } >num++</button>
        <button onClick={() => setNumber1(num1 + 1) } >num1++</button>
        <button onClick={() => setNumber2(num2 + 1) } >num2++</button>
    </div>
}

Эффект

Эффект достигается отлично. При этом используется шаблон компонентов более высокого порядка, которым можно гибко управлять.Reactна уровне компонентов,propsпоток данныха такжепоток обновлений, превосходные компоненты высшего порядка имеютmobxсерединаobserver ,inject , react-reduxсерединаconnect, Заинтересованные студенты, вы можете потратить время на изучение.

3 активирующих компонента

В дополнение к вышеуказанным двумя функциям, компоненты более высокого порядка могут также включить компоненты, такие как добавление некоторыхдополнительный生命周期,инцидент с угоном,Журналы мониторингаи т.п.

3.1 Захват цепочки прототипов — захват жизненного цикла, функции событий

① Реализация агента атрибутов

function HOC (Component){
  const proDidMount = Component.prototype.componentDidMount 
  Component.prototype.componentDidMount = function(){
     console.log('劫持生命周期：componentDidMount')
     proDidMount.call(this)
  }
  return class wrapComponent extends React.Component{
      render(){
        return <Component {...this.props}  />
      }
  }
}
@HOC
class Index extends React.Component{
   componentDidMount(){
     console.log('———didMounted———')
   }
   render(){
     return <div>hello,world</div>
   }
}

Эффект

② Реализация обратного наследования

Обратное наследование, так как на основе наследования исходных компонентов можноЖизненный циклилимероприятиеУгнать, а то и заменить.

function HOC (Component){
  const didMount = Component.prototype.componentDidMount
  return class wrapComponent extends Component{
      componentDidMount(){
        console.log('------劫持生命周期------')
        if (didMount) {
           didMount.apply(this) /* 注意 `this` 指向问题。 */
        }
      }
      render(){
        return super.render()
      }
  }
}

@HOC
class Index extends React.Component{
   componentDidMount(){
     console.log('———didMounted———')
   }
   render(){
     return <div>hello,world</div>
   }
}

3.2 Мониторинг событий

HOCОригинальные компоненты также можно контролировать. такие как некоторые事件监控,错误监控,事件监听Дождитесь серии операций.

① Мониторинг событий в компонентах

Далее делаемHOC, выполняйте мониторинг только для события click в компоненте.


function ClickHoc (Component){
  return  function Wrap(props){
    const dom = useRef(null)
    useEffect(()=>{
     const handerClick = () => console.log('发生点击事件') 
     dom.current.addEventListener('click',handerClick)
     return () => dom.current.removeEventListener('click',handerClick)
    },[])
    return  <div ref={dom}  ><Component  {...props} /></div>
  }
}

@ClickHoc
class Index extends React.Component{
   render(){
     return <div  className='index'  >
       <p>hello，world</p>
       <button>组件内部点击</button>
    </div>
   }
}
export default ()=>{
  return <div className='box'  >
     <Index />
     <button>组件外部点击</button>
  </div>
}

Эффект

3 ref help экземпляр компонента управления

Для прокси свойства, хотя мы и не можем напрямую получить состояние в компоненте, мы можем передатьrefПолучите экземпляр компонента, получите экземпляр компонента, вы можете получить некоторый статус компонента или вручную инициировать некоторые события для дальнейшего усиления компонента, но обратите внимание на:classТолько объявленные компоненты с состоянием имеют экземпляры,functionДля объявленного компонента без состояния не существует экземпляра.

① Агент по недвижимости — добавить дополнительный жизненный цикл

Мы можем добавить компоненту дополнительный жизненный цикл для определенной ситуации, я сделал простойdemo, мониторnumberизменить, еслиnumberИзменить, это автоматически вызовет функцию слушателя компонента.handerNumberChange. Конкретное письмо выглядит следующим образом

function Hoc(Component){
  return class WrapComponent extends React.Component{
      constructor(){
        super()
        this.node = null
      }
      UNSAFE_componentWillReceiveProps(nextprops){
          if(nextprops.number !== this.props.number ){
            this.node.handerNumberChange  &&  this.node.handerNumberChange.call(this.node)
          }
      }
      render(){
        return <Component {...this.props} ref={(node) => this.node = node }  />
      }
  }
}
@Hoc
class Index extends React.Component{
  handerNumberChange(){
      /* 监听 number 改变 */
  }
  render(){
    return <div>hello,world</div>
  }
}

Этот способ написания немного неудовлетворителен, не волнуйтесь, в четвертой части, в битве за исходный код, я представлю лучший сценарий. легко понять каждомуHocВключение оригинальных компонентов.

4 Резюме

Я следую вышеизложенномуhocОсновная функция,Укрепить реквизит,рендеринг управления,включение компонентовтри направленияHOCНапишите подробное введение, введение и сценарии применения, цельПусть все понимают, когда они будут использоваться, когда понимают высокоуровневые компоненты. , как писать? `Я всегда буду резюмировать точки знаний, затронутые в нем.

Для прокси-сервера недвижимости HOC мы можем:

Укрепляйте реквизит и извлекайте состояние.
Условный рендеринг, контролируемый рендеринг, фрагментированный рендеринг, отложенная загрузка.
Перехват событий и жизненных циклов
Экземпляр компонента управления ссылкой
Добавить прослушиватель событий, журнал

Для HOC обратного прокси мы можем:

Перехват рендеринга, манипулирование деревом рендеринга
Контролируйте/заменяйте жизненный цикл, напрямую получайте состояние компонента и связывайте события.

Для каждого сценария приложения я дал примеры 🌰🌰, вы можете использовать примеры, чтобы понять его принципы и способы использования в деталях.

Четыре исходных уровня компонентов высокого уровня

hocЕсть много сценариев приложений и много хороших проектов с открытым исходным кодом, которые мы можем изучить и на которые можно ссылаться.Далее я проанализирую функциональное использование в трех направлениях с точки зрения исходного кода.HOCиспользование.

1 Усилить prop-withRoute

использовалwithRouteодноклассники, все понимают его предназначение,withRouteЦель в том, что дляRouteЗавернутые компоненты, чтобы добавитьhistoryОбъекты и другие состояния, связанные с маршрутизацией, чтобы мы могли получать статус маршрутизации и выполнять переходы по маршруту в любом компоненте.HOCЦель ясна, укрепитьprops,ПучокRouterродственные состояния смешиваются вprops, давайте посмотрим, как это реализовано.


function withRouter(Component) {
  const displayName = `withRouter(${Component.displayName || Component.name})`;
  const C = props => {
      /*  获取 */
    const { wrappedComponentRef, ...remainingProps } = props;
    return (
      <RouterContext.Consumer>
        {context => {
          return (
            <Component
              {...remainingProps}
              {...context}
              ref={wrappedComponentRef}
            />
          );
        }}
      </RouterContext.Consumer>
    );
  };

  C.displayName = displayName;
  C.WrappedComponent = Component;
  /* 继承静态属性 */
  return hoistStatics(C, Component);
}

export default withRouter

withRouteПроцесс на самом деле очень прост, просто начните сpropsвыделитьrefа такжеprops, а затем сохранить весьrouteконтекст объектаRouterContextвыигратьrouteобъект, который затем смешивается с исходным компонентомpropsсредний, последний сhoistStaticsНаследовать статические свойства. Что касаетсяhoistStaticsМы вернемся к этому позже.

2 Управление рендерингом case connect

из-заconnectИсходный код относительно длинный и сложный для понимания, поэтому мы извлекаем суть, упрощаем и упрощаем, и обобщаем основные функции следующим образом:connectтакже оказывает влияние合并props, но что более важно принятьstate, чтобы управлять компонентом обновления. В следующем коде я упростил его для всеобщего удобства. Я надеюсь, вы можете понятьhocкакраспространятьа такжеконтрольпоток обновлений.

import store from './redux/store'
import { ReactReduxContext } from './Context'
import { useContext } from 'react'
function connect(mapStateToProps){
   /* 第一层： 接收订阅state函数 */
    return function wrapWithConnect (WrappedComponent){
        /* 第二层：接收原始组件 */
        function ConnectFunction(props){
            const [ , forceUpdate ] = useState(0)
            const { reactReduxForwardedRef ,...wrapperProps } = props
            
            /* 取出Context */
            const { store } = useContext(ReactReduxContext)

            /* 强化props：合并 store state 和 props  */
            const trueComponentProps = useMemo(()=>{
                  /* 只有props或者订阅的state变化，才返回合并后的props */
                 return selectorFactory(mapStateToProps(store.getState()),wrapperProps) 
            },[ store , wrapperProps ])

            /* 只有 trueComponentProps 改变时候,更新组件。  */
            const renderedWrappedComponent = useMemo(
              () => (
                <WrappedComponent
                  {...trueComponentProps}
                  ref={reactReduxForwardedRef}
                />
              ),
              [reactReduxForwardedRef, WrappedComponent, trueComponentProps]
            )
            useEffect(()=>{
              /* 订阅更新 */
               const checkUpdate = () => forceUpdate(new Date().getTime())
               store.subscribe( checkUpdate )
            },[ store ])
            return renderedWrappedComponent
        }
        /* React.memo 包裹  */
        const Connect = React.memo(ConnectFunction)

        /* 处理hoc,获取ref问题 */  
        if(forwardRef){
          const forwarded = React.forwardRef(function forwardConnectRef( props,ref) {
            return <Connect {...props} reactReduxForwardedRef={ref} reactReduxForwardedRef={ref} />
          })
          return hoistStatics(forwarded, WrappedComponent)
        } 
        /* 继承静态属性 */
        return hoistStatics(Connect,WrappedComponent)
    } 
}
export default Index

connectЗадействовано довольно много функциональных точек: первый уровень принимает функции подписки, второй уровень получает оригинальные компоненты, а затем используетforwardRefиметь дело сref,использоватьhoistStaticsОбработка наследования статических свойств, внутри компонентов-оболочек, слияниеprops,useMemoКешировать исходные компоненты, только объединенныеpropsизменения, обновите только компонент, а затемuseEffectвнутренний пропускstore.subscribe()Подпишитесь на обновления. здесь опущеноSubscriptionКонцепция, правдаconnectесть одинSubscriptionКонкретно отвечает за подписку на сообщения.

3 Включающий компонент - жизненный цикл кеша keepaliveLifeCycle

Я ранее написалreactБиблиотека с открытым исходным кодом для кэширования страницreact-keepalive-router, можно реализоватьvueсерединаkeepalive + routerFunction, в исходной версии не было периода кэширования, но более поздние читатели-энтузиасты рассчитывали добавить период кэширования в кэшированный компонент маршрутизации, подобноactivatedЭтот вид, после моего анализа, я планирую использоватьHOCдля достижения этой функции.

так react-keepalive-routerДобавлен новый жизненный цикл компонента страницыactivedа такжеunActived, activedОн используется, когда компонент маршрутизации кеша активирован, и он будет выполнен один раз по умолчанию, когда он инициализируется.unActivedПосле завершения кэширования компонента маршрутизации вызовов. Но необходимость использования жизненного циклаHOCкомпонентыkeepaliveLifeCycleпакет.

использовать

import React   from 'react'
import { keepaliveLifeCycle } from 'react-keepalive-router'

@keepaliveLifeCycle
class index extends React.Component<any,any>{

    state={
        activedNumber:0,
        unActivedNumber:0
    }
    actived(){
        this.setState({
            activedNumber:this.state.activedNumber + 1
        })
    }
    unActived(){
        this.setState({
            unActivedNumber:this.state.unActivedNumber + 1
        })
    }
    render(){
        const { activedNumber , unActivedNumber } = this.state
        return <div  style={{ marginTop :'50px' }}  >
           <div> 页面 actived 次数： {activedNumber} </div>
           <div> 页面 unActived 次数：{unActivedNumber} </div>
        </div>
    }
}
export default index

Эффект:

принцип

import {lifeCycles} from '../core/keeper'
import hoistNonReactStatic from 'hoist-non-react-statics'
function keepaliveLifeCycle(Component) {
   class Hoc extends React.Component {
    cur = null
    handerLifeCycle = type => {
      if (!this.cur) return
      const lifeCycleFunc = this.cur[type]
      isFuntion(lifeCycleFunc) && lifeCycleFunc.call(this.cur)
    }
    componentDidMount() { 
      const {cacheId} = this.props
      cacheId && (lifeCycles[cacheId] = this.handerLifeCycle)
    }
    componentWillUnmount() {
      const {cacheId} = this.props
      delete lifeCycles[cacheId]
    }
     render=() => <Component {...this.props} ref={cur => (this.cur = cur)}/>
  }
  return hoistNonReactStatic(Hoc,Component)
}

keepaliveLifeCycleПринцип очень прост, т.refили получитьclassЭкземпляр компонента вhocпри инициализацииСвязать жизненный цикл, существуетhocНа стадии разрушения жизненный цикл освобождается, а затем передаетсяkeeperединый график,keeperВызов функций жизненного цикла в следующих примерах для реализации функции кэширования жизненного цикла.

5 соображений относительно компонентов высшего порядка

1 Аккуратно измените цепочку прототипов

function HOC (Component){
  const proDidMount = Component.prototype.componentDidMount 
  Component.prototype.componentDidMount = function(){
     console.log('劫持生命周期：componentDidMount')
     proDidMount.call(this)
  }
  return  Component
}

Это влечет за собой некоторые нежелательные последствия. Например, если вы используете другой, он также изменитcomponentDidMountизHOCулучшить его, то предыдущийHOCне удастся! В то же время этоHOCЕго нельзя применить и к функциональным компонентам без жизненного цикла.

2 Наследование статических свойств

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

Ручное наследование

Мы можем вручную разместить статический метод исходного компонентаcopyприбытьhocПоявляются компоненты, но предпосылка заключается в том, что вы должны точно знать, какие методы следует копировать.

function HOC(Component) {
  class WrappedComponent extends React.Component {
      /*...*/
  }
  // 必须准确知道应该拷贝哪些方法 
  WrappedComponent.staticMethod = Component.staticMethod
  return WrappedComponent
}

Импорт сторонних библиотек

Будет утомительно связывать каждый статический метод, особенно для открытого исходного кода.hoc,Статические методы на нативных компонентах неизвестны, мы можем использоватьhoist-non-react-staticsАвтоматически копировать все статические методы:

import hoistNonReactStatic from 'hoist-non-react-statics'
function HOC(Component) {
  class WrappedComponent extends React.Component {
      /*...*/
  }
  hoistNonReactStatic(WrappedComponent,Component)
  return WrappedComponent
}

3 Захватите реф по уровням

Соглашение о компонентах более высокого порядка состоит в том, чтобы объединить всеpropsпередается обернутому компоненту, но это дляrefsНепригодный. это потому, чтоrefна самом деле неprop- подобноkeyМол, это сделаноReactспециально обработанный. еслиrefдобавить вHOCв возвращаемом компоненте , тоrefСсылка указывает на компонент-контейнер, а не на компонент-оболочку. мы можем пройтиforwardRefДля решения этой проблемы.

/**
 * 
 * @param {*} Component 原始组件
 * @param {*} isRef  是否开启ref模式
 */
function HOC(Component,isRef){
  class Wrap extends React.Component{
     render(){
        const { forwardedRef ,...otherprops  } = this.props
        return <Component ref={forwardedRef}  {...otherprops}  />
     }
  }
    if(isRef){
      return  React.forwardRef((props,ref)=> <Wrap forwardedRef={ref} {...props} /> )
    }
    return Wrap
}

class Index extends React.Component{
  componentDidMount(){
      console.log(666)
  }
  render(){
    return <div>hello,world</div>
  }
}

const HocIndex =  HOC(Index,true)

export default ()=>{
  const node = useRef(null)
  useEffect(()=>{
     /* 就可以跨层级，捕获到 Index 组件的实例了 */ 
    console.log(node.current.componentDidMount)
  },[])
  return <div><HocIndex ref={node}  /></div>
}

распечатать результат:

Решается, как указано выше,HOCЗахват через уровниrefЭта проблема.

4 Не объявляйте HOC в рендере

🙅 Неправильное написание:

class Index extends React.Component{
  render(){
     const WrapHome = HOC(Home)
     return <WrapHome />
  }
}

Если это будет написано так, это вызовет огромную проблему, потому что каждый разHOCвернет новыйWrapHome,react diffбудут судить дваждыне тот компонент, то каждый разIndexкомпонентыrenderвызывать,WrapHome, перемонтируется, статус будетвсе потеряно. Если вы хотите динамическую привязкуHOC, пожалуйста, обратитесь к следующему методу.

🙆 Правильное написание:

const WrapHome = HOC(Home)
class index extends React.Component{
  render(){
     return <WrapHome />
  }
}

Шесть резюме

В этой статье в качестве отправной точки рассматривается функция компонентов высокого порядка, и рассказывается, как написать два разных компонента высокого порядка, сценарии приложений и практики. Охватывает большинство знакомых сценариев приложений высокоуровневых компонентов с открытым исходным кодом.Если вы считаете, что эта статья вдохновляет вас, лучше всего следовать инструкциям в статье.demo, с последующим повторным набором текста, углублением впечатления, знанием того, в каких сценариях использовать высокоуровневые компоненты, как использовать высокоуровневые компоненты.

实践是检验真理的唯一标准, надеюсь можно поставить компоненты более высокого порядка码Вставай, используй.

Наконец, подарите розы и оставьте аромат в ваших руках.Друзья, которые чувствуют, что что-то приобрели, могут подарить их автору.Нравится, следуйОдна волна, обновляйте фронтальные суперхардкорные статьи одну за другой.

Просмотрите классические хорошие статьи о реакции в прошлом

реагировать продвинутая серия

Восемь предложений по оптимизации для разработчиков React в конце года «React Advanced» 840+Нравится👍

серия исходников реакции

"Анализ исходного кода" На этот раз я полностью понимаю принцип маршрутизации react-router 80+Нравится👍
В статье «Анализ исходного кода» подробно рассматривается исходный код react-redux (случай классического исходного кода useMemo) 90+Нравится👍

серия реактивных крючков

Играйте с реактивными хуками, пользовательскими шаблонами дизайна хуков и их реальной борьбой 160+👍Нравится
Как использовать React-крючки 90+Нравится👍

Серия проектов с открытым исходным кодом

«Страница кеша React» от спроса до открытого исходного кода (как я впечатлил даму продукта) 250+лайк 👍

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

реагировать на китайскую документацию

Введение

2. Всесторонний взгляд на высокоуровневые компоненты

1 Несколько способов упаковки компонентов арматуры

① смешанный режим

старая версияreact-mixins

Производный способ

②расширяет режим наследования

Режим ③hoc

④Режим пользовательских хуков

2 Первоначальный замысел компонентов высокого порядка

3 Компоненты более высокого порядка используют и записывают структуры

Использование: шаблон декоратора и шаблон оболочки функции

Модель: вложенный HOC

4 Два разных компонента более высокого порядка

Переадресация прокси-атрибута

преимущество

недостаток

обратное наследование

преимущество

недостаток

3 Как писать компоненты высшего порядка

1 Укрепить реквизит

① Добавьте реквизит

② Извлеките обновление управления состоянием

2 Управление рендерингом

2.1 Условный рендеринг

① Основы: динамическая визуализация

② Дополнительно: фрагментированный рендеринг

③ Дополнительно: асинхронные компоненты (ленивая загрузка)

④ Обратное наследование: перехват рендеринга

⑤ Обратное наследование: изменить дерево рендеринга

2.2 Регулирование рендеринга

① Основы: принцип дросселирования

② Дополнительно: индивидуальный процесс рендеринга

3 активирующих компонента

3.1 Захват цепочки прототипов — захват жизненного цикла, функции событий

① Реализация агента атрибутов

② Реализация обратного наследования

3.2 Мониторинг событий

① Мониторинг событий в компонентах

3 ref help экземпляр компонента управления

① Агент по недвижимости — добавить дополнительный жизненный цикл

4 Резюме

Четыре исходных уровня компонентов высокого уровня

1 Усилить prop-withRoute

2 Управление рендерингом case connect

3 Включающий компонент - жизненный цикл кеша keepaliveLifeCycle

5 соображений относительно компонентов высшего порядка

1 Аккуратно измените цепочку прототипов

2 Наследование статических свойств

Ручное наследование

Импорт сторонних библиотек

3 Захватите реф по уровням

4 Не объявляйте HOC в рендере

Шесть резюме

Просмотрите классические хорошие статьи о реакции в прошлом

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

старая версия`react-mixins`