相关疑难解决方法(0)

根据文件:

componentDidUpdate()更新发生后立即调用.初始渲染不会调用此方法.

我们可以使用新的useEffect()钩子来模拟componentDidUpdate(),但似乎useEffect()是在每次渲染之后运行,甚至是第一次.如何让它不能在初始渲染上运行？

正如您在下面的示例中所看到的,componentDidUpdateFunction在初始渲染期间打印,但componentDidUpdateClass在初始渲染期间未打印.

function ComponentDidUpdateFunction() {
  const [count, setCount] = React.useState(0);
  React.useEffect(() => {
    console.log("componentDidUpdateFunction");
  });

  return (
    <div>
      <p>componentDidUpdateFunction: {count} times</p>
      <button
        onClick={() => {
          setCount(count + 1);
        }}
      >
        Click Me
      </button>
    </div>
  );
}

class ComponentDidUpdateClass extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  componentDidUpdate() {
    console.log("componentDidUpdateClass");
  }

  render() {
    return (
      <div>
        <p>componentDidUpdateClass: {this.state.count} times</p>
        <button
          onClick={() => { …

嘿stackoverflowers,

removeEventListener()当我不使用throttle()lodash时工作.

   window.addEventListener('scroll', this.checkVisible, 1000, false);
     window.removeEventListener('scroll', this.checkVisible, 1000, false);

(我绑定了构造函数中的方法)

不幸的是,throttle(this.checkVisible)功能缠绕它 - 不起作用.我认为这是因为当尝试删除监听器时,throttle()会生成新的实例,也许我应该全局绑定它.怎么样(如果是这样的话)？

  import React from 'react';
    import throttle from 'lodash.throttle';

    class About extends React.Component {
      constructor(props) {
        super(props);

        this.checkVisible = this.checkVisible.bind(this);
      }

      componentDidMount() {
        window.addEventListener('scroll', throttle(this.checkVisible, 1000), false);

      }

      checkVisible() {
       if (window.scrollY > 450) {
        // do something
        window.removeEventListener('scroll', throttle(this.checkVisible, 1000),
        false);
        }
      }

      render() {
        return (
          <section id="about"> something
          </section>
        );
      }
    }

    export default About;

谢谢,善意的人!

根据我从 React 文档和网络上其他材料中了解到的， useCallback 用于通过确保将回调的记忆版本传递给子组件来避免重新渲染子组件，因此子组件的引用属性保持相同。但只有当我在子组件上使用 React.memo 时，所有这些才有效。如果没有 React.memo，子组件无论如何都会重新渲染。我的问题是在这种情况下 useCallback 有什么用处，即没有将 React.memo 应用于子组件。useCallback 还有哪些其他好处？

我在使用油门时遇到问题。使用下面的代码，油门正常工作。但是，当我取消注释时出了点问题setPosition([e.clientX, e.clientY])。油门坏了，position不用等1秒，立即更新。

import React, { useState } from 'react'
import { throttle } from 'lodash'

export default () => {
  const [position, setPosition] = useState([0, 0])
  const [x, y] = position

  const handleMouseMoveThrottle = throttle(e => {
    console.log(e.clientX, e.clientY)
    // setPosition([e.clientX, e.clientY])
  }, 1000)

  const handleMouseMove = e => {
    e.persist()
    handleMouseMoveThrottle(e)
  }

  return (
    <div
      style={{ width: 300, height: 300, border: 'solid 1px black' }}
      onMouseMove={handleMouseMove}
    >
      <div>
        Position: {x}, {y}
      </div>
    </div>
  )
} …

我正在尝试通过去抖来实现自动完成搜索，

下面是我使用lodash的去抖的尝试，看起来去抖不起作用。

我在输入时看到每个字符都被搜索

   const [query, setQuery] = useState('')
   const _search = () => {
     console.log('query: ', query)
     // network search request
   }

   const search = _.debounce(_search, 300)

   useEffect(() => {
     search()
   }, [query])

   const handleChangeQuery = useCallback((query) => {
     setQuery(query)
   })

** 编辑 **

以下作品，是的，我主要从/sf/answers/3826654891/得到提示 ，尽管我认为它略有不同

链接的帖子链事件 setQuery => useEffect => useRef => debounce 在这里我链接 useCallback => useRef => debounce

尽管核心问题（根据链接的帖子）是每次调用功能组件时都在组件内重新创建变量。

useRef保存它。

我理解useCallback记住了该函数，但当因变量发生变化时它也会丢失

它的含义有点模糊，我认为 useCallback 为您提供了记忆函数，但是如果您将以下代码从 更改为useRef它useCallback就会停止工作..（事件虽然我们不使用因变量，例如useCallback(() => {}, [var]) …

我使用 NextJs 来利用服务器端渲染。而且我的应用程序中有一个导航栏，它应该随滚动位置更改样式。如何在 NextJs 应用程序上检查窗口是否滚动超过 100 像素？