(工程_前端)react快速入门

1.语法

本文介绍react的主要语法¹。所谓react框架，其实是将一个页面中的各个模块（每个模块包括标签、数据和事件）封装成一个对象的做法。

1.0 react的特性——简化开发

• 为方便修改和维护页面，其在内存里面创建了一个虚拟的dom树（vdom）
• 数据驱动。当某一个元素发生改变，其相关的其他元素也会发生改变
• 开发效率高。只需要写jsx代码，而避开了js代码的书写，相对容易

1.1 配置环境——安装相应库

• React官网：用于学习入门的语法知识，地址
• Nodejs官网：js的运行环境，地址
• JSX：React中的一种语言，会被Babel编译成标准JavaScript，其是在JS的基础上支持xml的一种语言（包括html），即JSX→编译→JS。编译地址

React启动命令：

npmi-gcreate-react-app create-react-app react-app# 可以替换为其他app名称cdreact-appnpmstart# 启动应用

小技巧

vscode中常用的自动补全：

• imrc自动补全import React, { Component } from 'react';
• cc自动补全如下代码：

classclassNameextendsComponent{state={}render(){return();}}exportdefaultclassName;

1.2 ES6语法补充——bind/export/import/对象的解构

使用bind()函数绑定this取值

在JavaScript中，函数里的this指向的是执行时的调用者，而非定义时所在的对象。

例如：

constperson={name:"zhangsan",talk:function(){console.log(this);}}person.talk();consttalk=person.talk;talk();

运行结果：

{name:'zhangsan',talk:ƒ}Window

前者是person对象调用的，因此this即为person；后者默认是window对象调用的，因此this即为window

箭头函数的简写方式

constf=(x)=>{returnx*x;};

可以简写为：

constf=x=>x*x;

箭头函数不重新绑定this的取值

例如：

constperson={talk:function(){setTimeout(function(){console.log(this);},1000);}};person.talk();// 输出Window

这是因为
在非严格模式下，独立函数中的 this 默认指向全局对象（浏览器中是Window）
在严格模式下，会输出undefined

constperson={talk:function(){setTimeout(()=>{console.log(this);},1000);}};person.talk();// 输出 {talk: f}

而上面这种情况，则由于箭头函数没有绑定（blind）自己的this，所以指向talk所在的对象的this

对象的解构

例如：

constperson={name:"zhangsan",age:18,height:180,};const{name:nm,age}=person;// nm是name的别名

数组和对象的展开

例如：

leta=[1,2,3];letb=[...a];// b是a的复制letc=[...a,4,5,6];// 此时 c=[1,2,3,4,5,6]letd=[a,4,5,6]// 此时 d=[[1,2,3], 4, 5, 6]consta={name:"yxc"};constb={age:18};constc={...a,...b,height:180};

Named 与 Default exports

• Named Export：可以export多个，import的时候需要加大括号，名称需要匹配
• Default Export：最多export一个，import的时候不需要加大括号，可以直接定义别名

例如：

Default Export

exportdefaultclassPlayer{...}// Default Export，只能有一个importMyPlayerfrom"./player"// 直接取别名，因为唯一性，所以没有歧义

Named Export

letid=10;export{id};import{idasid2}from"./player"

1.3 Components——组件化

1.3.1 创建项目

创建项目box-app：

create-react-app box-appcdbox-appnpmstart

安装bootstrap库：

npmi bootstrap

bootstrap的引入方式：

import'bootstrap/dist/css/bootstrap.css';

1.3.2 创建Component

位置一般位于：src/componets/test.jsx

classclassNameextendsComponent{state={}render(){return();}}exportdefaultclassName;

在render的返回，只能返回一个标签。因此需要返回多组标签必须用div标签括号起来

1.3.3 创建按钮
当子节点数量大于1时，可以用<div>或<React.Fragment>将其括起来。

注意：<React.Fragment>是虚拟元素，在浏览器渲染的时候不渲染；在js中渲染html中的选择器必须用className，因为class是js的关键字

例如：

render(){return(<React.Fragment><div>{this.toString()}</div><button className='btn btn-primary'>left</button></React.Fragment>);}

1.3.4 内嵌表达式

JSX中使用{}嵌入表达式。

1.3.5 设置属性

• class→className
• CSS属性：background-color → backgroundColor，其它属性类似

1.3.6 数据驱动改变Style
css属性可以定义在styles对象中

例如：

styles={width:"50px",height:"50px",backgroundColor:"lightblue"}render(){return(<div><div style={this.styles}>{this.state.x}</div></div>);}

