一、状态值 state
state 用于管理组件内部的数据和状态,类似于 vue 中 data 的概念。
在 vue 中,会对每一个属性都设置监听,实时的监听属性的变化并且刷新 DOM,而如果属性过多就自动生成很多监听器,容易造成负载大、性能下降等问题;
在 React 中就没有自动监听器这个概念,而是提供了状态值 state,通过设置 setState来存储和管理属性的变化。基本语法如下:
state = {num:1}
this.state //获取属性值
this.setState //更新设置数据,会刷新DOM
举例:设置属性 state,通过 setState 来修改属性 state;
//rcc 快捷生成类组件
//rfc 快捷生成函数组件
import React, { Component } from "react";
export default class App extends Component {
state = { num: 1 };
// 每次点击按钮,state中的num值+1
add() {
// sst 快捷生成setState(更新state)
this.setState({ num: this.state.num + 1 });
}
render() {
return (
<div>
<button onClick={this.add.bind(this)}>{this.state.num}</button>
</div>
);
}
}
setState 可用来刷新 DOM,需要注意在方法中 setState 语法 this.setState({}); 必须要写,否则变量在程序中会变化,但页面中不会渲染;
import React, { Component } from "react";
export default class App1 extends Component {
// 成员属性
num = 1;
add() {
this.num++;
// 只有执行以下代码才能渲染DON(react不会自动渲染,只能由我们手动渲染;Vue则会自动渲染)
// sst
this.setState({});
}
render() {
return (
<div>
<button onClick={this.add.bind(this)}>{this.num}</button>
</div>
);
}
}
setState 具有异步性,在 setState 语法中有两个参数,第一个为需要修改的 state 属性,第二个是回调方法( DOM 渲染后执行);
import React, { Component } from "react";
export default class App extends Component {
state = { num: 1 };
add() {
// setState
// 参数1:需要修改设置的state属性
// 参数2:回调方法,DOM渲染完成后触发
this.setState({ num: 8 }, () => {
console.log("页面渲染完毕的num:", this.state.num);
});
console.log("初始时的num:", this.state.num);
}
render() {
return (
<div>
<button onClick={this.add.bind(this)}>{this.state.num}</button>
</div>
);
}
}
二、样式
在 src 下的 App.js 中引入 css 文件用到的是 import,需要注意 import 默认是引入模块,当引入文件时需要指定文件路径;
//App.js中
// 动态绑定样式
import React, { Component } from "react";
// 引入CSS文件
// import默认是引入模块,当引入文件时需要指定文件路径
import "./App.css";
export default class App extends Component {
size = 25;
add() {
// 递增
this.size++;
// 通过sst刷新DOM,使页面刷新(React不会自动渲染,该语句必须写)
this.setState({});
}
render() {
return (
<div>
<button onClick={this.add.bind(this)}>点击变大</button>
{/* style的使用:内部嵌入样式 */}
<div
style={{
color: "red",
border: "1px solid blue",
fontSize: this.size,
}}
>
Hello React!
</div>
<hr />
{/* class的使用:调用其他文件的css样式 */}
<div className="error">前端小马</div>
<hr />
{/* 动态绑定样式 */}
<div className={this.size > 25 ? "success" : "error"}>前端小马哥</div>
<hr />
{/* 注意:调用函数时要加括号,要求立即执行;调用事件则不用加括号 */}
<div className={this.showClass()}>zs</div>
</div>
);
}
showClass() {
if (this.size < 23) return "success";
if (this.size > 29) return "error";
return "warn";
}
}
三、图片的使用
import React, { Component } from "react";
// 导入图片
import imgURL from "./assets/2.jpg"
export default class App extends Component {
render() {
return (
<div>
{/* 远程图片资源 */}
<img src="https://csdnimg.cn/medal/chaoji1024@240.png" />
{/* 本地图片资源 */}
{/* 图片在public目录下,直接引入 */}
<img src="/logo192.png" />
{/* 图片在src/assets目录下,assets目录手动创建 */}
{/* 用法1:通过require引入(注意需要添加default后缀) */}
<img src={require("./assets/2.jpg").default} />
{/* 用法2:先用import导入图片,再使用 */}
<img src={imgURL} />
</div>
);
}
}
四、双向绑定(表单元素)
如果需要获取表单输入框所收集到的信息,就要实现双向绑定;单向绑定是指将数据显示在页面组件上,双向绑定既能将程序中的变量自动同步到页面上显示,又能将页面上用户主动修改的新值自动更新回程序中的变量保存。
// 数据双向绑定
import React, { Component } from "react";
export default class App extends Component {
state = { name: "web前端" };
render() {
return (
<div>
<input
type="text"
value={this.state.name}
onChange={this.nameChanged}
/>
<div>{this.state.name}</div>
{/* 如果代码较为简单,可以将事件处理方法直接到JSX语句当中(简化) */}
<input
type="text"
value={this.state.name}
onChange={(e) => this.setState({ name: e.target.value })}
/>
</div>
);
}
// 组件的事件处理方法
nameChanged = (e) => {
console.log(e);
// 获取input中的value值,修改state中的值
this.setState({ name: e.target.value });
};
}
五、条件渲染
// 条件渲染
import React, { Component } from "react";
export default class App extends Component {
score = 60;
render() {
return (
<div>
<h4> 得分: {this.score} </h4>{" "}
<button
disabled={this.score >= 100}
onClick={this._changeScore.bind(this, +10)}
>
加10分
</button>
<button
disabled={this.score <= 0}
onClick={this._changeScore.bind(this, -10)}
>
减10分
</button>
{/* 分数显示: >90 优秀 80-90 良好 >60 及格 <60 不及格 */}
{this.show()}
</div>
);
}
_changeScore(num) {
this.score += num;
console.log(this.score);
// 手动刷新DOM
this.setState({});
}
show() {
if (this.score > 90) return <div>优秀!</div>;
if (this.score <= 90 && this.score > 80) return <div>良好!</div>;
if (this.score < 60) return <div>不及格!</div>;
return <div>及格!</div>;
}
}
六、列表渲染
// 列表渲染
import React, { Component } from "react";
export default class App extends Component {
skills = ["HTML", "CSS", "JavaScript", "Node", "vue", "react"];
// 渲染一组button
showBtns() {
// 1.创建空数组
let arr = [];
// 2.遍历skill数组,将每一项包裹在button标签中
this.skills.forEach((item, index) => {
let tmp = (
<button style={{ marginLeft: "10px" }} key={index}>
{item}
</button>
);
arr.push(tmp);
});
// 3.返回重新构建的button数组
return arr;
}
// 渲染一组li标签
showList() {
let arr = [];
this.skills.forEach((item, index) => {
let tmp = <li key={index}>{item}</li>;
arr.push(tmp);
});
return arr;
}
render() {
return (
<div>
{this.skills}
<div>{this.showBtns()}</div>
<div>
<ul>{this.showList()}</ul>
</div>
</div>
);
}
}