React（三）状态值、样式、双向绑定、渲染(条件、列表)(1)

// sst

this.setState({});

}

render() {

return (

{this.num}

);

}

}

setState 具有异步性，在 setState 语法中有两个参数，第一个为需要修改的 state 属性，第二个是回调方法( DOM 渲染后执行)；

import React, { Component } from “react”;

export default class App extends Component {

state = { num: 1 };

doAdd() {

// setState

// 参数1：需要修改设置的state属性

// 参数2：回调方法，DOM渲染完成后触发

this.setState({ num: 8 }, () => {

console.log(“页面渲染完毕的num:”, this.state.num);

});

console.log(“初始时的num:”, this.state.num);

}

render() {

return (

{this.state.num}

);

}

}

二、样式

---

引入 CSS 样式的方法有3种	HTML 中，link 引入；
	css 中，@import 引入；
	js中，import 引入。

在 src 下的 App.js 中引入 css 文件用到的是 import，需要注意 import 默认是引入模块，当引入文件时需要指定文件路径；

举例：动态绑定样式，调用方法使 div 的尺寸递增；

/App.css中/

.danger {

background-color: red;

width: 200px;

color: white;

border-radius: 10px;

padding: 10px;

}

.success {

background-color: green;

width: 200px;

color: white;

border-radius: 10px;

padding: 10px;

}

.warning {

background-color: orange;

width: 200px;

color: white;

border-radius: 10px;

padding: 10px;

}

//App.js中

// 动态绑定样式

import React, { Component } from “react”;

// 引入CSS文件

// import默认是引入模块，当引入文件时需要指定文件路径

import “./App.css”;

export default class App extends Component {

size = 18;

doBig() {

// 递增

this.size++;

// 通过sst刷新DOM，使页面刷新（React不会自动渲染，该语句必须写）

this.setState({});

}

render() {

return (

点击变大

{/* style的使用：内部嵌入样式 */}

style={{

color: “red”,

border: “1px solid blue”,

fontSize: this.size,

}}

Hello React!

---

{/* class的使用：调用其他文件的css样式 */}

前端小马

---

{/* 动态绑定样式 */}

22 ? "success" : "danger"}>前端小马哥

---

{/* 注意：调用函数时要加括号，要求立即执行；调用事件则不用加括号 */}

小马学前端

);

}

showClass() {

if (this.size < 22) return “success”;

if (this.size > 25) return “danger”;

return “warning”;

}

}

JSX 语法注释格式： {/* 注释内容 */}

三、图片的使用

---

在App.js中可引入远程和本地的图片；具体引入方式如下代码：

import React, { Component } from “react”;

// 导入图片

import imgURL from “./assets/2.jpg”

export default class App extends Component {

render() {

return (

{/* 远程图片资源 */}

{/* 本地图片资源 */}

{/* 图片在public目录下，直接引入 */}

{/* 图片在src/assets目录下，assets目录手动创建 */}

{/* 用法1：通过require引入(注意需要添加default后缀) */}

<img src={require(“./assets/2.jpg”).default} />

{/* 用法2：先用import导入图片，再使用 */}

);

}

}

四、双向绑定（表单元素）

---

如果需要获取表单输入框所收集到的信息，就要实现双向绑定；单向绑定是指将数据显示在页面组件上，双向绑定既能将程序中的变量自动同步到页面上显示，又能将页面上用户主动修改的新值自动更新回程序中的变量保存。

// 数据双向绑定

import React, { Component } from “react”;

export default class App extends Component {

state = { uname: “web前端” };

render() {

return (

<input

type=“text”

value={this.state.uname}

onChange={this._unameChanged}

/>

{this.state.uname}

{/* 如果代码较为简单，可以将事件处理方法直接到JSX语句当中（简化） */}

<input

type=“text”

value={this.state.uname}

onChange={(e) => this.setState({ uname: e.target.value })}

/>

);

}

// 组件的事件处理方法

_unameChanged = (e) => {

console.log(e);

// 获取input中的value值，修改state中的值

this.setState({ uname: e.target.value });

};

}

