React 组件之状态

  • React 组件之状态已关闭评论
  • 79 次浏览
  • A+
所属分类:Web前端
摘要

没有什么是不可能的,只是需要找到正确的方法。状态就是组件内部特有数据的载体(组件数据挂载方式),改变数据页面就会刷新,由组件自己设置和更改,也就是说由组件自己产生、维护,使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理),这在 React 中称为:条件渲染。


没有什么是不可能的,只是需要找到正确的方法。

1. 什么是状态?

状态就是组件内部特有数据的载体(组件数据挂载方式),改变数据页面就会刷新,由组件自己设置和更改,也就是说由组件自己产生、维护,使用状态的目的就是为了在不同的状态下使组件的显示不同(自己管理),这在 React 中称为:条件渲染

为什么用状态?

React 不能直接修改 DOM 来更新页面。React 采用声明式设计,需要通过状态的改变来更新页面。

2. 使用状态 :state 关键字

import React, { Component } from 'react'  export default class App extends Component {   // 组件状态两种写法   // state = {   //   isLove: false   // }    constructor() {     super()     this.state = {       isLove: false     }   }    isLoveFunc = ()=> {     this.setState({       isLove: !this.state.isLove     })   }    render() {     return (       <div>         <h1>喜欢就收藏吧!</h1>         <button onClick={ ()=>{ this.isLoveFunc() } }>{this.state.isLove?"取消收藏":"收藏"}</button>       </div>     )   } } 

3. 使用状态 :setState 关键字

this.state 是纯 js 对象,在 vue 中,data 属性是利用 object.defineproperty 处理过的,更改 data 的数据的时候会触发数据的 getter 和 setter,但是 React 中没有做这样的处理,如果直接更改的话,React 是无法得知的,所以,需要使用特殊的更改状态的方法 setState。

4. setState 同步异步

setState 处在同步逻辑中,异步更新状态,更新真实 Dom。

setState 处在异步逻辑中,V18:异步更新状态,更新真实 Dom,V17:同步更新状态,更新真实 Dom。但是要在 V18 中使用 createRoot 这个新的 renderapi。如果在 V18 中使用的还是 ReactDOM.render()这种老的 api 那结果是和 V17一致的。

setState 接受第二个参数,第二个参数是回调函数,状态和 Dom 更新完后就会被触发。

5. 列表 key 值

React 的高效依赖于所谓的 Virtual-DOM,尽量不碰 DOM。对于列表元素来说会有一个问题:元素可能会在一个列表中改变位置。要实现这个操作,只需要交换一下 DOM 位置就行了,但是 React 并不知道其实我们只是改变了元素的位置,所以它会重新渲染后面两个元素 (再执行 virtua-DOM),这样会大大增加 DOM 操作。但如果给每个元素加上唯一的标识,React 就可以知道这两个元素只是交换了位置,这个标识就是 key,这个 key 必须是每个元素唯一的标识。为了列表的复用和重排,设置 key 值提高性能。理想 key 值为 item.id。然而在不涉及到列表的增加删除、重排设置成索引值也没有问题。