我们可以在反应中创建静态成员吗？

Question

在java中我们有静态成员，它对所有实例都是相同的副本，有没有办法在反应中激活相同的成员，

我已经使用 redux. 解决了这个问题，但是我急切地寻找使用 static members[=30= 来解决这个问题]

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

现在我想在 React 中做同样的事情，有什么方法可以在多个实例中访问 class 成员。

到目前为止，我只能访问 初始值

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

一种方法是为 class 分配一个变量，这样 class 的每个实例都将包含该变量。这个值不会是完全静态的，因为它可以通过 this.variableName = 'newValue'.

重新分配

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

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

或者，您可以将其设为 returns 常量的方法，在这种情况下 value 无法再被覆盖。

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

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

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

或者，您可以将其设为 returns 常量的方法，在这种情况下 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 或状态变化。

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

Answer 2

请完成 link https://codesandbox.io/s/wnxp7rzvjw，我找到了解决方案

我使用一个父 class 为 class

创建了一个公共实例

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 3

Javascript（react 所基于的脚本）不像 Java 那样是真正的 OOP，它是 prototype type based language，因此没有 class 的直接等价物和静态变量。

在对这些全局内容做出反应时，我们将使用 Redux 处理数据或 React.Context api 处理应用程序全局状态。

但是使用 ES6 你可以写出 class 这样的语法

class Cart {
  static count = 0;

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

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

其工作方式与 Java 的 class 变量非常相似。你可以试试这个例子，注意渲染，值仍然是相同的。 https://codesandbox.io/s/wo62022jo5

我们可以在反应中创建静态成员吗？

can we create static member in react?

javascript

java

ecma

reactjs

我们可以在反应中创建静态成员吗​​？

can we create static member in react?

javascript

java

ecma

reactjs

我们可以在反应中创建静态成员吗？