页面为什么会变化？
从组件到状态，沿着六条主干建立联系。选择一个概念，展开它的用途与边界。
React用数据描述界面
连线表示知识分组；阅读顺序从上到下，不代表运行顺序。
组件与 JSX
界面怎样拆成可以组合的部分？
组件是描述 UI 的函数。React 调用组件，得到这一轮界面的描述；JSX 把结构写在逻辑旁边，最终仍然是 JavaScript。
放进一个场景
把文章列表拆成 ArticleList 和 ArticleItem。相同的组件可以接收不同文章，产生不同内容。
容易混淆的地方
不要在渲染中修改外部变量或发送请求。列表的 key 应稳定地标识数据；同一位置的类型或 key 改变，可能重置组件状态。
试着做到
给列表增加排序，解释为什么文章 ID 比数组下标更适合作为 key。
查看代码片段
function Greeting({ name }) {
return <h2>你好，{name}</h2>
}示意片段，省略导入与周边组件。