Takeaway

• 嚴格模式：會調用每個組件函數兩次，確保結果一致
• Mutation：更改預先存在的變數
• Local mutation：在父組件裡更改是ok的
• 不要在組件裡的JSX之外做判斷
• Side effects：執行某些互動時才變動，屬於Event handlers的領域
• 純函數可以使輸入不會變化的組件跳過渲染，可以隨時停止計算

• 除了HTML，React也可以和UIView 或 FrameworkElement配合
• Render Tree展示組件，Module Dependency Tree展示JS
• 後者是Bundler的依據。像Webpack會生成Dependency Graph

因為要在JSX裡做判斷，這裡會容易用到Render章節講過的條件渲染：像三元運算子或&&那些。

export default function Clock({ time }) {
  let hours = time.getHours();
  return (
    <h1 className={hours >= 0 && hours <= 6 ? "night" : "day"}>
      {time.toLocaleTimeString()}
    </h1>
  );
}

譬如說根據當下時間切換dark mode的範例，我就直接在className裡寫進三元運算，這樣Local mutation就不會動到其他的東西，而且比官方解答的if…else還精簡，耶。

另一個練習稍微可惜的是，因為要新增的項目一定在map之外，所以甚至不用判斷要在哪裡加進它，只要在原本map的JSX後面寫上<li>Create Story</li>標籤就好，沒設id也不影響map循環。想來我的條件判斷是有點多此一舉。但既然都練習了，當然還是會保留一下走過的思路以供參考。

export default function StoryTray({ stories }) {
  return (
    <ul>
      {stories.map((story) => (
        <li key={story.id}>{story.label}</li>
      ))}
      {
        (stories.id = stories.slice(-1)[0].id && (
          <li key="Create">Create Story</li>
        ))
      }
    </ul>
  );
}