React简介｜青训营笔记这是我参与「第四届青训营」笔记创作活动的第11天 React是什么用于构建用户界面的

这是我参与「第四届青训营」笔记创作活动的第11天

React是什么

用于构建用户界面的 JavaScript 库。

是一个将数据渲染为HTML视图的开源JavaScript库。

由Facebook开源。

为什么要学？

原生 JavaScript 操作 DOM 繁琐、效率低（DOM-API 操作 Ul )
使用 JavaScript 直接操作 DOM ，浏览器会进行大量的重绘重排。
原生 JavaScript 没有组件化编码方案，代码复用率低。

React的特点

采用组件化模式、声明式编码，提高开发效率及组件复用率。
在React Native中可以使用 React 语法进行移动端开发。
使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互。

官网

英文官网: https://reactjs.org/

中文官网: react.docschina.org/

React基本使用

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 创建一个容器 -->
    <div id="test"></div>

    <!-- 引入 react 核心库 -->
    <script src="./js/react.development.js"></script>
    <!-- 引入 react-dom ，用于支持 react 操作 DOM -->
    <script src="./js/react-dom.development.js"></script>
    <!-- 引入 babel ，用于将 jsx 转为 js -->
    <script src="./js/babel.min.js"></script>
    <!-- 此处一定要写 babel -->
    <script type="text/babel">
      // 创建虚拟 DOM
      /* 此处一定不要写引号，因为不是字符串 */
      const VDOM = (
        <h1>
          <span>Hello React</span>
        </h1>
      )
      // 渲染虚拟 DOM 到页面
      ReactDOM.render(VDOM, document.getElementById('test'))
    </script>
  </body>
</html>

关于虚拟DOM:

本质是object类型的对象（一般对象)
虚拟DOM比较轻”，真实DON比较"重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多的属性。
虚拟DOM最终会被React转化为真实DOM，呈现在页面上。

JSX

全称: JavaScript XML

react定义的一种类似于XML的JS扩展语法: JS + XML本质是React.createElement(component,props, ...children)方法的语法糖

作用: 用来简化创建虚拟DOM

写法：var ele = <h1>Hello JSX!</h1>
注意1：它不是字符串, 也不是HTML/XML标签
注意2：它最终产生的就是一个JS对象

标签名任意: HTML标签或其它标签

标签属性任意: HTML标签属性或其它

基本语法规则

const VDOM = (
    <div>
        <h2 className="title" id={myId.toLowerCase()}>
            <span style={{ color: 'white', fontSize: '29px' }}>{MyData.toLowerCase()}</span>
        </h2>
        <input type="text" />
        <input type="text"></input>
    </div>
)

遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含
定义虚拟DOM时，不要写引号。
样式的类名指定不要用class，要用className。
内联样式，要用style={{key:vaiue}}的形式去写。
只有一个根标签
标签必须闭合
标签首字母若小写字母开头，则将改标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。

若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。

babel.js的作用

浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
只要用了JSX，都要加上type="text/babel", 声明需要babel来处理

渲染虚拟DOM(元素)

语法: ReactDOM.render(virtualDOM, containerDOM)

作用: 将虚拟DOM元素渲染到页面中的真实容器DOM中显示

参数说明

参数一: 纯js或jsx创建的虚拟dom对象
参数二: 用来包含虚拟DOM元素的真实dom元素对象(一般是一个div)

JSX练习

<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.min.js"></script>

<script type="text/babel">
  const data = ['Angular', 'React', 'Vue']

  const VDOM = (
    <div>
      <h1>动态展示前端js框架列表</h1>
      <ul>
        {data.map((item, index) => {
          return <li key={index}>{item}</li>
        })}
    </ul>
    </div>
  )
  // 渲染虚拟 DOM 到页面
  ReactDOM.render(VDOM, document.getElementById('test'))
</script>

React简介 ｜ 青训营笔记