标签: react-hooks

在 JS 中，两个对象不相等。

const a = {}, b = {};
console.log(a === b);

所以我不能在useEffect（React hooks）中使用一个对象作为第二个参数，因为它总是被认为是假的（所以它会重新渲染）：

const a = {}, b = {};
console.log(a === b);

这样做（上面的代码），每次组件重新渲染时都会产生运行效果，因为每次都认为对象不相等。

我可以通过将对象作为 JSON 字符串化值传递来“破解”它，但这有点脏 IMO：

function MyComponent() {
  // ...
  useEffect(() => {
    // do something
  }, [myObject]) // <- this is the object that can change.
}

有没有更好的方法来做到这一点并避免不必要的效果调用？

旁注：对象具有嵌套属性。效果必须在此对象内的每个更改上运行。

这两个是等价的吗？如果不是，哪个最好，为什么？

const [count, setCount] = useState(initialCount);
<button onClick={() => setCount(count + 1)}>+</button>

const [count, setCount] = useState(initialCount);
<button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>

首先，对于类组件，这可以正常工作并且不会导致任何问题。

但是，在带有钩子的功能组件中，每当我尝试从滚动事件侦听器的函数设置状态时，handleScroll即使我使用了去抖动，我的状态也无法更新或应用程序的性能会受到严重影响。

import React, { useState, useEffect } from "react";
import debounce from "debounce";

let prevScrollY = 0;

