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。然而在不涉及到列表的增加删除、重排设置成索引值也没有问题。

热门相关:厨道仙途   跟总裁假结婚的日子   青莲剑说   龙印战神   龙印战神