useEffect(..., [props.scrollToIdx])) 要如何才能每次都执行？

Question

在子组件内有：

    // 滚动
    useEffect(() => {
        if(props.scrollToIdx) {

            const scrollToIdx = props.scrollToIdx 
            
            console.log("滚动ID：", '#item-' + scrollToIdx!.toString())

            scrollTo(scrollToIdx)
        }
    }, [props.scrollToIdx])

    const scrollTo = (scrollToIdx: number) => {
        const container = document.querySelector("#container")
        const div: HTMLDivElement | null = document.querySelector('#item-' + scrollToIdx!.toString())
    
        console.log(container, div)
        if(container) {
            container.scrollTo({
                top: div!.offsetTop,
                behavior: 'smooth'
            });
        }
    }

在父组件

点击按钮时候会滑动：

  const btnClick = () => {
    console.log('点击按钮')
    setSelIdx(20)
  }

  return (
    <div className="App">
      
      <SubContainer {...props}></SubContainer>
    
      <button onClick={btnClick}>点击</button>
    </div>
  );

但是比如我在点击一次setSelIdx(20)之后，再点击，执行：
setSelIdx(20)

子组件就不会更新再继续执行这个代码了：

    useEffect(() => {
        if(props.scrollToIdx) {

            const scrollToIdx = props.scrollToIdx 
            
            console.log("滚动ID：", '#item-' + scrollToIdx!.toString())

            scrollTo(scrollToIdx)
        }
    }, [props.scrollToIdx])
也就是说：props.scrollToIdx 没有更新这里就不会执行，请问要如何保证父组件点击（btnClick ... setSelIdx(20)）
子组件这里每次都执行？

Answer 1

写 React 大家容易陷入一个误区：所有的功能都得通过 props 实现，props 一般用于响应式的更新。
例如你这个场景，如果 scrollToIdx 变化触发 scrollTo，scrollToIdx 不变不触发，使用 props 传递参数是合适的。
按照你的描述，是希望稳定触发 scrollTo，使用 props 去控制就不合适了，这个时候应该采用命令式调用，而不是响应式更新了。
可以使用 ref：

export interface SubContainerRef {
  scrollTo(index: number): void;
}

export const SubContainer = forwardRef<SubContainerRef, SubContainerProps>(
  (props, ref) => {
    const scrollTo = (scrollToIdx: number) => {
      const container = document.querySelector('#container');
      const div: HTMLDivElement | null = document.querySelector(
        '#item-' + scrollToIdx!.toString()
      );

      console.log(container, div);
      if (container) {
        container.scrollTo({
          top: div!.offsetTop,
          behavior: 'smooth',
        });
      }
    };

    useImperativeHandle(
      ref,
      () => ({
        scrollTo,
      }),
      []
    );
  //....
}

在父组件调用：

  const conRef = useRef<SubContainerRef>();

  const btnClick = () => {
    conRef.current?.scrollTo(20);
  };

  return (
    <div>
      <SubContainer ref={conRef} {...props} />
      <button onClick={btnClick}>点击</button>
    </div>
  );

总结一下：响应式更新使用 props，命令式调用使用 ref。

Answer 2

20 和 20 做比较的话是相等的，可以把它放置在一个对象里，这样可以触发 useEffect 的更新

import React from "react";
import ReactDOM from "react-dom";
import { useState, useEffect } from "react";

function SubContainer(props) {
  useEffect(() => {
    if (props.scrollToIdx) {
      console.log(props.scrollToIdx.ref);
    }
  }, [props.scrollToIdx]);
  return <div></div>;
}

function App() {
  const [scrollToIdx, SetScrollToIdx] = useState({ ref: null });
  const btnClick = () => {
    console.log("点击按钮");
    SetScrollToIdx((val) => {
      return {
        ...val,
        ref: 20
      };
    });
  };
  return (
    <div className="App">
      <SubContainer scrollToIdx={scrollToIdx}/>
      <button onClick={btnClick}>touch me</button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);