Javascript 在每次渲染中是否调用挂钩？

我使用的是上下文api和钩子，有20个状态变量，在每次更改（设置状态）中，函数会再次调用或重新呈现，所以我关心的是调用钩子函数

例如，如果我使用

useState、useReducer、useMoom、useCallback

，每次重新渲染时是否会再次调用它们

function GroupProvider(props) {

    const socket = useMemo(()=> io(url), [socket]);
    const [grouplist, setGrouplist] = useState([]);
    const [refreshid, setRefreshid] = useState('');
    const [messages, setMessages] = useState({});
    const [ppl, setPpl] = useState(people);
    const [groupname, setGroupname] = useState(name);
    const [groupimg, setGroupimg] = useState(img);
    const [groupnamesaving, setGroupnamesaving] = useState(false);
    const [groupimgsaving, setGroupimgsaving] = useState(false);
    const [editgroupname, setEditgroupname] = useState(false);
    const [addingmember, setAddingmember] = useState(false);
    const [modalVisible, setModalVisible] = useState(false);
    const [leavinggroup, setLeavinggroup] = useState(false);
    const [changeAdminModal, setChangeAdminModal] = useState(false);
    const [changingAdmin, setChangingAdmin] = useState(false);
    const [loadingModal, setLoadingModal] = useState(false);

}

---

这里，如果在每次重新渲染中，都会钩住函数调用，因此可能会影响性能。

是的，在每次渲染时都会调用它们，在第一次渲染时初始化内存单元，在重新渲染时读取当前单元的值：

当调用像useState（）这样的钩子时，它读取当前单元格（或 在第一次渲染期间对其进行初始化），然后将指针移动到 下一个。这就是多个useState（）调用每个get的方式 独立的地方州

更新： 当我在useState中控制台记录development react库，并加载一个使用useState的页面时，在第一次呈现时，我得到了23个对useState的调用

在重新渲染时，由状态更改触发，我得到3个对useState的调用

在同一个组件中，我使用了第二个参数[]的useEffect。在第一次渲染时，将从react库调用它12次。由于状态更改而重新渲染时，将调用一次

它确实每次都会打电话给他们

---

我编辑了这个答案，这样就不会发布错误的信息。

始终在React函数的顶层使用挂钩。通过遵循此规则，可以确保每次呈现组件时都以相同的顺序调用挂钩

---

Ref link:-

这就是钩子的用途，在重新渲染后预列数据，它们只被分配一次。从这开始，您可以使用所有这些道具在这里创建一个单独的状态作为对象，但是如果您想访问类组件中的状态，在每次渲染时都会调用它们。useState所做的只是返回一个值和一个setter。如果在每次重新渲染时调用它们，那么它会影响性能吗？？因为正如您在这里看到的，我有16个状态变量，如果每次重新呈现所有这16个变量调用，那么性能会发生什么变化？？有没有办法改进我上面的代码？？？@Muhammad即使有16个变量，它们实际上是16个赋值语句，所以我认为这不会太昂贵，您可以确信，

useState

实际上会在每次渲染时被调用。如果您的渲染函数包含对useState（）的调用，那么您使用useState（）是错误的，并且编译器将出错@collindines，我说错了。很明显，渲染函数是指组件函数体。更新了我的答案