React 框架

框架"/>

React 框架

1、React 框架简介

1.1、介绍

CS 与 BS结合：像 React，Vue 此类框架，转移了部分服务器的功能到客户端。将CS 和 BS 加以结合。客户端只用请求一次服务器，服务器就将所有js代码返回给客户端，所有交互类操作都不再依赖服务器。 客户端只有在需要服务器的数据时才会使用json通信一下，其他时间都在客户端利用js操作、暂存数据这样就极大减轻了服务器压力。

1.2、React 特性

• 虚拟DOM树

React 通过对 DOM 的模拟，最大限度地减少与DOM的交互。将网页的DOM树完全复制一份虚拟的 DOM 树放到内存中。

•  数据驱动

维护虚拟 DOM 树，当发现某些节点发生变化时，并不一定修改原来的 DOM 树（在网页中看到的每一个区域），比如某些分支可能会发生该改变时，首先会修改虚拟树中的这几个节点，而后将这几个节点与原节点对比。才会对真正发生改变的节点做出修改。

 1.3、JSX文件 

为了构建交互式用户界面，使用了 JSX。JSX 的完整版本是一个JavaScript语法扩展，它极大地简化了组件的创建。它支持HTML引用并使子组件渲染更容易。它本质上是一组 React 编写快捷方式。使用带有一些规则的 createElement 可以使源代码更具可读性和直接性。首先写jsx文件，运行时会先将所编写的jsx编译为js，编译完之后，将js文件运行在浏览器。

2、配置环境

2.1、安装 Git Bash

Git bash 下载链接
Git Bash 安装教程

2.2、安装 Node.js

Nodejs 下载链接
Nodejs 安装教程

2.3、安装 create-react-app

打开 Git Bash，直接输入下面命令执行
npm i -g create-react-app

2.4、创建 React 项目，名为 React App

在目标目录（自己存放项目的目录）下右键打开 Git Bash，执行下面的命令

create-react-app react-app  # react-app可以替换为其它名称

2.5、启动项目

进入目录，目录进到 react-app 这一层，打开 Git Bash，输入下面命令

npm start  # 启动应用

3、组件（Component） 

组件类似于一个 class，将一些 html、data(数据)、事件函数组合在一起成为一个组件

3.1、定义组件

定义好组件之后，需要将组件渲染出来，index.js 就是所有 js 的入口， 并引入React与Component组件。

// box.js 文件
import React, { Component } from 'react';  		// 快捷键：imrc // 引入React原因：将jsx编译为js
// 通过React.createElement()class Box extends Component {					// 快捷键：CCstate = {  } 								//局部变量// component类的函数，用来返回当前组件最后的渲染html结构// render方法只能返回一个标签及所包含内容render() { return (<h1> Hello world</h1>);}
}export default Box;

// index.js 文件
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import 'bootstrap/dist/css/bootstrap.css';   		// 引入bootstrap库
import Box from './components/box';        			// 引入boxconst root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><Box /> 										// Box组件，见box.js</React.StrictMode>
);

3.2、React Fragment 介绍与使用

•  render()方法只能返回一个标签及所包含内容，想返回多个并列标签时需要包含在一个标签内。
• React.Fragment 组件能够在不额外创建 DOM 元素的情况下，让render()方法中返回多个元素。Fragments 允许将子列表分组，而无需向DOM添加额外标签。

理解起来就是在我们定义组件的时候，return里最外层包裹的div往往不想渲染到页面，那么就要用到Fragment组件了。

class Box extends Component { 
state = {  } 
render() { return (<React.Fragment><h1> Hello world</h1><button>left</button><button>right</button></React.Fragment>);
}
}

3.3、在 jsx 中写 js 与 html 标签

jsx 中可以在任意地方定义 html 标签，但要注意，jsx 里的 html 标签中写 js 代码时都需要加 {} 括起来，{} 中只能写表达式。

