随想笔录

Appearance

React 概述 ​

React 是一个用于构建用户界面的 JavaScript 库。

如果从 MVC 的角度来看，React 仅仅是视图层（View），也就是只负责视图的渲染，而并非提供了 完整的 M 和 C 的功能。 React 起源于 Facebook ,并于 2013 年 5 月开源

React 三个特点 ​

  • 1 声明式
    • JSX 语法是声明式的，只需要描述页面长什么样子
    • React.createElement() 是命令式
  • 2 组件化
    • 创建拥有各自状态的组件，再由这些组件构成更加复杂的 UI
    • 组件逻辑使用 JavaScript 编写而非模版
  • 3 一次学习，随处编写
    • 不仅可以开发 web 应用（react-dom），还可以开发原生安卓或ios应用（react-native）

React基本使用 ​

  1. 在html定义一个根标签

    javascript
    <div id="root"></div>

  2. 引入两个JS文件（ 注意引入顺序 ）

    html
    <!-- 提供react核心api-->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

<!-- 提供了react中操作dom的api-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

  3. 创建react元素(类似html元素)

    javascript
    // 返回值：React元素 
// 第一个参数：要创建的React元素名称 字符串
// 第二个参数：该React元素的属性 null或者对象 {id: 'box'}
// 第三个及其以后的参数：该React元素的子节点 文本或者其他react元素
const title = React.createElement('h1', null, 'Hello React',...)

  4. 渲染 react 元素

    javascript
    ReactDOM.render(title, document.getElementById('root'))