React 初探

简介

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。

React 起源于 Facebook 的内部项目，用来架设 Instagram 的网站，并于 2013 年 5 月开源。

React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

官网：https://www.reactjscn.com/

下载

首先你要配置好 webpack ，这里就不再多说了，可以看我以前写的 http://www.zhaosirlaile.com/#/article/00020

1. 下载 react-dom 和 react 这两个包

   npm i react react-dom -S
   

2. 在 index.html 页面中创建一个容器

   <!-- 使用 React 创建的虚拟DOM元素，都会被渲染到这个指定的容器中 -->
   <div id="app"></div>
   

3. 导入包

   import React from 'react'
   import ReactDOM from 'react-dom'
   

4. 使用ReactDOM.render 进行渲染：

   ReactDOM.render(<h1></h1>, document.getElementById('app'))
   

JSX

什么是JSX语法：就是符合 xml 规范的 JS 语法；（语法格式相对来说，要比HTML严谨很多）

let element = <h1>Hello, world!</h1>;

官方解释：它被称为 JSX， 一种 JavaScript 的语法扩展。 我们推荐在 React 中使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的

简单来说：就是使用 jsx 更方便的在js文件中书写html元素

注意 : jsx 语法的本质：并不是直接把 jsx 渲染到页面上，而是内部先转换成了 createElement 形式，再渲染的；

在 jsx 中写入 js 表达式 （{}）

在 jsx 语法中，要把 JS代码写到 { } 中

• 渲染数字
• 渲染字符串
• 渲染布尔值
• 为属性绑定值
• 渲染jsx元素
• 渲染jsx元素数组
• 将普通字符串数组，转为jsx数组并渲染到页面上
  • 一种是在外面写好了在使用 {} ，插入到对应的位置
  • 另一种就是在jsx中对应的位置使用数组的map函数也是可以的（推荐）

jsx 中注释

一种：

const app = <div>
{
    // 这是注释
    // 这是注释
}
</div>

另一种：

const app = <div>
    {
    /* 这是注释
    这是注释 */
    }
</div>

jsx 中的元素添加class类名，label添加for

• 需要使用className 来替代 class
• htmlFor替换label元素的for属性

jsx 创建 DOM 的时候，注意

• 在JSX创建DOM的时候，所有的节点，必须有唯一的根元素进行包裹；
• 在 jsx 语法中，标签必须 成对出现，如果是单标签，则必须自闭和！

当编译引擎，在编译JSX代码的时候，如果遇到了<那么就把它当作 HTML代码去编译，如果遇到了 {} 就把 花括号内部的代码当作 普通JS代码去编译；

组件

第一种

第一种方式其实就是一个构造函数,

如果在一个组件中return一个null，则表示此组件是空的，什么都不会渲染；或者return一个合法的JSX创建的虚拟DOM。如果函数中没有return就会报错

创建组件

function Pry () {
    return <p>Hello Wolrd 组件</p>
}

使用组件

function Pry () {
    return <p>Hello Wolrd 组件</p>
}

const myh1 = <div>
    <Pry></Pry>
</div>

注意：不管是在创建组件，还是在使用组件，组件名称的第一个首字母必须大写

传参（props）

// 使用组件并 为组件传递 props 数据
function Pry (props) {
    return <p>我的名字是：{props.name}，我的性别是：{props.sex}</p>
}

const dom = <div>
    <Pry name='小明' sex='男' ></Pry>
</div>
// 注意：不论是 Vue 还是 React，组件中的 props 永远都是只读的；不能被重新赋值；
ReactDOM.render(dom,document.getElementById('app'));

使用 .jsx 文件创建组件

这是文件目录：

我们在 index.js 文件中导入 Hello.jsx 文件

以下是 index.js 的代码：

import React from 'react';
import ReactDOM from 'react-dom';
// 组件
import Hello from './componnets/Hello';

let dog = {
    name:'小航',
    sex : "madom",    
}
const myh1 = <div>
    <Hello {...dog} ></Hello>
</div>
ReactDOM.render(myh1,document.getElementById('app'));

以下是 Hello.js 的代码:

import React from 'react';			// 必须导入，否则报错
export default function Hello (props) {
   
    return <p>我的名字是：{
   props.name}，我的性别是：{
   props.sex}</p>
}

第二种

使用 es6 的 class关键字 创建对象，其实 class关键字 仅仅只是 new关键字的语法糖而已，使用 new 和 class 创建的效果是一样的，只是 class 关键字创建起对象更方便，看着更舒服，但是创建组件就有区别了。

语法

class Animal {
   
    constructor(name,sex,age) {
   		//构造函数
        this.name = name;
        this.age  = age;
        this.sex  =