相当于class中关于React生命周期的useEffect

Question

I am using slider component.

In my sample program. Slider.create is called in useEffect()

export default function SectionBasics() {
  React.useEffect(() => {
    if (
      !document
        .getElementById("sliderRegular")
        .classList.contains("noUi-target")
    ) {
      Slider.create(document.getElementById("sliderRegular"), {
        start: [40],
        connect: [true, false],
        step: 1,
        range: { min: 0, max: 100 }
      });
    }
 });
 return (<div id=slider></div>)
}

However I want to move this to class extends React.Component

So, I can't use useEffect() , then I try put it in render()

class ParamBoard extends React.Component {
  render() {
    if (
      !document
        .getElementById("slider")
        .classList.contains("noUi-target")
    ) {
      Slider.create(document.getElementById("slider"), {
        start: [40],
        connect: [true, false],
        step: 1,
        range: { min: 0, max: 100 }
      });
    }
    return (<div id=slider></div>)
   }

I guess this is because when render() is called id slider is not ready yet.

However where should I put Slider.create in class??

Answer 1

You should create a slider instance once when component mounts

In functional component, you can simply put it in useEffect hook with empty array dependency

This is equivalent to componentDidMount() in class component.

They run once when the component mounts.

export default function SectionBasics() {
  React.useEffect(() => {
    // ... your code goes here
  }, []);
  return <div id="slider"></div>;
}

class ParamBoard extends React.Component {
  componentDidMount() {
    // ... your code goes here
  }
  render() {
    return <div id="slider"></div>;
  }
}

Answer 2

Alternatively you could pass a function to ref which will be called as soon as the dom-node exists (or changes)

class ParamBoard extends React.Component {
  initSlider = node => {
    Slider.create(node, {
      start: [40],
      connect: [true, false],
      step: 1,
      range: { min: 0, max: 100 }
    });
  }

  render() {
    return (<div ref={this.initSlider}></div>)
  }
}