React状态变更时是否会重新渲染状态值及依赖变量？

当React组件的状态发生变更时，会触发组件的重新渲染——整个组件函数会重新执行一遍。这时候所有依赖该状态的变量，都会跟着重新计算取值，自然会同步更新。

拿你贴的代码来说：当点击图片调用Change函数，通过setContact修改contact.isFavorite后，组件会重新渲染。这时候let star = contact.isFavorite ? 'star.png' : 'star-unfilled.png';这行代码会重新执行，根据新的isFavorite值生成对应的图片路径，所以star变量会被更新，图片的src也会随之切换成正确的路径。

你的代码示例：

function App() {
  const [contact, setContact] = useState({
    name: 'Zoe',
    age: 20,
    isFavorite: true,
  });

  let star = contact.isFavorite ? 'star.png' : 'star-unfilled.png';

  function Change() {
    setContact(prevState => ({ ...prevState, isFavorite: !prevState.isFavorite }));
  }
  return (
    <div>
      <p>{contact.name}</p>
      <p>{contact.age}</p>
      <img onClick={Change} src={`./img/${star}`} />
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Trong Tin Nguyen