五、条件渲染

---

举例：点击加减按钮将分数属性 store 进行 +10(-10) 操作，并判断该分数满足哪种条件；

// 条件渲染

import React, { Component } from “react”;

export default class App extends Component {

score = 60;

render() {

return (

得分： {this.score}

{" "}

<button

disabled={this.score >= 100}

onClick={this._changeScore.bind(this, +10)}

加10分

<button

disabled={this.score <= 0}

onClick={this._changeScore.bind(this, -10)}

减10分

{/* 分数显示： >90 优秀 80-90 良好 >60 及格 <60 不及格 */}

{this.show()}

);

}

_changeScore(num) {

this.score += num;

console.log(this.score);

// 手动刷新DOM

this.setState({});

}

show() {

if (this.score > 90) return

优秀！

;

if (this.score <= 90 && this.score > 80) return

良好！

;

if (this.score < 60) return

不及格！

;

return

及格！

;

}

}

六、列表渲染

---

1.数组

举例： 将一个数组中的元素渲染为一组按钮和一组列表；

// 列表渲染

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}

);

arr.push(tmp);

});

// 3.返回重新构建的button数组

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

完整版面试题资料免费分享，只需你点赞支持，动动手指点击此处就可领取了。

前端实习面试的套路

---

回顾项目

往往在面试时，面试官根据你简历中的项目由点及面地展开问答，所以请对你做过的最好的项目进行回顾和反思。回顾你做过的工作和项目中最复杂的部分，反思你是如何完成这个最复杂的部分的。

面试官会重点问你最复杂的部分的实现方法和如何优化。重点要思考如何优化，即使你项目中没有对那部分进行优化，你也应该预先思考有什么优化的方案。如果这部分答好了，会给面试官留下很不错的印象。

重点在于基础知识

这里指的基础知识包括：前端基础知识和学科基础知识。

前端基础知识：html/css/js 的核心知识，其中 js 的核心知识尤为重要。比如执行上下文、变量对象/活动对象（VO/AO）、作用域链、this 指向、原型链等。

学科基础知识：数据结构、计算机网络、算法等知识。你可能会想前端不需要算法，那你可能就错了，在大公司面试，面试官同样会看重学生这些学科基础知识。
你可能发现了我没有提到React/Vue这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。
这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。如果你没有使用过框架，那也不需要太担心，把重点放在基础知识和学科基础知识之上，有其余精力的话可以去看看主流框架的核心思想。

往往在面试时，面试官根据你简历中的项目由点及面地展开问答，所以请对你做过的最好的项目进行回顾和反思。回顾你做过的工作和项目中最复杂的部分，反思你是如何完成这个最复杂的部分的。

面试官会重点问你最复杂的部分的实现方法和如何优化。重点要思考如何优化，即使你项目中没有对那部分进行优化，你也应该预先思考有什么优化的方案。如果这部分答好了，会给面试官留下很不错的印象。

重点在于基础知识

这里指的基础知识包括：前端基础知识和学科基础知识。

前端基础知识：html/css/js 的核心知识，其中 js 的核心知识尤为重要。比如执行上下文、变量对象/活动对象（VO/AO）、作用域链、this 指向、原型链等。

学科基础知识：数据结构、计算机网络、算法等知识。你可能会想前端不需要算法，那你可能就错了，在大公司面试，面试官同样会看重学生这些学科基础知识。
你可能发现了我没有提到React/Vue这些框架的知识，这里得说一说，大公司不会过度的关注这方面框架的知识，他们往往更加考察学生的基础。
这里我的建议是，如果你至少使用或掌握其中一门框架，那是最好的，可以去刷刷相关框架的面试题，这样在面试过程中即使被问到了，也可以回答个 7788。如果你没有使用过框架，那也不需要太担心，把重点放在基础知识和学科基础知识之上，有其余精力的话可以去看看主流框架的核心思想。