- A+
没有什么是不可能的,只是需要找到正确的方法。
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。然而在不涉及到列表的增加删除、重排设置成索引值也没有问题。