阅读 66

useState 函数式状态管理

本文首发说说前端,可点击查看原文支持作者。

React 有两种方式可以实现组件的定义,一种是通过函数实现,一种是通过class类实现。一般的通过class类实现的组件我们可以看到足够多的生命周期、状态state可供操作,而函数式组件则没有生命周期和状态值state。对就性能而言,由于函数组件需要初始化组件,而函数组件是直接通过return 返回JSX,因此函数组件的性能要优于类组件。为了性能考虑,一般的我们推荐使用函数组件来实现组件的定义。

出于操作考虑,React自从16.8.0版本开始支持Hook功能,让我们可以通过hook方式在函数组件中实现state、生命周期的监听。这里,我们介绍hook的一种用法useState,通过useState来实现状态值的操作。操作之前,需要注意几点:

  • 只能在React函数中调用

即是必须在组件函数中调用,不可在一般的js中使用useState等hook实现。

  • 在函数返回部分顶部调用

不可在jsx代码部分使用hook实现,须得如同js的变量定义方式使用useState等hook实现。

Class状态管理

在没有hook之前,我们通常使用class组件的方式来实现状态的管理:

import React, { Component } from 'react';

export default class extends Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date(),counter:0};
  }

  

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
         <button onClick={() => this.state((state, props) => ({
              counter: state.counter + 1}))}>
        Click me
      </button>
      </div>
    );
  }

} 

复制代码

当使用useState时

当使用hook在函数组件中实现状态管理,对我们而言操作是变得更简单了。

import React, { useState } from 'react';

function Counter({initialCount}) {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

复制代码

如何使用useState

通过上面的示例,我们基本可以简单的总结useState的使用方法。

  • 定义state

我们可以通过useState来定义一个state对象:

//useState格式
const [state, setState] = useState(initialState);
复制代码

useState通过传入一个初始的对象值initialState,从而返回一个状态值state(初始状态值为initialState),和一个更新状态的更新函数setState

  • 使用更新函数

使用上述返回的更新函数来更新状态值:

setState(state+1);
复制代码