react框架入门、脚手架、组件、事件绑定、安装步骤

朴灿烈づ我的快乐病毒、 2022-12-05 10:20 6阅读 0赞

## 一、react框架入门 ##

### 1.介绍 ###

react 是facebook开源的库，用于构建用户界面的 JavaScript 库，它不是一个完整的MVC，最多可以认为是MVC中的V（view视图层）。

官网：https://react.docschina.org/

优势：

浏览器兼容性好

一切皆组件

虚拟DOM（diff）

JSX语法糖

缺点：

不是一个完整的MVC设计模式，自己本身无法开发大型项目，需要结合flux、redux。

### 2.基本使用 ###

第一步：引入核心库

第二步：设置一个容器

第三步：创建虚拟DOM，并渲染到页面上

ReactDOM.render(React.createElement('h1',{},"这是一个h1标题"),document.getElementById('app'))

### 3.JSX语法糖【可选，推荐使用】 ###

使用createElement方法可以创建出来虚拟DOM，但是如果虚拟DOM的结构和层级比较复杂时，再使用createElement方法就会很吃力了，所以facebook专门为React开发了一套JSX语法糖。

JSX语法糖是facebook专门为react开发的一套语法糖，它不是一个新的语法，而是将之前的js、html进行整合，方便程序开发人员更好的开发和阅读代码。

JSX允许JavaScript和HTML混合在一起使用。

