Bonjour.

J'aurai voulu utiliser react façon c++ ou java. Assez brut. Je ne sais pas si j'utilise les choses correctement.

J'ai principalement travaillé 2 méthodes, c'est la seconde méthode que je trouve intéressante, je veux l'utiliser mais je l'ai "inventer", c'est a dire que personne ne m'a recommandé de gérer les states de cette façon :

La première solution (context)

import React from "react";

export default class TestContext extends React.Component<
  { children: any },
  { idTest: number }
> {
  static singleton: TestContext;
  idContext = React.createContext(this.state);
  constructor(props: any) {
    super(props);
    TestContext.singleton = this;
    this.state = {
      idTest: 55,
    };
  }

  render() {
    return (
      <>
        <this.idContext.Provider value={this.state}>
          {this.props.children}
        </this.idContext.Provider>
      </>
    );
  }
}

import React from "react";
import TestContext from "./TestContext";

export default class TestComponent extends React.Component {
  timerID: NodeJS.Timer | null;
  constructor(props: any) {
    super(props);
    this.timerID = null;
  }

  componentDidMount() {
    this.timerID = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount() {
    if (this.timerID != null) clearInterval(this.timerID);
  }

  tick() {
    TestContext.singleton.setState({
      idTest: TestContext.singleton.state.idTest + 1,
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>

        <TestContext.singleton.idContext.Consumer>
          {(value: any) => <h1>Context : {value.idTest}</h1>}
        </TestContext.singleton.idContext.Consumer>
      </div>
    );
  }
}

La seconde solution (observer) :

import { ProviderInterface } from "./ProviderInterface";

export default class BasicProvider {
  static subscribers: ProviderInterface[] = [];

  static clock: number = 0;

  static subscribe(subscriber: ProviderInterface) {
    BasicProvider.subscribers.push(subscriber);
  }

  static unsubscribe(subscriber: ProviderInterface) {
    BasicProvider.subscribers.splice(
      BasicProvider.subscribers.indexOf(subscriber),
      1
    );
  }

  static notify() {
    BasicProvider.subscribers.forEach((subscriber) => {
      subscriber.rerender();
    });
  }

  static setClock(value: number) {
    BasicProvider.clock = value;
    BasicProvider.notify();
  }
}

export interface ProviderInterface {
  rerender(): void;
}

import React from "react";
import BasicProvider from "../../Providers/BasicProvider";
import { ProviderInterface } from "../../Providers/ProviderInterface";
import TestContext from "./TestContext";

export default class TestComponent
  extends React.Component
  implements ProviderInterface
{
  timerID: NodeJS.Timer | null;
  constructor(props: any) {
    super(props);
    this.timerID = null;
  }

  rerender(): void {
    this.forceUpdate();
  }

  componentDidMount() {
    BasicProvider.subscribe(this);
    this.timerID = setInterval(() => this.tick(), 1000);
  }
  componentWillUnmount() {
    if (this.timerID != null) clearInterval(this.timerID);
    BasicProvider.unsubscribe(this);
  }

  tick() {
    BasicProvider.setClock(BasicProvider.clock + 1);
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h1>Observer : {BasicProvider.clock}</h1>
      </div>
    );
  }
}

J'aimerai utiliser la seconde solution. Est-ce possible ?

-
Edité par AdrienChsn 20 septembre 2022 à 15:44:00