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

简介: React(三)状态值、样式、双向绑定、渲染(条件、列表)

一、状态值 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
  doAdd() {
    // sst 快捷生成setState(更新state)
    this.setState({ num: this.state.num + 1 });
  }
  render() {
    return (
      <div>
        <button onClick={this.doAdd.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;
  doAdd() {
    this.num++;
    // 只有执行以下代码才能渲染DON(react不会自动渲染,只能由我们手动渲染;Vue则会自动渲染)
    // sst
    this.setState({});
  }
  render() {
    return (
      <div>
        <button onClick={this.doAdd.bind(this)}>{this.num}</button>
      </div>
    );
  }
}

       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 (
      <div>
        <button onClick={this.doAdd.bind(this)}>{this.state.num}</button>
      </div>
    );
  }
}

二、样式


image.pngimage.png

image.png

       在 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 (
      <div>
        <button onClick={this.doBig.bind(this)}>点击变大</button>
        {/* style的使用:内部嵌入样式 */}
        <div
          style={{
            color: "red",
            border: "1px solid blue",
            fontSize: this.size,
          }}
        >
          Hello React!
        </div>
        <hr />
        {/* class的使用:调用其他文件的css样式 */}
        <div className="danger">前端小马</div>
        <hr />
        {/* 动态绑定样式 */}
        <div className={this.size > 22 ? "success" : "danger"}>前端小马哥</div>
        <hr />
        {/* 注意:调用函数时要加括号,要求立即执行;调用事件则不用加括号 */}
        <div className={this.showClass()}>小马学前端</div>
      </div>
    );
  }
  showClass() {
    if (this.size < 22) return "success";
    if (this.size > 25) return "danger";
    return "warning";
  }
}

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


三、图片的使用

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

image.png



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 = { uname: "web前端" };
  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.uname}
          onChange={this._unameChanged}
        />
        <div>{this.state.uname}</div>
      {/* 如果代码较为简单,可以将事件处理方法直接到JSX语句当中(简化) */}
        <input
          type="text"
          value={this.state.uname}
          onChange={(e) => this.setState({ uname: e.target.value })}
        />
      </div>
    );
  }
  // 组件的事件处理方法
  _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 (
      <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>;
  }
}

六、列表渲染

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}
        </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>
    );
  }
}

2.对象数组

       举例:将一个对象数组(一个数组中包含多个对象元素)中的元素渲染在一个表格中;


import React, { Component } from "react";
export default class App extends Component {
  heros = [
    { name: "诸葛亮", job: "法师", price: "18888" },
    { name: "马可波罗", job: "射手", price: "18888" },
    { name: "韩信", job: "刺客", price: "13888" },
    { name: "刘禅", job: "辅助", price: "6888" },
    { name: "马超", job: "战士", price: "18888" },
  ];
  showTable() {
    // 1.创建一个空数组
    let arr = [];
    // 2.遍历
    this.heros.forEach((item, index) => {
      arr.push(
        <tr key={index} style={this.showColor(index + 1)}>
          <td>{item.name}</td>
          <td>{item.job}</td>
          <td>{item.price}</td>
        </tr>
      );
    });
    // 3.返回拼接好的数组
    return arr;
  }
  // 隔行变色
  showColor(index) {
    if (index % 2 === 0) {
      return { backgroundColor: "gray" };
    }
  }
  render() {
    return (
      <div>
        <table border="1">
          <thead>
            <tr>
              <th>姓名</th>
              <th>职业</th>
              <th>价格</th>
            </tr>
          </thead>
          <tbody>{this.showTable()}</tbody>
        </table>
      </div>
    );
  }
}


相关文章
|
2月前
|
前端开发 JavaScript
React学习之——条件渲染
【10月更文挑战第16天】React 中没有像Vue中v-if这种指令。React 中的条件渲染和 JavaScript 中的一样,使用 JavaScript 运算符 if 或者条件运算符去创建元素来表现当前的状态,然后让 React 根据它们来更新 UI。
|
2月前
|
前端开发 JavaScript 容器
React 元素渲染
10月更文挑战第7天
29 1
|
2月前
|
监控 前端开发 UED
在 React 18 中利用并发渲染提高应用性能
【10月更文挑战第12天】利用并发渲染需要综合考虑应用的特点和需求,合理运用相关特性和策略,不断进行优化和调整,以达到最佳的性能提升效果。同时,要密切关注 React 的发展和更新,以便及时利用新的技术和方法来进一步优化应用性能。你还可以结合具体的项目实践来深入理解和掌握这些方法,让应用在 React 18 的并发渲染机制下发挥出更好的性能优势。
119 59
|
2月前
|
JavaScript 前端开发 算法
前端优化之超大数组更新:深入分析Vue/React/Svelte的更新渲染策略
本文对比了 Vue、React 和 Svelte 在数组渲染方面的实现方式和优缺点,探讨了它们与直接操作 DOM 的差异及 Web Components 的实现方式。Vue 通过响应式系统自动管理数据变化,React 利用虚拟 DOM 和 `diffing` 算法优化更新,Svelte 通过编译时优化提升性能。文章还介绍了数组更新的优化策略,如使用 `key`、分片渲染、虚拟滚动等,帮助开发者在处理大型数组时提升性能。总结指出,选择合适的框架应根据项目复杂度和性能需求来决定。
|
2月前
|
前端开发 JavaScript 算法
React 渲染优化策略
【10月更文挑战第6天】React 是一个高效的 JavaScript 库,用于构建用户界面。本文从基础概念出发,深入探讨了 React 渲染优化的常见问题及解决方法,包括不必要的渲染、大量子组件的渲染、高频事件处理和大量列表渲染等问题,并提供了代码示例,帮助开发者提升应用性能。
56 6
|
2月前
|
前端开发 JavaScript API
React 列表 & Keys
10月更文挑战第9天
16 0
|
2月前
|
前端开发 JavaScript
React 条件渲染
10月更文挑战第9天
30 0
|
2月前
|
设计模式 缓存 前端开发
React中样式解决方案有哪些?
本文首发于微信公众号“前端徐徐”,探讨了React开发中的样式管理方法,包括内联样式、常规CSS、CSS-Module、CSS-in-JS及使用CSS框架等五种常见方案,分析了各自的优缺点,帮助开发者根据项目需求选择合适的样式解决方案。
51 0
|
2月前
|
JavaScript 前端开发 算法
写 React / Vue 项目时为什么要在列表组件中写 key
在React或Vue项目中,为列表组件中的每个元素添加唯一的key属性,有助于框架高效地更新和渲染列表。Key帮助虚拟DOM识别哪些项已更改、添加或删除,从而优化性能并减少不必要的重新渲染。
|
4月前
|
资源调度 前端开发 API
React Suspense与Concurrent Mode:异步渲染的未来
React的Suspense与Concurrent Mode是16.8版后引入的功能,旨在改善用户体验与性能。Suspense组件作为异步边界,允许子组件在数据加载完成前显示占位符,结合React.lazy实现懒加载,优化资源调度。Concurrent Mode则通过并发渲染与智能调度提升应用响应性,支持时间分片和优先级调度,确保即使处理复杂任务时UI仍流畅。二者结合使用,能显著提高应用效率与交互体验,尤其适用于数据驱动的应用场景。
73 20