这节课我们要讲的是机器识别字幕。

JSX是一种对加Script的扩展语法，它可以直接返回模板引擎类的东西，而不需要通过绑定真实DOM标签来实现逻辑关系。这与以往的操作方式有很大不同。

以往的操作方式通常通过绑定的形式，将JQuery绑定到对应的真实DOM标签，以实现逻辑关系的置放。然而，在React中，这种方式并不适用，因为它需要将Javascript进行一定程度的扩展。

由于Javascript本身只能处理支付串、变量、对象和引用类型（如宿主）等，因此需要进行一层转换。直接返回需要进行一层转换，例如将其转换为输入、对象等，以便机器识别。这就是React所做的，我们不需要关心这些细节，直接返回标准的HTML。

大家还记得吗？在第二节课中，我们介绍了React组件，它是一个函数，需要传递数据来处理数据，然后返回一个UI，一个模板引擎。它中间会返回一定的状态，这里有一个状态。

当然，这里是一个页面级别的，没有传递数据，在中间可以处理数据。这个count会传递给UI，因此它已经带有状态了。这个状态会发生变化，这里有一个函数，它会调用函数，通过state.count更新state状态。

状态发生变化后，它会复制到count位置，然后更新组件的UI。因此，它被称为带状态的UI组件。它带有状态，因此理解起来非常简单。

实际上，React是一种非常纯粹的语言，它只有函数和返回值，中间是逻辑代码，逻辑代码执行完成后返回一个HTML标签，只是这个HTML标签类似于语义，可以看一下在Bible中会转化成什么。

可以看到它直接转化为对象形式，中间有一个属性style，可以对应到我们这边。然后React可以拿到函数，一个回调函数，也就是我们这里的多加摩擦力。它当然是通过React中的create element函数进行格式化的。

需要注意的是，element并不是真实的DOM，而是React的element。在从Reactelement到真实DOM的转换过程中，需要进行创建fiber、时间切片等优化，以提高渲染效率。例如，对于一个大型DOM，渲染时间会非常长，使用favor 可以更好地控制渲染过程。在非比尔和真实动物之间，还有地府算法可以更新单个状态，从而提高整个更新速度。转移过程由React处理，用户只需编写标签即可。

虽然我们在讲JSX，但实际上是TSX。TSX是在JS基础上进行语法扩展的。JS是没有类型系统的，无法保证类型安全或内容安全。通过TSX，可以解决这些问题。

虽然代码仍为JSX，但可以在其中添加类型。当添加类型时，state将始终为number，不可能变为string。在编译前，将进行类型检查和提示。如果将其立即更改为字符串，将提示无法通过编译。这表明UI始终是准确的类型，不会出现类型错误。这是TSC发挥作用的地方。

TSX不仅支持模板引擎，还支持任何javascript代码。例如，您可以通过在其中编写javascript代码来控制颜色变化。

通过点击按钮，可以控制颜色。颜色由style确定。

该样式后面需要接收一个对象，通过三元判断改变其颜色。

在onchange事件中，需要将state值作为参数传递，并使用取反操作更新style。

请注意这段代码的含义：通过下面的函数调用onchange方法，onchange方法会调用到setStyle方法，setStyle方法会更新style状态，并在这里进行三元判断。当样式发生变化时，会进行相应的判断。如果变量为q，则返回黑色，否则返回红色。可以验证一下效果。可以看到颜色已经改变了。

本节课到此结束，接下来我们将结合渲染函数和各类Hook进行深入讲解。