React的基本介绍

介绍react特点

高效：React通过对DOM的模拟，最大限度地减少与DOM的交互

组件化：React采取组件化开发，极大限度的使组件得到复用，便于开发管理与维护

适用多端：一处开发，多端适用，将颠覆整个互联网行业

github

点击进入react的github网站 ​​react​​

演示的当前版本是16版本，

我们基于ES6语法，讲解16版本的react

在16版本中，只支持ES6开发。

两个库

React为了实现多端适配，将整个库拆分成两个库

核心库：react.js，负责创建组件和虚拟DOM

渲染库：我们讲解web端，使用react-dom，将创建的组件或者虚拟DOM，在该端能够渲染。

核心库

核心库提供了createElement方法，创建虚拟DOM

第一个参数表示虚拟DOM名称，也可以是组件类

第二个参数表示属性对象

从第三个参数开始，表示子虚拟DOM

也要用createElement方法来创建，但是文本节点可以直接写

返回值就是虚拟DOM

虚拟DOM

虚拟DOM就是一个js对象

key 表示虚拟DOM的id

props 表示虚拟DOM的属性对象

ref 用来在js中，引用虚拟DOM

type 表示虚拟DOM类型

渲染库

例如在web端，我们使用react-dom渲染库，提供了render方法，用来渲染虚拟DOM

第一个参数表示虚拟DOM

第二个参数表示容器元素

第三个参数是回调函数，表示渲染成功时候执行的函数。

// 引入react
import { createElement } from 'react'
// 引入渲染库
import { render } from 'react-dom';
// import * as A from 'react'
// console.log(A)
// 创建虚拟DOM
 var h1 = createElement('h1', { title: 'hello' }, '菜鸟学习')
console.log(h1)
 // 将虚拟DOM渲染到页面中
 render(h1, document.getElementById('app'), (...args) => {
  console.log(args)
})

组件

虚拟DOM是对真实DOM模拟，因此开发项目要定义很多的虚拟DOM，为了复用虚拟DOM，react提供了组件。

从16版本开始，只能使用ES6语法开发项目

在ES5开发中，定义组件，使用React.createClass方法

在ES6开发中，组件就是一个类，因此定义组件就是定义一个类，为了让组件类具有组件的行为，我们要让组件类继承组件基类Component

语法 class 类名 extends Component {}

使用父组件的目的是为了复用虚拟DOM，因此我们可以通过render方法去渲染虚拟DOM

返回值就是渲染的虚拟DOM树

为了将虚拟DOM渲染到页面在，我们使用render方法，但是render方法的第一个参数是虚拟DOM不是组件。因此我们要将组件转换成虚拟DOM

可以通过createElement方法将组件转化成虚拟DOM

注意：

组件是类，因此首字母要大写

render方法返回值是虚拟DOM树，只能有且只有一个根节点。

class Demo extends Component {
  // 渲染虚拟DOM
  render() {
  // 返回值就是虚拟DOM
  return createElement(
  'ul',
  null,
  createElement('li', null, '教你学习'),
  )
  }
 }
 // 将组件转换成虚拟DOM
 var demo = createElement(Demo);
 // 渲染
 // 通过id名称访问该元素
render(demo, app)

jsx语法

react团队认为定义虚拟DOM使用createElement方法，太麻烦了。因此参考了xhtml语法规范，实现了jsx语法。来简化定义虚拟DOM

在xhtml中定义div：

在jsx中定义div：

在xhtml中定义input:

在jsx中定义input:

在jsx语法中，定义虚拟DOM跟定义真实的DOM是一样的，不过浏览器不允许我们在js中使用jsx语法，所以我们要编译。（jsx语法已经纳入es7规范了）

jsx语法被纳入es规范，因此也可以通过babel工具编译。

为了编译jsx语法，我们要引入babel-presets-react插件

我们基于es6语法开发项目，因此为了编译es6语法，要引入babel-preset-es2015插件

所以在es6中使用jsx语法，我们要引入这两个插件

为了区别使用jsx语法，还是使用js语法，建议我们将文件的拓展名定义成.jsx

有时候，也可以在es6中使用jsx语法，可以在拓展名后面添加x来区分

例如：.jsx, .esx, .es6x

在react开发中，建议使用jsx。

jsx语法就是为了提到createElement方法的

编译结果

class Demo extends Component {
  // 渲染
  render() {
  // jsx语法中，开发虚拟DOM，跟写DOM的方式是一样的
 return (
  <ul>
  <li>教你学习</li>
  </ul>
  )
  }
}

插值

我们已经学过的插值语法：

ejs： ​​<%=%>​​

MVC: ​​<%%>​​

es6： ​​${}​​

less: ​​@{}​​

scss: ​​#{}​​

微信： ​​{{}}​​

vue: ​​{{}}​​

在一个非js环境下，想使用js中的表达式，我们可以使用插值语法

jsx环境不是js环境，在jsx语法中，我们无法使用js表达式，因此想在jsx语法中使用js表达式，我们就要使用插值语法： {}

插值语法提供了真实的js环境，因此可以使用js表达式。