从零开始 2，react -快速上手

什么是React

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

	用来构建UI的 JavaScript库
	React 不是一个 MVC 框架，仅仅是视图（V）层的库

特点

1 使用 JSX语法 创建组件，实现组件化开发，为函数式的 UI 编程方式打开了大门
2 性能高的让人称赞：通过 diff算法 和 虚拟DOM 实现视图的高效更新
3 HTML仅仅是个开始

为什么要用React

1 使用组件化开发方式，符合现代Web开发的趋势
2 技术成熟，社区完善，配件齐全，适用于大型Web项目（生态系统健全）
3 由Facebook专门的团队维护，技术支持可靠
4 ReactNative - Learn once, write anywhere: Build mobile apps with React
5 使用方式简单，性能非常高，支持服务端渲染
6 React非常火，从技术角度，可以满足好奇心，提高技术水平；从职业角度，有利于求职和晋升，有利于参与潜力大的项目

React中的核心概念

1 虚拟DOM（Virtual DOM）
2 Diff算法（虚拟DOM的加速器，提升React性能的法宝）

虚拟DOM（Vitural DOM）

React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个对象来描述DOM，通过对比前后两个对象的差异，最终只把变化的部分重新渲染，提高渲染的效率

为什么用虚拟dom，当dom反生更改时需要遍历 而原生dom可遍历属性多大231个 且大部分与渲染无关 更新页面代价太大

React的基本使用

安装：npm i -S react react-dom
react：react 是React库的入口点
react-dom：提供了针对DOM的方法，比如：把创建的虚拟DOM，渲染到页面上

// 1. 导入 react
import React from 'react'
import ReactDOM from 'react-dom'

// 2. 创建 虚拟DOM
// 参数1：元素名称  参数2：元素属性对象(null表示无)  参数3：当前元素的子元素string||createElement() 的返回值
const divVD = React.createElement('div', {
  title: 'hello react'
}, 'Hello React！！！')

// 3. 渲染
// 参数1：虚拟dom对象  参数2：dom对象表示渲染到哪个元素内 参数3：回调函数
ReactDOM.render(divVD, document.getElementById('app'))

createElement()的问题

var dv = React.createElement(
  "div",
  { className: "shopping-list" },
  React.createElement(
    "h1",
    null,
    "Shopping List for "
  ),
  React.createElement(
    "ul",
    null,
    React.createElement(
      "li",
      null,
      "Instagram"
    ),
    React.createElement(
      "li",
      null,
      "WhatsApp"
    )
  )
)
// 渲染
ReactDOM.render(dv, document.getElementById('app'))

JSX 的基本使用

注意：JSX语法，最终会被编译为 createElement() 方法
推荐：使用 JSX 的方式创建组件
JSX - JavaScript XML
安装：npm i -D babel-preset-react （依赖与：babel-core/babel-loader）

/* 1 在 .babelrc 开启babel对 JSX 的转换 */
{
  "presets": [
    "env", "react"
  ]
}

/* 2 webpack.config.js */
module: [
  rules: [
    { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ },
  ]
]

/* 3 在 js 文件中 使用 JSX */
const dv = (
  <div title="标题" className="cls container">Hello JSX!</div>
)

/* 4 渲染 JSX 到页面中 */
ReactDOM.render(dv, document.getElementById('app'))

JSX的注意点

注意 1: 如果在 JSX 中给元素添加类, 需要使用 className 代替 class
    类似：label 的 for属性，使用htmlFor代替
注意 2：在 JSX 中可以直接使用 JS代码，直接在 JSX 中通过 {} 中间写 JS代码即可
注意 3：在 JSX 中只能使用表达式，但是不能出现 语句！！！
注意 4：在 JSX 中注释语法：{/* 中间是注释的内容 */}

来源：oschina

链接：https://my.oschina.net/u/2649913/blog/1920234

标签

react

babel

hello-react

jsx

reactjs