1.3.7 渲染列表

• 使用map函数
• 每个元素需要具有唯一的key属性，用来帮助React快速找到被修改的DOM元素。

例如：

{this.state.colors.map(color=>(<div key={color}>color</div>))}

1.3.8 Conditional Rendering

利用逻辑表达式的短路原则。

• 与表达式中expr1 && expr2，当expr1为假时返回expr1的值，否则返回expr2的值
• 或表达式中expr1 || expr2，当expr1为真时返回expr1的值，否则返回expr2的值

例如：

0&&1// 结果为01&&true// 结果为true1||true// 结果为10||true//结果为true

1.3.9 绑定事件

注意妥善处理好绑定事件函数的this

例如：

handleClick(){console.log("click",this);}<button onClick={this.handleClick}></button>

结果为click undefined
因为类方法运行在严格模式下，this不知道是在什么地方调用了click，所以是undefined，只需要将onClick绑定的函数改成箭头函数即可

handleClick=()=>{console.log("click",this);}

1.3.10 修改state

• 需要使用this.setState()函数
• 每次调用this.setState()函数后，会重新调用this.render()函数，用来修改虚拟DOM树。React只会修改不同步的实际DOM树节点。

1.3.11 给事件函数添加参数

例如：

classMyComponentextendsReact.Component{handleClick(id,name){console.log('点击了:',id,name);}render(){constuserId=1;constuserName='张三';return(<button onClick={()=>this.handleClick(userId,userName)}>点击</button>);}}

1.4 组合Components——组件间的交互

本节主要讲述react组件之间的组合和交互

1.4.1 创建Boxes组件

Boxes组件中包含一系列Box组件。

1.4.2 从上往下传递数据
通过this.props属性可以从上到下传递数据。所谓props是一个对象，里面包含多组属性。其传递方式如下所示：

父组件Boxes通过data:props属性传递子组件Box；Box可以将函数传递给Boxes

1.4.3 传递子节点
通过this.props.children属性传递子节点。

例如：

render(){return(<React.Fragment>{this.state.boxes.map(box=>(<Box key={box.id}x={box.x}>// 里面的属性是传递数据<h1>Hello World</h1>// 里面的元素是传递子节点</Box>))}</React.Fragment>);}

1.4.4 从下往上调用函数
注意：每个组件的this.state只能在组件内部修改，不能在其他组件内修改。【类似于private属性】

1.4.5 每个维护的数据仅能保存在一个this.state中
不要直接修改this.state的值，因为setState函数可能会将修改覆盖掉。

1.4.6 创建App组件
包含：

• 导航栏组件
• Boxes组件

注意：
要将多个组件共用的数据存放到最近公共祖先的this.state中。

1.4.7 无状态函数组件

• 当组件中没有用到this.state时，可以简写为无状态的函数组件。

• 函数的传入参数为props对象

• 类组件相对于函数组件来说，它的最大好处是可以比较方便地去维护它的状态

• 无状态函数组件（stateless function component，SFC）的快捷键是sfc

例如：

constBoxes=(props)=>{return(<React.Fragment><button onClick={props.onReset}style={{marginBottom:"15px"}}className='btn btn-info'>Reset</button>{props.boxes.map(box=>(<Box key={box.id}box={box}onClickLeft={()=>props.onClickLeft(box)}onClickRight={()=>props.onClickRight(box)}onDelete={props.onDelete}/>))}</React.Fragment>);};

通过语法糖可以简化为：

constBoxes=({onReset,boxes,onClickLeft,onClickRight,onDelete})=>{return(<React.Fragment><button onClick={onReset}style={{marginBottom:"15px"}}className='btn btn-info'>Reset</button>{boxes.map(box=>(<Box key={box.id}box={box}onClickLeft={()=>onClickLeft(box)}onClickRight={()=>onClickRight(box)}onDelete={onDelete}/>))}</React.Fragment>);};

1.4.8 组件的生命周期

• Mount周期，执行顺序：constructor() -> render() -> componentDidMount()。用于挂载/创建组件
• Update周期，执行顺序：render() -> componentDidUpdate()。用于修改组件
• Unmount周期，执行顺序：componentWillUnmount()。用于删除组件

例如，在创建的时候获取数据示例为：

componentDidMount(){ajax();this.setState();}

函数componentDidUpdate在更新的时候可以同步获取前一个时刻的props和state：

componentDidUpdate(prevProps,prevState){console.log("prevState",prevState,this.state);}

参考文献