React 介绍

React 与 Vue 的区别

• React 与 Vue 的主要区别在于，Vue 的模板是写在 <template> 中，并且数据是在 <script> 中进行处理。<script> 中响应式的数据发生变化时，视图会自动更新。

• 相同情况下，React 则是通过 JSX 来实现。通过 Function 函数来创建一个新的组件。函数中可编写一些 <script> 代码逻辑，函数最终返回 <template> 模板。

JSX

在原生 JavaScript 中，我们可以通过 createElement 来创建一个元素，然后通过 setAttribute 来添加属性，通过 on 方法来添加事件，最后通过 appendChild 渲染到页面中。

当有多层元素嵌套时，还需要用以上的一系列方法创建子元素，然后插入到父元素中，最后再将父元素渲染到页面中，这样的一套操作是非常的繁琐的。

所以 JSX 它是由 React 推广的 JavaScript 语法扩展，将 JSX 标签与相关的渲染逻辑放在一起，使得创建、维护和删除 React 组件变得容易。也就是说，在 JavaScriptF 代码中可以直接编写 html 标签。

/**
 * video 组件
 */
function Video({ video }) {
    return (
        <div>
            <Thumbnail video={video} />
            <a href={video.url}>
                <h3>{video.title}</h3>
                <p>{video.description}</p>
            </a>
            <LikeButton video={video} />
        </div>
    )
}