我是否必须担心 useState 会导致重新渲染？

如何解决我是否必须担心 useState 会导致重新渲染？

注意：我在 wordpress.stackexchange 上问过这个问题，但那里没有得到任何回应，所以在这里试试。

我不确定这是特定于 wordpress 的、特定于 wordpress 的重载 React 还是 React，但我正在为 wordpress 创建一个新的块插件，如果我在其 {{1} } 函数，页面被重新渲染，即使我从不调用 setter 函数。

useState

如果我注释掉 edit，那么 import { useState } from '@wordpress/element'; export default function MyEdit( props ) { const { attributes: { anAttribute },setAttributes,} = props; const [ isValidating,setIsValidating ] = useState( false ); const post_id = wp.data.select("core/editor").getCurrentPostId(); console.log('Post ID is ',post_id); const MyPlaceholder = () => { return( <div>this is a test</div> ); }; const Component = MyPlaceholder; return <Component />; } 会发生一次。如果我把它留在里面，它会发生两次；即使我从不检查 const [ isValidating,setIsValidating ] = useState( false ); 的值，也不要介意调用 console.log。我不想过度优化事物，但同样地，如果我在页面上使用此块 isValidating 次，页面将被呈现 setIsValidating 次。它只是在管理方面，因为它在 n 中，所以也许没什么大不了的，但是......似乎不对。这是 2n 的预期行为吗？难道我做错了什么？我是否必须担心它（从速度的角度来看，从潜在的竞争条件，因为一切都被多次重新渲染）？

解决方法

是的，您必须担心总是放置一个依赖项数组，这样它就不会重新渲染，根据您的查询，假设正在计划编辑一个字段，这里是示例代码

const [edit,setEdit]= useState(props);

useEffect(() => {
// logic here
},[edit])

[edit] 将检查是否有任何更改，并据此更新 DOM，如果您不放置任何 []（依赖项数组），它将始终进入无限循环，

我想这是预期的行为。如果我向使用 console.log 的原生核心块添加类似的 useState，我会得到相同的效果。似乎 WordPress 使用 use strict 运行，并且根据 this answer，React 在严格模式下会双重调用许多东西。

在您的示例代码中，每次都会立即评估 console.log 语句并触发块的重绘/重新渲染。移除 console.log 后，只有状态更改才会触发重新渲染。

由于 Gutenberg 编辑器基于 Redux，如果状态发生变化，任何依赖于该状态的组件都会重新渲染。当在编辑器中选择一个块时，所选块将同步渲染，而编辑器中的所有其他块则异步渲染。 WordPress Gutenberg 开发人员意识到重新渲染是一种performance concern，并已采取措施减少重新渲染。

从 wp.data 请求数据时，应该使用 useEffect() 来安全地等待异步数据：

import { useState,useEffect } from '@wordpress/element';

    export default function MyEdit(props) {
    ...
    const [curPostId,setCurPostId] = useState(false);

    useEffect(() => {
        async function getMyPostId() {
            const post_id = await wp.data.select("core/editor").getCurrentPostId();
            setCurPostId(post_id);
        }
        getMyPostId();
    },[]); // Run once

    const MyPlaceholder = () => {
        return (
             <div>Current Post Id: {curPostId}</div>
        );
    };

    const Component = MyPlaceholder;

    return <Component />;
}

正如问题中提到的，useState() 在核心块中用于设置和更新状态。状态钩子是在 React 16.8 中引入的，它是最近发生的变化，您可能会遇到较旧的古腾堡代码示例，它通过类构造函数设置状态并且不使用钩子。