0

在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);

输出将是

计数：{new Count().state.count}

4

3 回答 3

3

Javascript（基于 React）不像 Java 那样真正的 OOP，它是一种基于原型类型的语言，因此类和静态变量没有直接的等价物。

为了对这些全局内容做出反应，我们将使用 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

于 2018-10-19T21:37:36.567 回答
1

一种方法是为类分配一个变量，以便类的每个实例都包含该变量。这个值不会是完全静态的，因为它可以通过重新分配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>
    }
}

此外，假设静态值可以更改，并且您希望所有组件都能够读取更新的值（没有 redux），那么您可以将其包装在一个对象中。

或者，您可以将其设置为返回常量的方法，在这种情况下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不会触发组件更新，因为没有发生 prop 或 state 更改。

如果您希望组件接收有关属性更改的更新，那么此时您正在重新实现 Redux，我建议您使用 Redux。您需要订阅每个组件以跟踪对某个状态部分的更改，您可以通过查看 Redux 源代码了解如何完成此操作：https ://github.com/reduxjs/redux/blob/master /src/createStore.js

于 2018-10-19T19:40:30.217 回答
0

请通过链接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);
于 2018-10-19T20:21:21.013 回答