const App = () => {
  const [goingUp, setGoingUp] = useState(false);

  const handleScroll = () => {
    const currentScrollY = window.scrollY;
    if (prevScrollY < currentScrollY && goingUp) {
      debounce(() => {
        setGoingUp(false);
      }, 1000);
    }
    if (prevScrollY > currentScrollY && !goingUp) {
      debounce(() => {
        setGoingUp(true);
      }, 1000);
    }

    prevScrollY = currentScrollY;
    console.log(goingUp, currentScrollY);
  };

  useEffect(() => {
    window.addEventListener("scroll", handleScroll); …

我正在使用此配方useHover()中定义的反应钩子。该钩子返回 a和一个布尔值，指示用户当前是否将鼠标悬停在 this 标识的元素上。它可以像这样使用...refref

function App() {
  const [hoverRef, isHovered] = useHover();

  return (
    <div ref={hoverRef}>
      {isHovered ? 'Hovering' : 'Not Hovering'}
    </div>
  );
}

现在假设我想使用另一个（假设的）钩子，useDrag它返回 aref和一个布尔值，指示用户是否在页面周围拖动当前元素。我想在与以前相同的元素上使用它，就像这样......

function App() {
  const [hoverRef, isHovered] = useHover();
  const [dragRef, isDragging] = useDrag();

  return (
    <div ref={[hoverRef, dragRef]}>
      {isHovered ? 'Hovering' : 'Not Hovering'}
      {isDragging ? 'Dragging' : 'Not Dragging'}
    </div>
  );
}

这是行不通的，因为refprop 只能接受单个引用对象，而不是像上面示例中那样的列表。

我该如何解决这个问题，以便我可以在同一个元素上使用多个这样的钩子？我找到了一个看起来可能是我正在寻找的包，但我不确定是否缺少某些东西。

我遇到问题，导致 ESLINT 在控制台中输出错误。我想解决控制台中的问题。请在此处检查代码和框

点击这里

更新问题

The 'callbackFunction' function makes the dependencies of useEffect Hook (at line 33) change on every render. Move it inside the useEffect callback. Alternatively, wrap the definition of 'callbackFunction' in its own useCallback() Hook. (react-hooks/exhaustive-deps)

老问题

The ref value 'containerRef.current' will likely have changed by the time this effect cleanup function runs. If this ref points to a node rendered by React, copy 'containerRef.current' to a variable inside the effect, and use that variable in the …

为什么当我使用 URL 中的正确 id 刷新页面时，router.query 为空，但当我通过 导航到该页面时，它却有效？

说我有/pages/[user]/index.js

<Link
  href="/[user]/media/[mediaId]"
  as={`/${username}/media/${post.id}`}
>

这个链接带我去localhost:3000/testuser/media/some-id

然后在/pages/[user]/media/[mediaId].js中

const MediaPage = () => {
  const [post, setPost] = useState([]);
  const router = useRouter();
  const { mediaId } = router.query;


  useEffect(() => {
    router.prefetch("/");
  }, []);

  useEffect(() => {
    if (!mediaId) return null;
    getPostImage();

    async function getPostImage() {
      try {
        const { data } = await API.graphql({
          query: postById,
          variables: {
            id: mediaId,
          },
        });
        setPost(data.postById.items[0]);
      } catch (err) {
        console.log("error getPostImage", …

如果我有一个需要使用和操作多个状态项的功能组件，并且我有多个状态用于不直接相关的不同事物（例如游戏统计数据和 UI 元素状态），那么性能（或实践）是否会更好？像这样做：

const [state, setState] = React.useState({
    username: 'JoeSchmoe200',
    points: 200,
    isHoveringOverItem: {item1: false, item2: false, item3: false},
    selectedItem: {item1: true, item2: false, item3: false}
})

（状态中保存的所有内容都在一个对象中并使用一种方法设置），或者像这样：

const [username, setUsername] = React.useState('JoeSchmoe200')
const [points, setPoints] = React.useState(200)
const [isHoveringOverItem, setIsHoveringOverItem] = React.useState(
    {item1: false, item2: false, item3: false}
)
const [selectedItem, setSelectedItem] = React.useState(
    {item1: true, item2: false, item3: false}
)

其中每个状态都单独声明并单独设置。我只是想在这里引发一场对话，以了解有关 React 的更多信息。

对于这样的表现，您有何看法？可读性方面？这是偏好问题还是有客观的最佳实践？

ReactSelect V2(测试版5)似乎有几个道具一样clearValue,resetValue和setValue.无论我在尝试什么,我都无法以编程方式清除选择.resetValue似乎无法从外部访问.

selectRef.setValue([], 'clear')
// or
selectRef.clearValue()

这并不能清除当前的选择.

我在这里想念一下,还是没有完全实现？

我正在使用react useEffect挂钩并检查对象是否已更改，然后才再次运行挂钩。

我的代码如下所示。

const useExample = (apiOptions) => {
    const [data, updateData] = useState([]);
    useEffect(() => {
       const [data, updateData] = useState<any>([]);
        doSomethingCool(apiOptions).then(res => {               
           updateData(response.data);
       })
    }, [apiOptions]);

    return {
        data
    };
};

不幸的是，由于对象未被识别为相同对象，因此它一直在运行。

我相信以下是一个示例。

const useExample = (apiOptions) => {
    const [data, updateData] = useState([]);
    useEffect(() => {
       const [data, updateData] = useState<any>([]);
        doSomethingCool(apiOptions).then(res => {               
           updateData(response.data);
       })
    }, [apiOptions]);

    return {
        data
    };
};

也许运行的JSON.stringify(apiOptions)作品？

在带有钩子的React中，更新状态的正确方法是嵌套对象是什么？

export Example = () => {
  const [exampleState, setExampleState] = useState(
  {masterField: {
        fieldOne: "a",
        fieldTwo: {
           fieldTwoOne: "b"
           fieldTwoTwo: "c"
           }
        }
   })

一个人怎么会使用setExampleState到的更新exampleState来a（附加一个字段）？

const a = {
masterField: {
        fieldOne: "a",
        fieldTwo: {
           fieldTwoOne: "b",
           fieldTwoTwo: "c"
           }
        },
  masterField2: {
        fieldOne: "c",
        fieldTwo: {
           fieldTwoOne: "d",
           fieldTwoTwo: "e"
           }
        },
   }
}

b （改变价值）？

const b = {masterField: {
        fieldOne: "e",
        fieldTwo: {
           fieldTwoOne: "f"
           fieldTwoTwo: "g"
           }
        }
   })