React 入门教程之八 -- Lifting State Up 提升 state 层级

大多数情况下，不同的 components 之间需要对同一个变化着的 data 进行响应。推荐将这些 shared state 共享的数据提升到它们最近的 parent component 中，下面详细介绍如何实现这一 function。

下面创建一个 temperature calculator 温度计算器来判断在一个给定的温度下，水是否会沸腾。

通过 GitHub API 获取数据

最近发现通过 GitHub API 可以获取到很多有用的数据，它返回一个 json 格式数据，可以后期解析得到需要的内容。

今天在项目中需要添加一个柱状图，但由于我们的项目是 QT 4.8 的所以不支持 QtCharts。查询了下发现有 QCustomPlot 可以完美的实现需求，使用方法也很简单。

在 JavaScript 中我们通常使用 map method 来对一个 list 的每个元素进行操作：

const numbers = [1, 2, 3, 4, 5];
const double = numbers.map((number) => { return number * 2});
console.log(double)

//output:
//[ 2, 4, 6, 8, 10 ]

在 React 中对一个 list 的元素进行操作方法类似。

在 React 中，我们可以创建独立的 component 来封装特定的功能。因此，可以根据不同的程序的 state 选择性的做部分渲染。

和 JavaScript 的相同，React 中也可以使用 conditions 语法来选择性的渲染内容。如使用 if 或 conditional operator 来根据不同 state 状态创建不同 elements 然后让 React 更新 UI 来匹配 DOM。