特点：遇到<时就解析成HTML语法，遇到\{时就解析成JS语法。

第一步：引入解析JSX语法的核心库

第二步：修改script的type属性

script的type属性默认为text/javascript，浏览器会识别script中的写的脚本代码为js

第三步：创建虚拟DOM并渲染到页面中

var el = <div>
        <p>jsx语法糖的使用</p>  
        <span></span>
    </div>
    ReactDOM.render(el,document.getElementById('app'))

### 4.数据类型解析 ###

### 5.属性绑定 ###

className

style

<li className="red" key={index} style={
       { fontSize:26 }}

在style中

第一个花括号解析成js语法，第二个花括号表示是一个对象

像素单位默认是px，可以不用写，如果是其他单位，需要进行拼接

img

var imgurl = '图片地址'
    <img src={ imgurl } />

## 二、常见错误 ##

1.babel.min.js:7 Uncaught SyntaxError: Inline Babel script: Adjacent JSX elements must be wrapped in an enclosing tag (5:57)

虚拟DOM只能有一个根标签

2.Warning: Invalid DOM property `class`. Did you mean `className`?  
in div

在react中，class是类的关键词，所以不能用class属性，要使用className

3.Uncaught SyntaxError: Inline Babel script: Unterminated JSX contents

在jsx中，所有的标签都要有闭合，包括单闭合标签

input、img、br、hr

4.Warning: Invalid DOM property `for`. Did you mean `htmlFor`?

在react中，for是遍历循环的关键词，label标签不能用for属性，需要改成htmlFor

5.Warning: Each child in a list should have a unique “key” prop.

在遍历循环生成虚拟DOM时，需要给虚拟DOM设置一个key属性来唯一标识这个DOM结构，加快渲染速度。

6.react-dom.development.js:6824 Uncaught Error: The `style` prop expects a mapping from style properties to values, not a string. For example, style=\{ \{marginRight: spacing + ‘em’\}\} when using JSX.

在react的jsx语法中，style预期得到的是一个对象，而不是字符串

7.Warning: The tag is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

***react的组件名要首字母大写***

## 三、脚手架 ##

### 1.安装 ###

npm i create-react-app -g

### 2.初始化项目 ###

进入一个指定的目录（不建议在桌面）

create-react-app 项目名称

### 3.运行项目 ###

进入项目根目录，然后执行命令

npm start

### 4.项目目录结构 ###

项目名称

node\_modules 项目依赖目录

public 项目运行根目录

index.html 项目运行首页

src 项目源码目录

index.js 项目启动文件

index.css 项目全局样式文件

App.js 项目根组件

App.css 项目根组件样式

### 5.项目运行流程 ###

/public/index.html

/src/index.js

/src/App.js

## 四、组件 ##

### 1.函数式组件 ###

它没有自己的业务逻辑，无状态组件（木偶组件）

(1)es5方式

var Home = function(){
        return(
            <div>
                <h1>home页面</h1>
            </div>
        )
    }
    export default Home;

(2)es6

export default ()=>{
        return(
            <div>
                <h1>home页面</h1>
            </div>
        )
    }

### 2.类组件 ###

状态组件（业务组件），类组件有生命周期。

示例代码：

方式一：

import React from 'react'
    class Order extends React.Component{ 
        constructor(){ 
            super();
            console.log('构造函数先执行')
            // console.log(this)
        }
        render(){ 
            console.log('render函数执行了')
            return(
                <div>
                    <h1>这是order页面</h1>
                </div>
            )
        }
    }
    export default Order;

方式二：

import React,{  Component } from 'react'
    export default class Order extends Component{ 
        render(){ 
            return(
                <div>
                    <h1>这是order页面</h1>
                </div>
            )
        }
    }

## 五、事件 ##

### 1.事件绑定 ###

#### (1)es5方式 ####

在给按钮绑定点击事件时，不需要传递参数的时候，不要写小括号，否则指定的函数会自动执行。

import React,{  Component } from 'react'
    export default class Index extends Component{ 
        render(){ 
            return(
                <div>
                    <h1>index页面-事件</h1>
                    { /* 事件绑定-es5方式 */}
                    <button onClick={  this.addnum }>点击</button>
                </div>
            )
        }
        addnum(){ 
            console.log('addnum....')
            console.log(this)
        }
    }

此时，在绑定的函数中，无法获取this，如果想要在自定义函数中获取this，需要bind进行绑定

<button onClick={ this.addnum.bind(this) }>点击-es5-有this</button>

#### (2)es6方式 ####

<button onClick={ ()=>this.handler1() }>点击-es6</button>

箭头函数，可以保持this指向

### 2.事件对象 ###

#### (1)es5方式 ####

在es5方式中，事件触发函数时，不传递参数，在对应的事件函数中有形参的话，这个形参就是事件对象。

#### (2)es6方式 ####

<button onClick={ (e)=>this.handler2(e) }>事件对象-es6</button>

es6语法中，如果不主动传递事件对象，那么在自定义函数中是无法获取到事件对象的。

### 3.传参 ###

#### (1)es5方式 ####

在es5方式中，需要传递额外参数时，要使用bind(this,实参1)

在函数定义中的第一个形参就是传递的实参，（形参就不再是事件对象了）

如果还想获取事件对象，那么需要在函数定义中多添加一个形参(最后一个)，它就是事件对象

js代码

handler3(e,str,ev){
        console.log(e,111111)
        console.log(str,22222)//前两个参数是传递的实参
        console.log(ev)//ev是事件对象
        // console.log(this)
    }

#### (2)es6方式 ####

<button onClick={ (e)=>this.handler3(e,'测试',555) }>传递参数-es6</button>

es6使用箭头函数调用自定义函数时，实参传递的是什么内容，形参接收到的就是什么。

## 六、状态机 ##

每一个类组件中，都有一个state属性，我们可以把页面组件的初始数据放到state中。

当页面中需要修改初始数据并让页面重新渲染，需要使用setState函数来执行

setState完成了两件事情：

第一个是把指定数据与原来state中的数据进行合并

第二个是调用diff算法进行页面的重新渲染。

import React, {  Component } from 'react'
    export default class Order extends Component { 
        constructor(){ 
            super();
            this.state = {  num:100 }
        }
        add(){ 
            // this.state.num++;
            // this.render();//这种方法会修改数据，但是页面不会变化
            var num = this.state.num;//react中不能直接对state进行修改，所以先取出原有的值，然后再进行修改
            this.setState({ 
                num:++num
            })
        }
        render() { 
            console.log('页面渲染了....')
            return (
                <div>
                    <h1>order页面</h1>
                    <p>订单数量为：{  this.state.num }</p>
                    <button onClick={  ()=>this.add() }>点击增加</button>
                </div>
            )
        }
    }

## 七、模拟表单元素双向绑定 ##

import React, {  Component } from 'react'
    
    export default class Form extends Component { 
        state = { 
            username:'',
            phone:''
        }
        iptChange(e){ 
            // console.log(e.target)
            // this.setState({ 
            // username:e.target.value
            // })
            var data = this.state;
            data[e.target.id] = e.target.value;
            this.setState(data)
        }
        submit(){ 
            console.log(this.state)
        }
        render() { 
            return (
                <div>
                    <h1>表单信息收集</h1>
                    用户名：<input type="text" id="username" value={  this.state.username } onChange={  (e)=>this.iptChange(e) }/>
                    <p>{  this.state.username }</p>
                    <br/>
                    手机号：<input type="text" id="phone" value={  this.state.phone } onChange={  (e)=>this.iptChange(e)}/>
                    <p>{  this.state.phone }</p>
                    <br/>
                    <button onClick={  ()=>this.submit() }>提交</button>
                </div>
            )
        }
    }