[JavaScript知识库]React Hooks学习篇-useState

类组件

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
}

函数组件

import React, { useState } from 'react';

function Example() {
  // 声明一个叫 “count” 的 state 变量
  const [count, setCount] = useState(0);
}

useState

类组件是由"有状态"的组件,而函数组件时"无状态"的组件;

useState 是允许你在 React 函数组件中添加 state 的 Hook。

useState 解决了函数组件没有状态的问题.

function ExampleWithManyStates() {
  // 声明多个 state 变量
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: '学习 Hook' }]);
}

注意事项:
第一个值是当前的 state，第二个值是更新 state 的函数。
比如说:上述代码的state变量age 只能通过setAge来改变;