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

Question

в java у нас есть статические члены, которые являются одинаковыми для всех экземпляров, есть ли способы активировать их в реакции,

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

в Java

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

перейдите по ссылке 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);

Answer 2

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 3

Один из подходов - присвоить переменную классу, чтобы каждый экземпляр класса включал переменную.Это значение не будет полностью статическим, так как его можно переназначить через 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