1 React的相关概念与原理介绍

开发react必须依赖的三个库

• react 包括react开发所必须的核心代码
• react-dom react渲染在不同平台所需要的核心代码
• babel 将jsx的语法转为React代码的工具

react最初想解决的问题：

• 以组件的方式去一个各划分功能模块。
• 组件内以JSX的方式来描述UI的样式和页面的结构，组件内以state来管理和维护组件的状态。
• 当应用的状态发生改变时，通过setState来修改状态，状态发生变化时，UI界面会自动发生更新。

react案例的演示

<srcipt type="text/babel">
    // 将数据定义到变量种
  let message = "hello react";
  // 通过ReactDom对象来渲染内容
  render()
  // 定义一个执行函数
  function btnClick() {
      message = "hello react";
    render()
  }
  // 渲染方法
  function render() {
      ReactDOM.render((
        <div>
        <h2>{ message }</h2>
        <button onClick={ btnClick }>改变文本<button>
      </div>
    ), document.getElementById("app"))
  }
</script>

2 JSX语法的介绍

import React from "react"
import { ReactDOM } from "react-dom"
// 定义jsx的语法
const element = <h2>我是用来测试的标题<h2>
// 渲染数据
ReactDOM.render(element, doucment.getElementById("app"))

2.1 JSX是什么？

• JSX是一种JavaScript的语法扩展（eXtension），也在很多地方称之为JavaScript XML，因为看起就是一段XML语法
• 它用于描述我们的UI界面，并且其完成可以和JavaScript融合在一起使用

• 它不同于Vue中的模块语法，你不需要专门学习模块语法中的一些指令（比如v-for、v-if、v-else、v-bind）

  2.2 JSX的书写规范

• JSX的顶层只能有一个根元素，所以我们很多时候会在外层包裹一个div原生（或者使用后面我们学习的Fragment）

• 为了方便阅读，我们通常在jsx的外层包裹一个小括号()，这样可以方便阅读，并且jsx可以进行换行书写；
• JSX中的标签可以是单标签，也可以是双标签；
  • 需要注意的是如果是单标签，必须以</>进行结尾，在jsx种，原生的html标签必须以</>进行结尾。

2.3 JSX中嵌入变量

• 当变量是String，Number，Array时，可以直接显示

  // 当变量的值是array的时候 可以直接渲染在dom种
  constructor(props) {
    super(props)
  this.state = {
      str: "字符串",
    num: 12345678910,
    moives: ["数据1", "数据2", "数据3"]
  }
  }
  render() {
    return (
      <div>
        <h2>{ this.state.str }</h2>
      <h2>{ this.state.num }</h2>
      <h2>{ this.state.movies }</h2>
    </div>
  )
  }

• 当变量是null、undefined、Boolean类型时，内容为空，但是渲染的外层的标签还在

  • 如果希望可以显示null、undefined、Boolean，那么需要转成字符串
  • 转换的方式有很多，比如toString方法、和空字符串拼接，String(变量)等方式
• 对象类型不能作为子元素（not valid as a React child）
  • 对象类型的数据不能直接放在jsx的表达式中，因为它无法进行相应的计算，但是数组是可以的

2.4 JSX中插入表达式

jsx中是可以插入任何的js表达式的，在{}中可以直接进行使用。

• 运算符表达式（&&的具体使用）
• 三元运算符
• 执行一个函数