react的渲染与jsx技术

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
const divVD = React.createElement(
  'div',
  {
    title: 'hello react'
  },
  'Hello React！！！'
)

// 3. 渲染
ReactDOM.render(divVD, document.getElementById('app'))

API 说明

• createElement()：知道即可
• render()

// https://reactjs.org/docs/react-api.html
// 作用：根据指定的参数，创建react对象
//
// 第一个参数：指定创建虚拟DOM的类型
//  类型：string 或者 react组件
//  1 任意字符串类型的标签名称，比如：'div' / 'span'
//  2 react组件类型，比如：<Welcome></Welcome>
// 第二个参数：指定元素自身的属性
//  类型：对象或者null
// 第三个参数：当前元素的子元素
//  类型：string 或者 createElement() 的返回值
// 返回值：react对象
React.createElement(type, [props], [...children])

// https://reactjs.org/docs/react-dom.html
// 作用：渲染react元素
// 第一个参数：指定要渲染的react对象
// 第二个参数：指定渲染到页面中的容器（DOM对象）
// 第三个参数：回调函数
ReactDOM.render(element, container)

createElement()的问题

• 说明：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）

  注意：JSX 的语法需要通过 babel-preset-react 编译后，才能被解析执行

/* 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 中注释语法：{/* 中间是注释的内容 */}

ES6 中 class 关键字的使用

• ES6 中的所有的代码都是运行在严格模式中的
• 1 它是用来定义类的，是 ES6 中实现面向对象编程的新方式
• 2 使用static关键字定义静态属性
• 3 使用constructor构造函数，创建实例属性
• class 关键字

class Person {
  constructor(age) {
    // 实例属性
    this.age = age
  }
}

// 静态属性
Person.staticName = '静态属性'

const p = new Person(19)

• 在 class 中定义方法

// 实例方法
sayHello () {
  console.log('大家好，我今年' + this.age + '了');
}

// 静态方法
static wangwang () {
  console.log('我是小明，我新get了一个技能，会暖床');
}

• 实现继承的方式

class American extends Person {
  constructor() {
    // 必须调用super(), super表示父类的构造函数
    super()

    this.skin = 'white'
    this.eyeColor = 'white'
  }
}

常见错误解决方式：