javascript - 如何使 useEffect 对 props 的反应与 ComponentDidUpdate 一样快？

Question

在以下情况下，当 isLoading 属性更新时，rotateLogo() 会立即触发：

class Logo extends Component {
    constructor(props) {
      super(props);

      };
    }

    componentDidUpdate() {
      if (this.props.isLoading) {
        this.rotateLogo();
      }

    }

...

但是，当尝试在具有 useEffect 的功能组件中实现相同的功能时，isLoading 的更新和 rotateLogo() 的激活之间存在相当大的延迟

const Logo = ({ isLoading }) => {

  useEffect(() => {
    if (isLoading) {
      rotateLogo();
    }
  }, [isLoading])

...

标签： javascriptreact-nativereact-hooks

Answer 1

在这种情况下，您可能希望同步重新渲染，因此您应该使用useLayoutEffect而不是useEffect：https ://reactjs.org/docs/hooks-reference.html#uselayouteffect