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

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

我不确定这是WordPress特有的，WordPress重载的React特有的，还是只是React，但我正在为WordPress创建一个新的块插件，如果我在其

编辑
函数中使用
useState
，页面将被重新呈现，即使我从未调用setter函数

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 />;
}

从'@wordpress/element'导入{useState}；
导出默认函数MyEdit（道具）{
常数{
属性：{
阿纳塔特
},
设置属性，
}=道具；
const[isValidating，setIsValidating]=useState（false）；
const post_id=wp.data.select（“核心/编辑器”）.getCurrentPostId（）；
console.log（'Post ID is'，Post\u ID）；
常量MyPlaceholder=（）=>{
返回(
这是一个测试
);
};
const Component=MyPlaceholder；
返回；
}

如果我注释掉
const[isValidating，setIsValidating]=useState（false）
然后，
console.log
发生一次。如果我把它留在里面，它会发生两次；即使我从不检查
isValidating
的值，也不要介意调用
setIsValidating
。我不想过度优化内容，但同样，如果我在一个页面上使用此块
n次
，页面将被渲染
2n次。它只在管理方面，因为它在
编辑中，所以可能没什么大不了的，但是。。。这似乎不对。这是
useState
的预期行为吗？我做错什么了吗？我是否需要担心它（从速度的角度来看，从可能的竞争条件来看，因为所有内容都被多次重新渲染）？
是的，您必须担心总是放置一个依赖项数组，这样，它就不会重新渲染，根据您的查询，假设您计划编辑一个字段。这是示例代码

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

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

[edit]
将检查是否有任何更改，并据此更新DOM，如果您不放置任何[]（依赖项数组），它将始终进行无限循环，
是的，您必须担心始终放置依赖项数组，以便它不会按照您的查询重新渲染，假设您计划编辑一个字段，这里是示例代码

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

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

[edit]
将检查是否有任何更改，并据此更新DOM，如果不放置任何[]（依赖项数组），它将始终进行无限循环，
我猜这是预期的行为。如果我向使用
useState
的本机核心块添加类似的
console.log
，我会得到相同的效果。WordPress似乎使用
use strict
，并且根据，React double在严格模式下调用许多东西。
我猜这是预期的行为。如果我向使用
useState
的本机核心块添加类似的
console.log
，我会得到相同的效果。WordPress似乎使用
use strict
进行操作，根据，React double在strict模式下调用了许多东西。
在示例代码中，每次都会立即评估
console.log
语句，并触发块的重画/重新渲染。删除
console.log
后，只有状态更改才会触发重新渲染

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

从wp.data请求数据时，应使用
useffect（）
安全地等待异步数据：

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 />;
}

从'@wordpress/element'导入{useState，useffect}；
导出默认函数MyEdit（道具）{
...
const[curPostId，setCurPostId]=useState（false）；
useffect（（）=>{
异步函数getMyPostId（）{
const post_id=wait wp.data.select（“核心/编辑器”）.getCurrentPostId（）；
setCurPostId（post_id）；
}
getMyPostId（）；
}，[]）；//运行一次
常量MyPlaceholder=（）=>{
返回(
当前帖子Id:{curPostId}
);
};
const Component=MyPlaceholder；
返回；
}

如问题中所述，
useState（）
在核心块中用于设置和更新状态。在中引入了状态钩子，这是一个相当新的更改，您可能会遇到较旧的Gutenberg代码示例，该示例通过类构造函数设置状态，而不使用钩子。
在示例代码中，每次都会立即评估
console.log
语句，并触发块的重画/重新渲染。删除
console.log
后，只有状态更改才会触发重新渲染

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

从wp.data请求数据时，应使用
useffect（）
安全地等待异步数据：

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 />;
}

从'@wordpress/element'导入{useState，useffect}；
导出默认函数MyEdit（道具）{
...
const[curPostId，setCurPostId]=useState（false）；
useffect（（）=>{
异步函数getMyPostId（）{
const post_id=wait wp.data.select（“核心/编辑器”）.getCurrentPostId（）；
setCurPostId（post_id）；