我们可以在 React 中创建静态成员吗?

Question

在Java中，我们有静态成员，它对所有实例都是相同的副本，有没有办法在React 中激活相同的内容，

我已经使用Redux解决了这个问题，但我急切地搜索通过使用静态成员来解决问题

在爪哇中

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 中做同样的事情，有什么方法可以在多个实例中访问类成员。

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

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那样的真正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

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>
}
}

此外，假设静态值可能会更改，并且您希望所有组件都能够读取更新的值(无需 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 或状态更改。

如果您希望组件接收有关属性更改的更新，那么此时您正在重新实现 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);