使用多个 setHook 会使组件渲染不止一次? [英] Using multiple setHook makes component render more than once?

问题描述

如果我有很多 useState 并且点击一个按钮我调用了多个 setHook，它是渲染多次还是只渲染一次?

If I have alot of useState and on the click of a button I call multiple setHook, does it renders multiple times or only once?

例如

export default function setMultipleHooks() {

    const [hook1, setHook1] = useState(false)
    const [hook2, setHook2] = useState(false)
    const [hook3, setHook3] = useState(false)
    const [hook4, setHook4] = useState(false)

    const setHooks = () => {
        setHook1(true)
        setHook2(true)
        setHook3(true)
        setHook4(true)
    }

    return (
        <button onClick={setHooks} >Hey</button>
    )

}

一旦我点击按钮，它会渲染多少次?1 次还是 4 次?

Once I click the button, how many times does it render? 1 or 4 times?

通常要检查组件渲染了多少次，我只是在 render 方法中放了一个 console.log，但是对于功能组件，我不确定如何测试这个.

Normally to check how many times the component is rendering, I just put a console.log in the render method, but with functional components, I'm not sure how to test this.

如果渲染 4 次，如果 4 个钩子总是相关的，最好只使用一个 useState(传递一个对象)?

If it renders 4 times, it would be better to use only one useState (passing an object) if the 4 hooks are always related?

推荐答案

React 可以批量处理多个 setState 调用并一次渲染它们.在您的情况下，它会这样做，因为您在事件处理程序 (onClick) 中.

React may batch multiple setState calls and render them all at once. And in your case it do that, because you're inside an event handler (onClick).

它只渲染一次(不包括初始渲染)，如下面的代码片段所示.

It renders only once (initial render not included) as you can see from the snippet below.

关于 React 批处理 setState() 调用的 Github 问题>

您仍然可以使用具有 4 个属性的对象而不是 4 个状态挂钩变量.但是在更新状态时你必须小心，因为钩子的 setState() 不会自动将你的最后一个状态与你的新状态属性合并.它用您传递的新对象完全替换了状态.

Github issue about React batching setState() calls

React 文档 - 使用状态钩子

所以你必须做这样的事情:

React Docs - Using the state hook

So you'd have to do something like this:

);}ReactDOM.render(, document.getElementById("root"));

const { useState, useRef, useEffect } = React; function App() { const renderTimes = useRef(0); const [hook1, setHook1] = useState(false); const [hook2, setHook2] = useState(false); const [hook3, setHook3] = useState(false); const [hook4, setHook4] = useState(false); const setHooks = () => { setHook1(true); setHook2(true); setHook3(true); setHook4(true); } useEffect( () => { renderTimes.current+=1; }); return ( <div> <div>I rendered {renderTimes.current} time(s).</div> <div>NOTE: The initial render is not included.</div> <div>State hook1 is equal to: {hook1.toString()}</div> <div>State hook2 is equal to: {hook2.toString()}</div> <div>State hook3 is equal to: {hook3.toString()}</div> <div>State hook4 is equal to: {hook4.toString()}</div> <button onClick={setHooks}>Click</button> </div> ); } ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>

这篇关于使用多个 setHook 会使组件渲染不止一次?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！