Мы можем создать статический член в реагировать?

Question

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

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

в Яве

public class Cart {

    static int totalItemInCart = 0; 
}


class Order{

    static boolean pushToCart() {

        Cart.totalItemInCart += Cart.totalItemInCart+1;     
        return true;
    }
}

class CancelOrder{  

    static boolean removeFromCart() {

        Cart.totalItemInCart += Cart.totalItemInCart-1;     
        return true;
    }
}

class User {

    public static void main(String[] args) {

        Order.pushToCart(); // item added to cart
        Order.pushToCart(); // item added to cart
        CancelOrder.removeFromCart(); // one item removed from cart 

        // if print the count we will get totalItemInCart is 2 
        System.out.println("number of items in cart" + Cart.totalItemInCart);
    }

}

Теперь я хочу сделать то же самое в реакции, есть ли способ получить доступ к члену класса в нескольких случаях.

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

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <h1>Count : {new Count().state.count} </h1>;
  }
}

class Count extends Component{
  constructor(props) {
    super(props);
    this.state={
      count:0
    }
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

выход будет

Count: {new Count(). State.count}

Answer 1

Javascript (который реагирует на основе) не является действительно ООП, как Java, это язык, основанный на типе прототипа, так что нет прямого эквивалента для класса и статических переменных.

В ответ на эти глобальные вещи мы использовали бы Redux для данных или React.Context API для глобального состояния приложения.

Однако с ES6 вы можете написать класс, как синтаксис, как эти

class Cart {
  static count = 0;

  add = () => {
    Cart.count++;
  };
  remove = () => {
    Cart.count--;
  };

  print = () => {
    console.log(Cart.count);
  };
}

которые работают во многом как переменные класса Java. Вы можете попробовать этот пример, обратите внимание на рендер, значение остается прежним. https://codesandbox.io/s/wo62022jo5

Answer 2

Одним из подходов является присвоение переменной классу, чтобы каждый экземпляр класса включал переменную. Это значение не будет полностью статичным, так как его можно переназначить через this.variableName = 'newValue',

class MyComponent extends React.Component {
    variableName = 'value'

    render() {
      return <div>{this.variableName}</div>
    }
}

В качестве альтернативы вы можете сделать это методом, который возвращает константу, в этом случае value больше не может быть перезаписано.

const value = 'value'
class MyComponent extends React.Component {
    getValue() {
      return value
    }

    render() {
      return <div>{this.variableName}</div>
    }
}

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

В качестве альтернативы вы можете сделать это методом, который возвращает константу, в этом случае value больше не может быть перезаписано.

const staticProperty = {
  value: 'value'
}
class MyComponent extends React.Component {
    getValue() {
      return staticProperty.value
    }

    render() {
      return <div>{this.variableName}</div>
    }
}

В приведенном выше примере, так как staticValue изменчив, вы можете запустить staticValue.value = 'some new value' и это обновит значение. В следующий раз любой компонент вызывает this.getvalue() они получат my new value, Проблема с этим подходом заключается в том, что staticValue.value не будет запускать компоненты для обновления, так как не произошло никаких изменений свойств или состояний.

Если вы хотите, чтобы компоненты получали обновления об изменениях свойств, в этот момент вы повторно внедряете Redux, и я бы порекомендовал вам использовать Redux. Вам необходимо подписать каждый компонент, чтобы отслеживать изменения в определенном разделе состояния, и вы можете увидеть, как этого добиться, посмотрев исходный код Redux: https://github.com/reduxjs/redux/blob/master/src/createStore.js

Answer 3

Перейдите по ссылке https://codesandbox.io/s/wnxp7rzvjw, я получил решение

я использовал один родительский класс, чтобы создать общий экземпляр для обоих классов

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      countInstance: new Cart(this)
    };
  }

  onPlus = () => {
    this.state.countInstance.state.count += 1;
    this.state.countInstance.render();
  };

  render() {
    return (
      <div>
        <Increment countInstance={this.state.countInstance} />
        <Decrement countInstance={this.state.countInstance} />
      </div>
    );
  }
}

class Increment extends Component {
  constructor(props) {
    super(props);
  }

  onPlus = () => {
    this.props.countInstance.state.count += 1;
    this.props.countInstance.render();
  };

  render() {
    return (
      <div>
        <h1>Count in first componet: {this.props.countInstance.state.count}</h1>
        <button onClick={this.onPlus}>+</button>
      </div>
    );
  }
}

class Decrement extends Component {
  constructor(props) {
    super(props);
  }

  onMinus = () => {
    this.props.countInstance.state.count -= 1;
    this.props.countInstance.render();
  };

  render() {
    return (
      <div>
        <h1>
          Count in second componet : {this.props.countInstance.state.count}
        </h1>
        <button onClick={this.onMinus}>-</button>
      </div>
    );
  }
}

class Cart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  updateParent = () => {
    this.props.setState({
      update: !this.state.update
    });
  };
  render() {
    {
      this.updateParent();
    }
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);