render() { return (<React.Fragment><h1>{this.toString()}</h1>  		// html 标签内写js<button className="btn btn-primary">left</button><button>right</button></React.Fragment>);
}toString(){return `x: ${this.state.x}`;// 或者// const {x} = this.state; //ES6写法相当于const xxx = this.state.xxx// return `x:${x}`;
}

3.4、设置样式

jsx文件下的html 标签中设置类名以用于 css 样式时，需要将 class =" "写为 className。 由于 jsx 下 html 标签与 js 语句混合，写 class 可能会与实际js中的同名类产生冲突。

  className

return (<React.Fragment><h1>{this.toString()}</h1>     <button className="btn btn-primary m-2">left</button><button className="btn btn-success m-2">right</button></React.Fragment>// m-2 为 bootstrap 中 margin=2 的简写方式
);

  style

render() { return (<React.Fragment>// style样式：第一层{}代表里面是表达式，第二层{}代表里面是对象，即样式变量的内容<div style={{width: "50px",height: "50px",backgroundColor: "pink", color: "white",textAlign: "center",lineHeight: "50px",borderRadius: "5px",}}>{this.toString()}</div>     <button className="btn btn-primary m-2">left</button><button className="btn btn-success m-2">right</button></React.Fragment>);
}

等价于：

styles = {width: "50px",height: "50px",backgroundColor: "pink", 					// css中所有 - 命名均改为驼峰命名法
}render() { return (    								// 标签内 style={this.styele} 即可<React.Fragment><div style={this.styles}>{this.toString()}</div>     <button className="btn btn-primary m-2">left</button><button className="btn btn-success m-2">right</button></React.Fragment>);
}

3.5、数据驱动改变 style

将 style 与 state（局部变量） 值相关联，通过改变 state 里的值来改变 style。当局部变量改变时，通过接口实现所有被这个值影响的组件都改变。

state = { x: 1,} getStyles() {let styles = {width: "50px",height: "50px",backgroundColor: "pink", color: "white",textAlign: "center",lineHeight: "50px",borderRadius: "5px",margin: '5px',};if (this.state.x === 0){styles.backgroundColor = 'orange'; // 数据驱动改变style}return styles;
}

 render() { return (// 直接调用 getStyles()函数<React.Fragment><div style={this.getStyles()}>{this.toString()}</div>     <button className="btn btn-primary m-2">left</button><button className="btn btn-success m-2">right</button></React.Fragment>);
}

3.6、渲染列表

使用 map 函数

遍历类写法需给每个标签元素定义唯一 key 属性，用来帮助React快速找到被修改的DOM元素

class Box extends Component { state = { x: 1,colors: ['red','green','blue'],   		// 定义渲染列表，这里用来修改div元素内容} render() { return (<React.Fragment>{this.state.colors.map(color => (<div key={color}>{color}</div> // 这里建立div并将内容赋值为上述列表))}             </React.Fragment>);}}

3.7、Conditional Rendering

A && B && C ...：从前往后，返回第一个为 false 的表达式。( 如果全为 true，就返回最后一个 true 表达式）
A || B || C ...：从前往后，返回第一个为 true 的表达式。（如果全为 false，就返回最后一个 false 表达式。）

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

 render() {       return (     <React.Fragment>   {this.state.colors.length === 0 && <p> No colors</p>}   // 即当 colors 有元素时无操作， 即当 colors 无元素时显示 No color{this.state.colors.map(color => (<div key={color}>{color}</div>))}             </React.Fragment>           );
}

3.8、绑定事件

class Box extends Component {handleClickLeft(){console.log("click left",this); }handleClickRight(){console.log("click right",this);}render() { //仅仅是绑定函数，而不是在渲染时就将返回值传过来，因此handleClickleft不加()    return (<React.Fragment><div style={this.getStyles()}>{this.toString()}</div> <button onClick={this.handleClickLeft} className="btn btn-primary m-2">left</button><button onClick={this.handleClickRight} className="btn btn-success m-2">right</button>          </React.Fragment>}
}

此时，输出的 this 不是 Box 类，而是 undifind。

如何使得方法里的 this 仍属于 Box 类：
// 法一：箭头函数（推荐）
// 法二： bind 函数

handleClickLeft=()=>{						 // 法一：箭头函数console.log("click left",this); 
}handleClickRight(){console.log("click right",this);
}render() { return (<React.Fragment><div style={this.getStyles()}>{this.toString()}</div> <button onClick={this.handleClickLeft} className="btn btn-primary m-2">left</button><button onClick={this.handleClickRight.bind(this)} className="btn btn-success m-2">right</button>          </React.Fragment>					// 法二：bind函数);
}

3.9、修改 state 里的值

直接 this.state.x-- 不会影响到页面div的显示的x值，
如果想要让 state 里的 x 的修改影响到render函数的话， 必须用 setState() 函数 （通过重新调用 render 修改 div 里 x 值）

class Box extends Component {state = { x: 1,} handleClickLeft = () => { this.setState({				// setState() 函数x: this.state.x - 1});}handleClickRight = () => {this.setState({					// setState() 函数x: this.state.x + 1});}render() {    return (<React.Fragment><div style={this.getStyles()}>{this.toString()}</div> <button onClick={this.handleClickLeft} className="btn btn-primary m-2">left</button><button onClick={this.handleClickRight} className="btn btn-success m-2">right</button>          </React.Fragment>);}
}

3.10、通过按钮修改css属性

将 state 里的值赋值给某一样式的属性，通过按钮修改state 值从而修改 css 样式

class Box extends Component {state = { x: 10, 							// state值} handleClickLeft = () => { this.setState({x: this.state.x - 10			// setState() 修改 state值, 重新调用 render() 函数});}handleClickRight = () => {this.setState({x: this.state.x + 10		// setState() 修改 state值，重新调用 render() 函数});}render() { return (<React.Fragment><div style={this.getStyles()}>{this.toString()}</div> <button onClick={this.handleClickLeft} className="btn btn-primary m-2">left</button><button onClick={this.handleClickRight} className="btn btn-success m-2">right</button>          </React.Fragment>);}getStyles() {let styles = {width: "50px",height: "50px",backgroundColor: "pink", color: "white",textAlign: "center",lineHeight: "50px",borderRadius: "5px",margin: '5px',marginLeft: this.state.x,              //  state值赋值给 css 属性值};if (this.state.x === 0){styles.backgroundColor = 'orange';}return styles;}		
}

3.11、给事件函数添加参数

handleClickRight = (step) => {this.setState({x: this.state.x + step});
}

handleClickRightTmp = () => {return this.handleClickRight(50);
}

 render() { return (<React.Fragment><div style={this.getStyles()}>{this.toString()}</div> <button onClick={this.handleClickLeft} className="btn btn-primary m-2">left</button><button onClick={this.handleClickRightTmp} className="btn btn-success m-2">right</button>          </React.Fragment>);
}

将 handleClickRight() 函数写为箭头匿名函数后等价于： 

render() { //    绑定了一个调用含参 函数 handleClickLeft =(step)=>{ }  的匿名函数  return (<React.Fragment><div style={this.getStyles()}>{this.toString()}</div> <button onClick={()=>this.handleClickLeft(10)} className="btn btn-primary m-2">left</button><button onClick={()=>this.handleClickRight(10)} className="btn btn-success m-2">right</button>          </React.Fragment>);}

综上，Box组件的构建步骤：

1、定义 state 变量，并使得数据驱动 style；

2、构造 handleClickLeft =(step)=>{ } 带参函数，利用 setState() 函数改变 state 值；调用setState()能够重新加载 render 函数，才可以对里面的 div 显示进行修改

3、给按钮的单击事件onClick绑定所写函数。这里绑定了一个调用含参函数 handleClickLeft =(step)=>{ } 的匿名函数，()=>this.handleClickRight(10)

class Box extends Component {// 1. 定义 state，并使得数据驱动stylestate = { x: 10,} // 2. 通过 handleClickLeft =(step)=>{ } 带参函数 与 setState()  改变state值//    并能够重新加载 render 函数来对里面的 div 显示进行操作handleClickLeft = (step) => { this.setState({x: this.state.x - step});}handleClickRight = (step) => {this.setState({x: this.state.x + step});}render() { // 3. 给事件绑定函数：通过 render 函数里，按钮事件绑定函数。//    绑定了一个调用含参函数 handleClickLeft =(step)=>{ }  的匿名函数  return (<React.Fragment><div style={this.getStyles()}>{this.toString()}</div> <button onClick={()=>this.handleClickLeft(10)} className="btn btn-primary m-2">left</button><button onClick={()=>this.handleClickRight(10)} className="btn btn-success m-2">right</button>          </React.Fragment>);}getStyles() {let styles = {width: "50px",height: "50px",backgroundColor: "pink", color: "white",textAlign: "center",lineHeight: "50px",borderRadius: "5px",margin: '5px',marginLeft: this.state.x,	// 数据驱动 style};if (this.state.x === 0){styles.backgroundColor = 'orange';}return styles;}
}