Лучшее решение для управления состоянием React — не управляйте

внешний интерфейс React.js
Лучшее решение для управления состоянием React — не управляйте

Разработчики вообще думают, что состояние — это часть компонента, но при этом постоянно строят колеса на зачистке состояния, не слишком ли это противоречиво?

Для простейшего текстового компонента


function Text(){
  const [text, setText] = useState('载入')
  return (){
    <p>{text}</p>
  }
}

Считаете ли вы, что текст должен быть удален из компонента Text? Если ваша интуиция говорит вам, что вы не должны этого делать, зачем использовать redux mobx jotai и кучу других странных библиотек управления состоянием, чтобы усложнить наш код?

Так почему?

Еще не собственный котел React!!!

Потому что React дает двойное определение состояния компонента, ограниченного состояния и открытого реквизита. В то же время из-за ограничения jsx взаимодействие компонентов может опираться только на реквизиты.

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

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

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

Болезненное процветание экосистемы государственного управления сделало всю экосистему React хаотичной.

Потенциальные затраты на интеграцию между различными библиотеками управления состоянием и библиотеками компонентов, построенными вокруг этого управления состоянием, должны учитывать интеграцию.Посмотрите на Route5, я думаю, что решения для интеграции React и Redux на официальном сайте недостаточно.В конце концов, там несколько библиотек ждут...

С точки зрения самого React, пока решены две проблемы, нет так называемого управления состоянием.

внутренняя связь компонента

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

import {createComponent} from 'structured-react-hook'

const Component = createComponent({
  initState:{
    A:'A',
    B:'B',
    M:'M',
  },
  view:{
    renderB(){
      return(
        <>
          <div>{this.state.M}</div>
          <div>{this.state.B}</div>
        </>
      )
    },
    renderA(){
      return(
        <>
          <div>{this.state.M}</div>
          <div>{this.state.A}</div>
        </>
      )
    },
    render(){
      return(
        <>
          <div>{this.state.M}</div>
          <div>{this.view.renderB()}</div>
          <div>{this.view.renderA()}</div>
        </>
      )
    }
  }
})

Компонент может разбить любой фрагмент jsx на представление и управлять состоянием в initState.Просто пусть this.state функции рендеринга указывает на initState во время выполнения.Конечно, внутри есть какая-то магия, о которой не упоминается.

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

const ComponentA = createComponent({
  name:'ComponentA',
  initState:{
    A:'A'
  },
  view:{
    render(){
      return(
        <div>{this.combination.ComponentB.state.B}</div>
      )
    }
  }
})

const ComponentB = createComponent({
  name:'ComponentB',
  initState:{
    B:'B'
  },
  view:{
    render(){
      return(
        <div>{this.combination.ComponentA.state.A}</div>
      )
    }
  }
})

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

Таким образом, не нужно беспокоиться о связи для параллельных компонентов внутри jsx.Независимо от того, сколько слоев пересекается, в конце концов я найду вас.

Итак, чтобы решить эти две проблемы, вам нужно дополнительное управление состоянием?

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

Но пока чиновник React не будет действовать, болезненное процветание сообщества госуправления будет продолжаться...┓( ´∀` )┏

Категории