React Hook入门系列（1）-- useState

简介

Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

优势

• 简化组件逻辑
• 复用状态逻辑
• 无需使用类组件编写

so，我们来学习第一个“Hook” - useState

语法

import React, { useState } from 'react'

function State() {
    // 声明一个叫 'age' 的 state变量
    const [ age, setAge ] = useState(18)    // 默认值
    return (<div>
        年龄：{ age } <br />
        <button onClick={() => {
            setAge(age + 1)
        }}>长一岁</button>
    </div>)
}

如果多个state变量的情况下怎么办呢？话不多说，直接上代码

import React, { useState } from 'react'

function State() {
    const [ name, setName ] = useState('乌鸦')
    const [ age, setAge ] = useState(18)
    return (<div>
        姓名：{ name } <br />
        年龄：{ age }  <br />
        <button onClick={() => {
            setAge(age + 1)
        }}>长一岁</button>  <br />
        <button onClick={() => {
            setName('苏格拉没有底')
        }}>换个名字</button>
    </div>)
}

那可不可以将多个变量合并到一个state里呢？代码如下：

import React, { useState } from 'react'

function State() {
  let [ state, setState ] = useState({
      name: '乌鸦',
      age: 18
  })
  let { name, age } = state
  return (<div>
      姓名：{ name }  <br />
      年龄：{ age }   <br />
      <button onClick={() => {
          setState({
              ...state,    // 注意一定要先解构之前的state
              age: age+1
          })
      }}>长一岁</button>  <br />
      <button onClick={() => {
          setState({
              ...state,
              name: '苏格拉没有底'
          })
      }}>换个名</button>
  </div>)
}

但是这种方法不推荐，大家还是按照上面的方法通过编写多个useState方式来实现

最后，类组件代码奉上，大家可以对比一下

import React, { Component } from 'react'

class State extends Component {
  state = {
      name: '乌鸦',
      age: 18
  }
  
  // 箭头函数写法 不然this指向会有问题
  setAge = ()=>{
      let { age } = this.state
      this.setState({
          age: ++age
      })
  }
  
  render() {
      let { name, age } = this.state
      return (<div>
          姓名：{ name }  <br />
          年龄：{ age }   <br />
          <button onClick={ this.setAge }>长一岁</button>
          
      </div>)
  }
}

结尾

2021年最后一天马上就要过去了，祝大家2022一切皆顺~~~