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