Question

说我有一个反应钩子组件

const Child = (props) => {
    useEffect(()=>{
        // fetch data
        ...
    });

    return ( 
        //Displays fetched data
    )
}

然后在父组件中使用

class Parent extends Component {

    render () {
        ... <Child ... /> ...
    }
}

我的问题是，如果Parent在状态改变时重新发布（但与Child不相关），是否会导致Child组件重新呈现并最终再次获取数据？

如果Child2有一个依赖项数组，是否会遇到同样的问题？

const Child2 = (props) => {

    let [data, setData] = useState();
    useEffect(()=>{
        // fetch data
        ajax(...).then((result)=>setData(result));
    }, [data]);

    return ( 
        //Displays fetched data
    )
}

Answer 1

是的，react中的标准行为是当组件渲染时，其子代也渲染。为了提高性能，您可以通过在类组件上使用shouldComponentUpdate或在功能组件上使用React.memo来跳过某些渲染，但这是一种性能优化，不是您应该依靠其跳过效果的一种方式。

如果要在组件中获取数据，则通常只希望在安装时或仅在某些相关数据发生更改时才进行操作。这由useEffect的依赖项数组控制。要仅在安装时运行它，请提供一个空数组[]。当父组件发生更改时，该组件仍将重新呈现，但是其效果不会重新运行。

父组件重新渲染时，react hook组件是否重新渲染？

1 个答案: