父类状态改变时如何重新加载子组件

Question

在父类中，我将项目传递给子组件。

<InfoWidget bar={this.state.bar}> 
</InfoWidget>

然后，接收数据并在此处使用prop.bar

const InfoWidget = (props) =>{
  const [length, setLength] = useState([]);
  const classes = useStyles();
  useEffect(() => {
 
    setLength( props.bar * 10);
  }, []);
  return(
    <Paper> 
     {length}
    </Paper>
  );
}

第一次加载效果很好，但是当父类的 state.bar 发生变化时，不会重新加载子组件。

我想重新加载子组件，每次父类的值发生变化时。

我应该在哪里改变？

Answer 1

将其添加为依赖项：

useEffect(() => {
  setLength(props.bar * 10);
}, [props.bar]);

Answer 2

将 key 添加到 parent，当key发生变化时，它会重新渲染组件

<InfoWidget key={this.state.bar} bar={this.state.bar}> 
</InfoWidget>