React 基础笔记(React使用Hooks-usestate)(二十三)

React-Hooks

传统的使用类来描述组件 可以使用声明周期,this 来描述组件。但缺陷很多一方面它继承起来十分费劲。另一方面在不同的声明周期里面还得写重复的逻辑代码。所以引入了 Hooks 这个概念

Hooks

useState

• 它的主要作用就是保存状态,它接收一个参数就是默认值。它返回一个数组 数组第一个是数据,第二个是操纵数据的方法

• 操作数据的方法里面的参数要是函数则函数里面必须有 return 这个对应的数据,要不然就直接修改

import React, { useState, useEffect } from 'react'
function App() {
  const [count, setCount] = useState(0) //默认值是0
  const [name, setName] = useState('张三') //默认值是张三
  function handleClick() {
    setCount((count) => {
      return count + 1
    })
    setName('李四')
  }

  return (
    <div>
      <span>
        {count}---{name}
      </span>
      <button type="button" onClick={handleClick}>
        点击
      </button>
    </div>
  )
}

export default App