React-hook语法

React-Hooks

Hooks 是什么 ?

hook

• Hooks 是 React 16.8 新增的特性，它可以让你在不编写 class(类组件) 的情况下使用 state 以及其他的 React 特性
• React 一直都提倡使用函数组件的，但是函数组件没有实例不能操作state，也没有生命周期函数，只有类组件才有.
• 如果有一天你在编写函数组件中, 突然意识到需要向其添加一些 state， 怎么办呢? 以前的做法是必须将其它转化为 类组件, 现在呢? Hooks出现之后, 你可以在现有的函数组件中配合 Hooks 直接来操作state了
• 从功能上来看 : 类组件 ≈ 函数组件 + Hooks
• 在 React API中, 凡是 use 开头的 都是 Hooks
  • 比如 : useState、useEffect、useCallback、useContext等等

useState 语法

 const [state, setstate] = useState(initialState)
 - state 一个状态变量
 - setstate  是一个用于修改状态的 函数
 - initialState--->state的初始值

使用

import React, { useState } from 'react' //1-引入包
const App = () => {
  const [count, setCount] = useState(0) //---2、声明变量
  return (
    <div>
      <div>count---{count}</div> //--3、使用变量
      <button onClick={() => setCount(count + 1)}>加1</button> // 4---使用修改变量的方法
    </div>
  )
}
export default App